I have a details fragment which shows information about a selected item. The image is embedded in a CoordinatorLayout
and CollapsingToolbarLayout
. The behavior works as expected: As the image is scrolled down, the FloatingActionButton
scrolls up with the end of the CollapsingToolbarLayout
. Then as it gets fully collapsed the FloatingActionButton
disappears. What I want to happen is that this button never disappears. It's fine that it's anchored to the toolbar, but I have been unable to find out how to keep it visible after looking in the docs and on this site. Any tips would be appreciated!
Here is a simplified version of my layout:
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark"
app:contentScrim="@color/colorPrimaryDark"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="@{movie.title}"
app:toolbarId="@+id/toolbar">
<ImageView
android:id="@+id/fragment_details_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/browse_image_content_description"
android:scaleType="centerCrop"
app:largeSize="@{true}"
app:layout_collapseMode="parallax"
app:posterPath="@{movie.posterPath}" />
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.heiligbasil.movietvdelight.view.DetailsFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/fragment_details_text_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="@{movie.title}"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent" />
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:elevation="6dp"
app:borderWidth="0dp"
app:fabSize="mini"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end"
app:pressedTranslationZ="10dp"
app:rippleColor="@color/colorPrimary"
app:srcCompat="@drawable/ic_save" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
What I want to happen is that this button never disappears
It's actually because of app:layout_anchor="@id/app_bar"
where your FloatingActionButton
has special relation and controls by AppBarLayout
while scrolling.
To disable that, set: app:behavior_autoHide="false"
to your FloatingActionButton
.
Also, you can do this programmatically using setAutoHideEnabled()
. This is exactly what you're looking for: https://stackoverflow.com/a/43077760/4409113