Fix bottom bar in CoordinatorLayout

Question

I have a CoordinatorLayout which contains AppBarLayout and a FrameLayout which contains fragments.

One of this fragment contains a TabLayout at Top, one List trough RecyclerView and at the Bottom one "homemade" toolbar.

The AppBarLayout is configured with app:layout_scrollFlags="scroll|enterAlways"

My problem is that both "toolbars" are hiding when scroll, the AppBarLayout and my "homemade" toolbar at the bottom. This is the current behaviour

I would like to fix the bottom "homemade" toolbar to keep visible but I can't achieve it.

This is the XML of the fragment Layout

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     >     <android.support.design.widget.TabLayout         android:id="@+id/toolbarfilter"         android:layout_width="match_parent"         android:background="@color/azul_asde"         app:tabMode="fixed"         app:tabMaxWidth="0dp"         android:elevation="4dp"         app:tabIndicatorColor="@color/verde_pastel"         android:layout_height="wrap_content"         />      <android.support.v4.widget.SwipeRefreshLayout         xmlns:android="http://schemas.android.com/apk/res/android"         android:id="@+id/swipeContainer"         android:layout_width="match_parent"         android:layout_height="0dp"         android:layout_weight="1">      <android.support.v7.widget.RecyclerView     android:id="@+id/list"     android:layout_width="match_parent"     android:layout_height="match_parent"/>     </android.support.v4.widget.SwipeRefreshLayout>          <LinearLayout         android:id="@+id/toolbarselection"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="horizontal"         android:paddingTop="10dp"         android:paddingBottom="10dp"         android:background="@color/azul_asde"         android:elevation="4dp"         android:visibility="visible"         >         <ImageView             android:id="@+id/delete"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_weight="1"             android:src="@drawable/ic_delete_white_24dp"             android:tint="@color/gris_desactivado" />         <ImageView             android:id="@+id/select"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_weight="1"             android:src="@drawable/ic_bookmark_border_white_24dp"/>          <ImageView             android:id="@+id/send"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_weight="1"             android:src="@drawable/ic_send_white_24dp"             android:tint="@color/gris_desactivado" />      </LinearLayout>  </LinearLayout> 

EDIT1: THIS questions seems to be the same problem.

Answer 1

Try this layout :

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:id="@+id/container">      <ScrollView         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_above="@+id/bottom_navigation"         android:layout_alignParentTop="true">          <LinearLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:orientation="vertical">         <android.support.v7.widget.CardView             xmlns:card_view="http://schemas.android.com/apk/res-auto"             android:id="@+id/card_view"             android:layout_width="match_parent"             android:layout_margin="10dp"             android:layout_height="110dp"             android:padding="15dp"             card_view:cardElevation="2dp"             card_view:cardCornerRadius="4dp">              <TextView                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:text="Test" />          </android.support.v7.widget.CardView>           <android.support.v7.widget.CardView             xmlns:card_view="http://schemas.android.com/apk/res-auto"             android:id="@+id/card_view1"             android:layout_width="match_parent"             android:layout_margin="10dp"             android:layout_height="110dp"             android:padding="15dp"             card_view:cardElevation="2dp"             card_view:cardCornerRadius="4dp">              <TextView                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:text="Test" />          </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 xmlns:card_view="http://schemas.android.com/apk/res-auto"                 android:id="@+id/card_view3"                 android:layout_width="match_parent"                 android:layout_margin="10dp"                 android:layout_height="110dp"                 android:padding="15dp"                 card_view:cardElevation="2dp"                 card_view:cardCornerRadius="4dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:text="Test" />              </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 xmlns:card_view="http://schemas.android.com/apk/res-auto"                 android:id="@+id/card_view4"                 android:layout_width="match_parent"                 android:layout_margin="10dp"                 android:layout_height="110dp"                 android:padding="15dp"                 card_view:cardElevation="2dp"                 card_view:cardCornerRadius="4dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:text="Test" />              </android.support.v7.widget.CardView>              <android.support.v7.widget.CardView                 xmlns:card_view="http://schemas.android.com/apk/res-auto"                 android:id="@+id/card_view5"                 android:layout_width="match_parent"                 android:layout_margin="10dp"                 android:layout_height="110dp"                 android:padding="15dp"                 card_view:cardElevation="2dp"                 card_view:cardCornerRadius="4dp">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:text="Test" />              </android.support.v7.widget.CardView>         </LinearLayout>     </ScrollView>       <RelativeLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_gravity="bottom"         android:gravity="bottom">          <android.support.design.widget.BottomNavigationView             android:layout_width="match_parent"             android:layout_height="56dp"             android:layout_weight="1"             android:foregroundGravity="bottom"             android:background="@color/green"             app:itemIconTint="@color/white"             app:itemTextColor="@color/white"             android:id="@+id/bottomnav"             app:menu="@menu/main">           </android.support.design.widget.BottomNavigationView>      </RelativeLayout>    </android.support.design.widget.CoordinatorLayout> 

Answer 2

The best possible solution will be making this kind of hierarchy

