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.

Evildoer

Could you do me a favor and show us how you are hiding the bottom bar? I can't seem to figure it out ... (I don't need the top bar, just the bottom) – Plop

Hi Hanzo, Did you find a solution for this problem? – Adelladella

can you post your xml file that contains CoordinatorLayout – Hippomenes

Your bottom bar needs to be at the CoordinatorLayout level with a bottom gravity, else it will scroll with the rest of the content. – Squeteague

can't you just implement your fragment layout using a RecyclerView? – Serrate

hey give me code please i need this – Splay

i need This behaviour please help me ? – Splay

i remove weight from SwipeRefreshLayout . – Cutch

Answer 1

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

Screwy

Answer 2

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>

Canica

For future readers, RelativeLayout is heavily discouraged in modern Android apps – Microsporophyll

You know, CoordinatorLayout does not allow child to use gravity so it will not work – Couture

Answer 3

You can try and add the collapseMode on your toolbar something like this.

Your appBarLayout seems fine

I would advise u to look at this link: Handling Scrolls with CoordinatorLayout

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_blue_light"
        android:fitsSystemWindows="true"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            app:layout_collapseMode="pin"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@color/white"
          app:tabIndicatorHeight="@dimen/profile_tablayout_indicator_height"
            android:background="?attr/colorPrimary"
            app:tabGravity="fill"/>

    </android.support.design.widget.CollapsingToolbarLayout>

Postremogeniture

Answer 4

try this

    <?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:padding="15dp"
                app:cardBackgroundColor="@color/red"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:padding="15dp"
                app:cardBackgroundColor="@color/colorPrimary"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:padding="15dp"
                app:cardBackgroundColor="@color/red"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:padding="15dp"
                app:cardBackgroundColor="@color/colorPrimary"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:padding="15dp"
                app:cardBackgroundColor="@color/red"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:padding="15dp"
                app:cardBackgroundColor="@color/colorPrimary"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:padding="15dp"
                app:cardBackgroundColor="@color/red"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:padding="15dp"
                app:cardBackgroundColor="@color/colorPrimary"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:padding="15dp"
                app:cardBackgroundColor="@color/red"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:padding="15dp"
                app:cardBackgroundColor="@color/colorPrimary"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:padding="15dp"
                app:cardBackgroundColor="@color/red"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:padding="15dp"
                app:cardBackgroundColor="@color/colorPrimary"
                app:cardCornerRadius="4dp"
                app:cardElevation="2dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="Nilesh Rathod"
                    android:textColor="#ffFFff" />
            </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:id="@+id/bottomnav"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_weight="1"
            android:background="@color/green"
            android:foregroundGravity="bottom"
            app:itemIconTint="@color/lightWhite"
            app:itemTextColor="@color/lightWhite"
            app:menu="@menu/menu"/>
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Result

Deary

BottomNavigationView overlaps ScrollView. Expectable margin needed. – Gromme

Answer 5

This behavior basically removes scroll flag SCROLL from AppBarLayout, when scrolling content in dependent view (RecyclerView, NestedScrollView) is less than view height, ie. when scrolling is not needed. It also overrides offsetting scrolling view, which is normally done by AppBarLayout.ScrollingViewBehavior. Works well when adding footer, ie. button, to scrolling view or in ViewPager, where content length may be different in each page.

https://gist.github.com/MaciejKaras/02bff315f00b87d80467a470424f22c3

Answered already in https://stackoverflow.com/a/37293634

Kliber

Answer 6

To fix Bottom bar, firstly you have to use a Activity where tabs present. In that activity use different fragments. Add your tabLayout in this activity_main_tab.xml

activity_main_tab.xml

 <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:local="http://schemas.android.com/apk/res-auto"
        android:id="@+id/co_activity_root_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true">

            <android.support.design.widget.AppBarLayout
                local:theme="@style/Theme.AppBarOverlay"
                android:id="@+id/toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true">

            </android.support.design.widget.AppBarLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/toolbar_layout">

                <FrameLayout
                    android:id="@+id/fl_fragment_container"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                   />
            </RelativeLayout>
        </RelativeLayout>

    </android.support.design.widget.CoordinatorLayout>

For fragment view use

fragment_tab.xml

here use app:layout_scrollFlags="scroll|enterAlways" in toolbar to make it scrollable

 <?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"
        android:id="@+id/coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"/>

            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabIndicatorColor="@color/white"
                app:tabIndicatorHeight="@dimen/profile_tablayout_indicator_height"
                android:background="?attr/colorPrimary"
                app:tabGravity="fill"/>

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    </android.support.design.widget.CoordinatorLayout>

