Fix bottom bar in CoordinatorLayout
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.
Solution 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>
Solution 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