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

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 4

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 5

将一个布局名称设置为toolbar.xml并将其包含在您要使用的代码中，但提醒一件事请不要使用其他任何布局，如Relativelayout，Linearlayout和其他布局

Answer 6

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