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

Let me check i got the same problem ... and i solved my own ...i need little time — saeed, Feb 22 '16 at 07:17
Have you tried asc42's solution (http://stackoverflow.com/a/37975782/1185087)? Moving the layout_behavior to the FrameLayout should fix the problem! — user1185087, Jun 23 '16 at 07:46

score 14 · Answer 1 · answered Jun 23 '16 at 15:10

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

Could I please ask what the contents of the variable "string/appbar_scrolling_view_behavior" are — iOSAndroidWindowsMobileAppsDev, Nov 23 '16 at 11:46
@iOSAndroidWindowsMobileAppsDev it's String constant representating "android.support.design.widget.AppBarLayout$ScrollingViewBehavior" — Martin, Jul 17 '18 at 09:20

score 6 · Answer 2 · answered Jun 23 '16 at 14:10

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.

score 5 · Answer 3 · answered Jun 22 '16 at 18:32

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.

score 4 · Answer 4 · answered Jun 22 '16 at 18:33

4

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

answered Jun 22 '16 at 18:33

patel135

927
13
19

score 3 · Answer 5 · answered Jun 16 '16 at 22:23

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 !

Can you try to add behavior to your recylerview – Yasin Kaçmaz Jun 17 '16 at 18:26 — Yasin Kaçmaz, Jun 17 '16 at 18:26

score 3 · Answer 6 · answered Jun 22 '16 at 17:09

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.

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

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

score 3 · Answer 7 · answered Jun 23 '16 at 09:43

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>

score 2 · Answer 8 · answered Feb 22 '16 at 22:08

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.

Arif Nouman Khan · Answer 9 · 2016-02-23T08:47:20.227

0

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

edited Feb 23 '16 at 08:47

answered Feb 22 '16 at 07:40

Arif Nouman Khan

367
1
12

This has nothing to do with this issue. – Orbit Feb 22 '16 at 07:41
sorry .. but you want collapsing toolbar if you study this piece of code you will have it ..if u dont want image view remove that ... this code working like whatsapp profile layout ... so u dont want image remove it ... just give it a try you will see its working – Arif Nouman Khan Feb 22 '16 at 07:53
now check it i removed imageview just use it in your code and kindly remove -1 vote – Arif Nouman Khan Feb 22 '16 at 07:57
Again, your answer has nothing to do with the stated issue. Please reread the original question. Feel free to delete this answer if you'd like. – Orbit Feb 22 '16 at 07:58
you want your toolbar to collapse ... so you have to put your toolbar in collapseable layout ... thats what you havent used in your piece of code .. you are talking about fragment recycler view that is fine ... when you run your code recycler view is now part of the main layout ..so if you use it like the way i told you you will get your desired collapsing effect on toolbar ..but the problem is either your dont know about this thing or you dont want to try :) try it plz i have tried it thats why i am providing you exact thing – Arif Nouman Khan Feb 22 '16 at 08:03
This does actually answer the question but in another way, and of course at some points the OP can use the codes but the issue is in the another thing – ʍѳђઽ૯ท Feb 22 '16 at 22:03
i have updated it see with image also ... frame layout was going under the toolbar ... but if you wrap it inside linear or relative layout .. it will perfectly align :) hope you are satisfied now – Arif Nouman Khan Feb 23 '16 at 08:49
the blue rectangle is your frame layout now you can put any thing in it :) if you agree accept it as answer – Arif Nouman Khan Feb 23 '16 at 08:50

score -1 · Answer 10 · answered Feb 22 '16 at 07:33

-1

in your framelayout set

android:layout_below="@+id/appBarLayout"

if that not work then try this:

android:layout_below="@+id/toolbar"

answered Feb 22 '16 at 07:33

Parsania Hardik

4,593
1
33
33

2

`android:layout_below` can be used with children of a `RelativeLayout`. A `CoordinatorLayout` is basically an advanced version of a `FrameLayout`, therefore this does nothing. – Orbit Feb 22 '16 at 07:42

Hiding Toolbar on scroll with recyclerview inside fragment

10 Answers10

Linked