<ConstraintLayout>     <CoordinatorLayout>         <AppBarLayout>            <ToolBar>            <TabLayout>         </AppBarLayout>         <Inlude>            Put the Main Content here.         </Include>     </CoordinatorLayout>       Other Widgets that you want to be placed at a fixed position.  </ConstraintLayout> 

Don't forget to add

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

the above line into your included layout parent ViewGroup

Let's have an example of the approach that I am talking about

<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent">      <androidx.coordinatorlayout.widget.CoordinatorLayout         android:layout_width="match_parent"         android:layout_height="0dp"         app:layout_constraintBottom_toTopOf="@id/container"         app:layout_constraintEnd_toEndOf="parent"         app:layout_constraintStart_toStartOf="parent"         app:layout_constraintTop_toTopOf="parent"         tools:context=".activity.Dashboard">          <com.google.android.material.appbar.AppBarLayout             android:id="@+id/appBarLayout"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:theme="@style/AppTheme.AppBarOverlay"             app:elevation="0dp"             app:layout_constraintBottom_toTopOf="@+id/container"             app:layout_constraintEnd_toEndOf="parent"             app:layout_constraintStart_toStartOf="parent"             app:layout_constraintTop_toTopOf="parent">              <androidx.appcompat.widget.Toolbar                 android:id="@+id/toolbar"                 android:layout_width="match_parent"                 android:layout_height="?attr/actionBarSize"                 android:background="@color/background"                 android:elevation="0dp"                 app:layout_scrollFlags="scroll|enterAlways|snap"                 app:popupTheme="@style/AppTheme.PopupOverlay"                 app:titleTextColor="#000000" />              <com.google.android.material.tabs.TabLayout                 android:id="@+id/tabLayout"                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 app:tabBackground="@color/background"                 app:tabIndicatorColor="@color/colorAccent"                 app:tabMode="scrollable"                 app:tabSelectedTextColor="@color/black"                 app:tabTextColor="@color/black" />          </com.google.android.material.appbar.AppBarLayout>          <include             android:id="@+id/include"             layout="@layout/content_main" />      </androidx.coordinatorlayout.widget.CoordinatorLayout>      <RelativeLayout         android:id="@+id/btSend"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginRight="@dimen/_50sdp"         android:visibility="gone"         app:layout_constraintBottom_toTopOf="@id/container"         app:layout_constraintEnd_toEndOf="parent"         app:layout_constraintHorizontal_bias="0.5"         app:layout_constraintStart_toEndOf="@+id/btReceive">          <com.google.android.material.floatingactionbutton.FloatingActionButton             android:id="@+id/fbSend"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_marginBottom="@dimen/_30sdp"             android:background="@color/colorAccent"             android:src="@drawable/ic_upload"             app:rippleColor="@color/colorAccent" />          <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_alignLeft="@id/fbSend"             android:layout_alignRight="@id/fbSend"             android:layout_alignBottom="@id/fbSend"             android:layout_marginBottom="@dimen/_3sdp"             android:elevation="@dimen/_10sdp"             android:gravity="center"             android:text="SEND"             android:textColor="@color/white"             android:textSize="@dimen/_8sdp" />     </RelativeLayout>      <RelativeLayout         android:id="@+id/btReceive"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginLeft="@dimen/_50sdp"         android:visibility="gone"         app:layout_constraintBottom_toTopOf="@id/container"         app:layout_constraintEnd_toStartOf="@+id/btSend"         app:layout_constraintHorizontal_bias="0.5"         app:layout_constraintStart_toStartOf="parent">          <com.google.android.material.floatingactionbutton.FloatingActionButton             android:id="@+id/fbReceive"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_marginBottom="@dimen/_30sdp"             android:background="@color/colorAccent"             android:src="@drawable/ic_download"             app:rippleColor="@color/colorAccent" />          <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_alignLeft="@id/fbReceive"             android:layout_alignRight="@id/fbReceive"             android:layout_alignBottom="@id/fbReceive"             android:layout_marginBottom="@dimen/_3sdp"             android:elevation="@dimen/_10sdp"             android:gravity="center"             android:text="RECEIVE"             android:textColor="@color/white"             android:textSize="@dimen/_8sdp" />     </RelativeLayout>      <androidx.constraintlayout.widget.ConstraintLayout         android:id="@+id/container"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_margin="@dimen/_7sdp"         android:background="@drawable/bottom_bar_corner"         android:padding="@dimen/_5sdp"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintEnd_toEndOf="parent"         app:layout_constraintStart_toStartOf="parent">          <Button             android:layout_width="@dimen/_24sdp"             android:layout_height="@dimen/_24sdp"             android:background="@drawable/ic_upload_download"             android:minHeight="0dp"             android:paddingTop="@dimen/_6sdp"             android:paddingBottom="@dimen/_6sdp"             android:textSize="@dimen/_13sdp"             app:layout_constraintBottom_toBottomOf="parent"             app:layout_constraintEnd_toEndOf="parent"             app:layout_constraintStart_toStartOf="parent"             app:layout_constraintTop_toTopOf="parent" />     </androidx.constraintlayout.widget.ConstraintLayout> </androidx.constraintlayout.widget.ConstraintLayout> 

So far so good. Let's have a look at the result