Hiding Toolbar on scroll with recyclerview inside fragment

Question

I'm trying to get the toolbar to collapse on scroll when a recyclerview inside a fragment is scrolled. To start, heres my main layout:

<DrawerLayout>

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

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

            <android.support.design.widget.AppBarLayout
                android:id="@+id/appBarLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                >

                <Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:elevation="5dp"
                    app:layout_scrollFlags="scroll|enterAlways"
                    >

                </Toolbar>

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

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

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

    </RelativeLayout>

<!-- ignore -->
<drawercontents>
</DrawerLayout>

So as you can probably guess my fragments are being loaded into @id/container. My first fragment contains the recyclerview, and I set app:layout_behavior="@string/appbar_scrolling_view_behavior" on that recyclerview. This does work, and the toolbar collapses on scroll. The issue is the toolbar covers the top contents of the fragment when its not collapsed. Adding a top margin to the fragment container equal to the size of the toolbar just causes a blank space to be left when the toolbar collapses (obviously).

Whats missing here? Any ideas?

EDIT: As requested, here is the layout for the fragment containing the recyclerview:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    android:id="@+id/feed"
    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:background="#00000000"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

Answer 1

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/tabanim_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Answer 2

Haven't tested this yet, but this is what you must do:

• Move the app:layout_behavior="@string/appbar_scrolling_view_behavior" to the FrameLayout with id container.
• Add android:fitsSystemWindows = "true" to your AppBarLayout.

This is exactly what I'm doing in my app, and it works. If this doesn't work for you, try cleaning (on Android Studio, Build -> Clean Project) your project and running the app again.

Answer 3

You can fix this by adding a third flag - snap, to layout_scrollFlags property.

<Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="5dp"
    app:layout_scrollFlags="scroll|enterAlways|snap" />

Using this option will determine what to do when a view only has been partially reduced. If scrolling ends and the view size has been reduced to less than 50% of its original, then this view to return to its original size. If the size is greater than 50% of its sized, it will disappear completely.

check this link.

Answer 4

My friend i did this today and working perfect, i have 2 fragments both have RecyclerView and can scroll Toolbar. I looked chrisbanes's CheeseSquare : CheeseSquare

If you take a look at MainActivity, there is 3 fragments in TabLayout and all of them can scroll Toolbar. So i prepared this layout , maybe you will take a look at:

my activity_home.xml :

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <include layout="@layout/content_home"/>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:layout_gravity="start"
        app:menu="@menu/homepage_leftdrawer">


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

</android.support.v4.widget.DrawerLayout>

And content_home.xml :

<?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/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme3.AppBarOverlay">

<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|snap" />


<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabTextColor="@color/Transparent_few_white"
    app:tabIndicatorColor="@color/White"
    app:tabTextAppearance="@style/TabLayoutTextStyle"
    app:tabIndicatorHeight="3dp"
    app:tabSelectedTextColor="@color/White"
    android:background="@color/ColorPrimary"
    app:tabPaddingStart="0dp"
    app:tabPaddingEnd="0dp"/>

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

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

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

Where is the key here :

If you take a look at my ViewPager , it has app:layout_behavior="@string/appbar_scrolling_view_behavior" attribute Then thats it. Dont add any other behavior in fragment . Just try like that and come with result please !

Answer 5

You need something similar to the play store app. Pasting the layouts here. The code for this is easy and you can code it by yourself.

1. FrameLayout
   • ImageView
   • ScrollView
     1. LinearLayout
     2. HorizontalScrollView
        • LinearLayout
   • ToolBar

With the above layout hierarchy you can achieve something like this:

Answer 6

Make one layout name as toolbar.xml and include it in your code where you want to use, but remind one thing please do not use any other layout like Relativelayout, Linearlayout and other on above of

Answer 7

I used a SwipeRefreshLayout or just a LinearLayout or RelativeLayout as the root of the Fragment's layout and it's working.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/swipe_refresh_layout_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/mycustomcolor"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.v4.widget.SwipeRefreshLayout>

With RelativeLayout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fragment2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view_android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true" 
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</RelativeLayout>

Then it should be good to go.

Answer 8

You can use Collapsing layout like

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/zxing_transparent"
            android:paddingBottom="2dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleGravity="bottom|center_horizontal"
            app:expandedTitleMarginBottom="50dip"
            app:collapsedTitleGravity="top|center_vertical"
            app:collapsedTitleTextAppearance="@style/collapseTitle">

            <Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:elevation="5dp"
                    app:layout_scrollFlags="scroll|enterAlways"
                    >
                </Toolbar>



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

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

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


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

Answer 9

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:contentScrim="?attr/colorPrimary"
        >
        <android.support.v7.widget.Toolbar
            android:id="@+id/appBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_collapseMode="pin" />

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_below="@+id/app_bar_layout"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:weightSum="1">
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent" 
            android:text="Your recycler view should go here"/>
        </FrameLayout>
</LinearLayout>

Answer 10

Also ran into this problem. But a solution was found. The solution with xml rework can not be, so you need to do it programmatically. All we need is Inflater. Yes, yes, that's so simple. On the fly change xml to work all scrolling.

Answer 11

in your framelayout set

android:layout_below="@+id/appBarLayout"

if that not work then try this:

android:layout_below="@+id/toolbar"