FragmentTabs.java

 public class FragmentTabs extends BaseFragment{

        private View rootView;
        private ViewPager viewPager;
        private TabLayout tabLayout;
        private Toolbar toolbar;
        private ViewPagerAdapter viewPagerAdapter;

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup viewGroupContainer, Bundle savedInstanceState) {
            rootViewSearch = inflater.inflate(R.layout.fragment_tab, viewGroupContainer, false);
            initializeLayout();
            setUpActionBar();
            setUpFragmentObjects();

            return rootView;
        }


        private void initializeLayout() {
            toolbar = (Toolbar) rootView.findViewById(R.id.toolbar);
            viewPager = (ViewPager) rootView.findViewById(R.id.viewpager);
            tabLayout = (TabLayout) rootView.findViewById(R.id.tablayout);
        }


        private void setUpActionBar() {
            getApplicationContext().setSupportActionBar(toolbarSearch);
            ActionBar actionBar = getApplicationContext().getSupportActionBar();
            if(actionBar != null){
                actionBar.setTitle(Constants.BLANK);
            }
        }


        private void setUpFragmentObjects() {
            viewPagerAdapter = new ViewPagerAdapter(getApplicationContext(), getChildFragmentManager());
            viewPager.setAdapter(searchViewPagerAdapter);
            tabLayout.setupWithViewPager(viewPager);
        }
    }

ViewPagerAdapter.java

public class ViewPagerAdapter extends FragmentPagerAdapter {

    public ViewPagerAdapter(Activity activity, FragmentManager fragmentManager) {
        super(fragmentManager);
    }


    @Override
    public Fragment getItem(int position) {
        Bundle bundle;
        switch (position) {
            case 0: // For Tab 1
               // use fragment for tab 1
                return fragment1;
            case 1: // For Tab 2
                // use fragment for tab 2
                return fragment2;
            case 2: // For Tab 3
                // use fragment for tab 3
                return fragment3;
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return 3; // no. of Tabs
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0: // Title For Tab1
                return "Tab1";
            case 1: // Title For Tab2
                return "Tab2";
            case 2: // Title For Tab3
                return "Tab3";
            default:
                return null;
        }
    }
}

Crownwork

Answer 7

I faced same problem Here is the way That worked for me

Remove the AppBarLayout layout_behavior so it fixed on top. Define the FrameLayout layout_behavior as app:layout_behavior="@string/appbar_scrolling_view_behavior" so it adjust FrameLayout below the AppBarLayout. In this way way your content of frame layout will scroll but not toolbar. CoordinatorLayout layout like as follows

<?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:fitsSystemWindows="true"
    tools:context="com.next_tech.teebox.GridView">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:titleTextColor="@android:color/white" />

    </android.support.design.widget.AppBarLayout>
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">


</FrameLayout>


</android.support.design.widget.CoordinatorLayout>

This is the XML of the your fragment Layout where your recyclerView scroll without affecting your TabLayout and bottom Linear 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/colorPrimary"
        app:tabMode="fixed"
        app:tabMaxWidth="0dp"
        android:elevation="4dp"
        app:tabIndicatorColor="@color/btnBackground"
        android:layout_height="?android:actionBarSize"
        />

    <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="?android:actionBarSize"
        android:orientation="horizontal"
        android:background="@color/colorPrimary"
        android:layout_gravity="bottom"
        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:layout_gravity="center"
            app:srcCompat="@android:drawable/ic_menu_delete" />
        <ImageView
            android:id="@+id/select"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            app:srcCompat="@drawable/white_arrow" />

        <ImageView
            android:id="@+id/send"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center"
            app:srcCompat="@drawable/ic_send_holo_dark" />

    </LinearLayout>

</LinearLayout>

I hope it helps someone thanks

for more info - Scrolling Behavior for Appbars in Android

Hippomenes

Answer 8

You cannot do this in coordinatorlayout. so use RelativeLayout and within its design your own layout

Outspan

Answer 9

2021 Update: Fixing BottomNavBar, with Toolbar hiding when scrolling.

In activity_main.xml We have 3 things -

1. Toolbar
2. FragmentContainerView
3. BottomNavigationView

Building on Rishabh Dhiman's solution https://mcmap.net/q/296074/-fix-bottom-bar-in-coordinatorlayout

<ConstraintLayout>
    <CoordinatorLayout>
        <AppBarLayout>
           <ToolBar>
        </AppBarLayout>
        <FragmentContainerView>
    </CoordinatorLayout>
    <BottomNavigationView>
</ConstraintLayout>

Here is an example, which works for me -

<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"
    tools:context=".MainActivity">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayoutMain"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways|snap" />

        </com.google.android.material.appbar.AppBarLayout>


        <androidx.fragment.app.FragmentContainerView
            android:id="@+id/nav_host_fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"

            android:layout_width="match_parent"
            android:layout_height="match_parent"

            app:defaultNavHost="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            app:navGraph="@navigation/nav_graph"

            tools:layout="@layout/fragment_home" />


    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

Note: This works well if Fragment in the FragmentContainerView is scrollable. Otherwise, the bottom of the fragment gets hidden behind the BottomNavigationView.

Evelyn

Not working for me. BottomNavigationView overlap content in FragmentContainerView and when I go to next pages, toolbar push content to bottom make them dissapear – Emogene

@Emogene - To fix the overlapping content issue, make changes to CoordinatorLayout. Set height and width to match constraints and add -app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView". Let me know if it works (y) – Evelyn

Nothing... I've been trying for 3 days to have a bottomnavigationview with a custom toolbar that can be hidden and I can't do it. Always overlaps above or below – Emogene

can you share your code? Would be able to help better... – Evelyn

#69513912 With your solution the bottomnavigationview overlaps my view. Moreover, if in a later fragment I put a button with 20 margin with respect to bottom, it is covered with the bottomnavigationview and when I hide the toolbar, there it is shown because the button goes up – Emogene