How to hide ActionBar while scrolling ListView in android?

Question

I need to create a GUI with a ListView and an ActionBar which will hide when scrolling down and when scrolling up it must reappear.

The following guides didn't help me:

I need something like this:

enter image description here

possible duplicate of [Hiding the ActionBar on RecyclerView/ListView onScroll](http://stackoverflow.com/questions/13559275/hiding-the-actionbar-on-recyclerview-listview-onscroll) — Kuba Spatny, Jul 08 '15 at 10:57
@KubaSpatny I'm trying to implement but your code doesn't work for me. It isn't a duplicate. The previous post doesn't work — user4789408, Jul 08 '15 at 11:04
@KubaSpatny What you linked is wrong, if I extend AppCompatActivity it doesn't allow me to Override methods onScrollStateChanged and onScroll. If I extend Activity I can't use "getSupportActionBar" — user4789408, Jul 08 '15 at 11:18

score 33 · Accepted Answer · edited May 23 '17 at 12:17

33

If you would like to obtain a list with this behaviour, you should:

add the design support library with compile 'com.android.support:design:22.2.0'
Use a CoordinatorLayout with a Toolbar where you have to define app:layout_scrollFlags="scroll|enterAlways"
Use a RecyclerView instead of a ListView. As described here ListView and the GridView have the expected behavior with the CoordinatorLayout only with API>21. In this case you have to use setNestedScrollingEnabled(true);

The official blog post shows this case:

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

     <! -- Your Scrollable View -->
    <android.support.v7.widget.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:layout_width="match_parent"
            android:layout_height="wrap_content">
          <android.support.v7.widget.Toolbar
                  ...
                  app:layout_scrollFlags="scroll|enterAlways">


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

edited May 23 '17 at 12:17

Community

1
1

answered Jul 08 '15 at 11:32

Gabriele Mariotti

192,671
57
469
489

1

Could I change the collapsing speed? – user4789408 Jul 08 '15 at 23:50
1

I think that the only way is to use a custom Behavior – Gabriele Mariotti Jul 09 '15 at 07:16
There is another problem. When the toolbar is hidden and I left the app, open another app, open the app again, the toolbar became without everything, just a rectangle with a color. – user4789408 Jul 09 '15 at 09:29
@GabrieleMariotti Is it possible to achieve the same behaviour with ListView? with RecyclerView it works fine. But I'm using `ExpandableListView` where I need the same behaviour. Is it possible? – Sarath Kn Jan 17 '17 at 09:49
Currently the `ListView` and the `GridView` have the expected behavior with the `CoordinatorLayout` only with API>21. Check this link: http://stackoverflow.com/a/30885092/2016562. – Gabriele Mariotti Jan 17 '17 at 09:58
How do you make this compatible with API 18-21? – Shn_Android_Dev Apr 28 '20 at 00:55

score 10 · Answer 2 · answered Jul 08 '15 at 10:46

I would recommend using the new support design library by Google.

Include it in your dependecies:

compile 'com.android.support:design:22.2.0'

and then use the AppBarLayout together with NestedScrollView.

For your Toolbar define app:layout_scrollFlags="scroll|enterAlways", which says it will disappear as you scroll, and come back immediately if you scroll up (meaning you don't have to scroll all the way up).

<android.support.design.widget.AppBarLayout
    android:id="@+id/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/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways" />

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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="fill_vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

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

@maveň I actually don't think this question is that bad. It may be a duplicate though, but considering the new library I though of giving an easier answer. — Kuba Spatny, Jul 08 '15 at 10:52
It doesn't work, I can only move the actionbar and the listview is stuck — user4789408, Jul 08 '15 at 11:29
@user4789408 there might be a problem in using `ListView` with API lower than 21. Instead use the `RecyclerView`. — Kuba Spatny, Jul 08 '15 at 12:33

Annada · Answer 3 · 2016-07-21T09:54:35.457

Use [CoordinatorLayout]:https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html, which allow co-oridanation among child views. it's like, act(AppBarLayout->scrolling) on some view when there is a behaviour observed(ListView->scroll) in another view.

Make Listview nestedScrollingEnabled, works for >API 21
```
android:nestedScrollingEnabled="true"
```

Trigger layout behaviour to appbar scrolling.

android:nestedScrollingEnabled="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior"

Any layout(ToolBar/TabLayout/any), which is required to show-hide/scroll, place it inside AppBarLayout, and enabled scroll flag.
```
app:layout_scrollFlags="scroll|enterAlways"
```

Blackbelt · Answer 4 · 2015-07-08T10:53:17.883

2

you should use CoordinatorLayout for this task. It is part of the support design library. Here, in the CoordinatorLayout and the app bar section, you can find an example

edited Jul 08 '15 at 10:53

answered Jul 08 '15 at 10:48

Blackbelt

148,780
26
271
285

How to hide ActionBar while scrolling ListView in android?

4 Answers4

Linked