Android RecyclerView below Toolbar

Question

I have a custom RecyclerView and a toolbar which hide when scrolling down and appears when scrolling up. I have a problem about the position of RecyclerView, it is below the Toolbar, I use the behaviour but it seems not working.

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

    <android.support.v7.widget.RecyclerView 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.design.widget.AppBarLayout
        android:id="@+id/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:layout_scrollFlags="scroll|enterAlways" />

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

why do you have both RecyclerView and ViewPager layout_width and layout_height as "match_parent" ? — Kise, Jul 09 '15 at 02:48
Are you looking for a collapsing toolbar layout? where the toolbar expands to fit a header and then collapses into the toolbar? If you are not needing the collapsing toolbar layout you probably do not need the AppBarLayout. If you just want to hide and show the toolbar you can do that with a simple OnScrollListener. — doubleA, Jul 09 '15 at 03:12

Kise · Accepted Answer · 2020-03-27T02:23:30.983

60

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"
android:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<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.AppBarLayout
    android:id="@+id/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:layout_scrollFlags="scroll|enterAlways" />

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

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

I have removed the ViewPager and added scrolling behavior to RecyclerView

edited Mar 27 '20 at 02:23

answered Jul 09 '15 at 02:55

Kise

2,823
1
24
43

That's working but there is another problem. If I scroll down and go in another app when the bar is hidden when I open again my app the toolbar will be white without everything. – user4789408 Jul 09 '15 at 03:15
It worked! But there is a line which I can see. How does it do the trick and how can I solve in a better way? – user4789408 Jul 09 '15 at 03:20
@SamikBandyopadhyay what's the problem? – Kise Feb 29 '16 at 07:05
AppBarLayout & Toolbar inside the RecyclerView? – Langusten Gustel Apr 01 '16 at 07:59
@LangustenGustel They are below the `RecyclerView` (in the xml above, in actual layout the toolbar is still placed at the top). Take a closer look. – Kise Apr 02 '16 at 07:09
I went with adding `app:layout_behavior="@string/appbar_scrolling_view_behavior"` to the RecyclerView and also to the FrameLayout that is directly under the CoordinatorLayout. In my case, without this attribute, the framelayout starts directly behind the toolbar and so it appears that the recycler view is the one with the problem. – praneetloke Apr 23 '16 at 04:34
Can you add an explanation to this? To the inexperienced user, this just looks like another code block to copy into their application (google "Cargo Cult Programming"). – S.S. Anne Aug 30 '19 at 20:35
1

@JL2210 The last line basically described what I did with OP's code. They had an useless `ViewPager` in their layout so firstly I removed it (because you can't have both `RecyclerView` and `ViewPager` fill the entire screen - only one allowed - and OP was asking about `RecyclerView`). Next thing I did was adding a property `app:layout_behavior` to the `RecyclerView` which basically made the `Toolbar` aware of whether the `RecyclerView` is being scrolled up or down, so it could show and hide itself accordingly. – Kise Aug 31 '19 at 03:12

Aniruddha K.M · Answer 2 · 2018-09-26T04:50:50.663

49

If Adding a scrolling behavior does not fix your issue

app:layout_behavior="@string/appbar_scrolling_view_behavior"

THEN TRY THIS

I had to give padding to recyclerview which is equivalent to the toolbar/actionbar(app bar) height.

  android:paddingTop="?attr/actionBarSize"

add the above line to the recyclerview xml file

edited Sep 26 '18 at 04:50

answered Oct 12 '15 at 11:09

Aniruddha K.M

7,361
3
43
52

3

This trick works but while the scroll view scrolls and the appbar layout gets hidden then the padding looks odd. – Samik Bandyopadhyay Jan 29 '16 at 03:59
could you provide more detail as i didnt face this issue, screen shot would be ideal – Aniruddha K.M Jan 29 '16 at 05:12
1

The best answer so far. – Marlon Jun 09 '16 at 12:16
Thank you @Marlon glad it helped you – Aniruddha K.M Jun 10 '16 at 01:29
2

@SamikBandyopadhyay: maybe add `android:clipToPadding="false"`? – Benoit Duffez Sep 23 '16 at 13:31
This trick will work for fixed toolbar but won't work with collapsible toolbar – Arhat Baid May 09 '17 at 10:20
Adding padding is akin to adding `if (xx != null) { xx.doSomething(); }` if the call to `xx.doSomething()` thew an NPE in production and you don’t know what the problem is, so instead you make it go away with a null check. Adding padding is hiding the problem or… more metaphorically speaking: dragging the problem down :) – Martin Marconcini May 31 '18 at 22:38
@MartinMarconcini so what's the solution you have in mind – Aniruddha K.M Jun 01 '18 at 04:52
1

@war_Hero specify the correct layout behavior, as seen https://stackoverflow.com/a/38038536/2684 if that doesn’t work, there is a _different_ problem with the layout (or a bug in the framework, but I can assure you this works, because I’ve extensively used CoordinatorLayout & friends and have seen this issue every time I forget to add `app:layout_behavior="@string/appbar_scrolling_view_behavior”` to the offending widget). – Martin Marconcini Jun 01 '18 at 17:57

score 15 · Answer 3 · answered Aug 12 '16 at 18:07

When I have included RecyclerView from another layout the same problem occurred. I added this following line on recyclerview and the problem no longer persists.

    app:layout_behavior="@string/appbar_scrolling_view_behavior"

Missing this above line will make this problem.

score 7 · Answer 4 · answered Jun 26 '16 at 12:29

7

You need to add this attribute to your RecyclerView:

    app:layout_behavior="@string/appbar_scrolling_view_behavior"

i.e.:

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

answered Jun 26 '16 at 12:29

ramon

830
1
12
12

3

If you use `FrameLayout` as a container in the main layout and there is a separate layout which includes `RecyclerView` - in this case, you should add `app:layout_behavior=` to the `FrameLayout` in the main layout! – Tanasis May 14 '19 at 20:38

score 3 · Answer 5 · answered Dec 05 '19 at 17:55

3

trying adding this line in the ReyclerView

  android:layout_marginTop="?attr/actionBarSize"

answered Dec 05 '19 at 17:55

sameer

443
4
9

Android RecyclerView below Toolbar

5 Answers5

Linked

Related