android lollipop toolbar: how to hide/show the toolbar while scrolling?

Question

I'm using the new toolbar widget introduced in the appcompat / support-v7. I would like to hide/show the toolbar depending on if the user is scrolling up/down the page, just like in the new Google's playstore app or NewsStand app. Is there something built into the toolbar widget for this or should I be using it in conjunction with FrameLayout and ObservableScrollView?

Did my answer help? If so, please accept it, or ask what is missing. — Kuno, Oct 26 '14 at 11:42
haven't tried that yet. Will definitely get back. Also looking for thoughts from others.. — nomongo, Oct 26 '14 at 15:19

Kuno · Answer 1 · 2015-03-16T12:00:46.973

80

As far as I know there is nothing build in that does this for you. However you could have a look at the Google IO sourcecode, especially the BaseActivity. Search for "auto hide" or look at onMainContentScrolled

In order to hide the Toolbar your can just do something like this:

toolbar.animate().translationY(-toolbar.getBottom()).setInterpolator(new AccelerateInterpolator()).start();

If you want to show it again you call:

toolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator()).start();

edited Mar 16 '15 at 12:00

answered Oct 24 '14 at 12:06

Kuno

3,492
2
28
44

1

In onCreate your toolbar is not layed out yet. That's why getBottom returns 0 so there is no distance to animate. Add an OnGlobalLayoutListener to your toolbars ViewTreeObserver and start the animation in the callback. Don't forget to remove the OnGlobalLayoutListener afterwards. – Kuno Nov 17 '14 at 10:54
I am not familiar with OnGlobalLayoutListener. Can u give me some code ? – AruLNadhaN Nov 17 '14 at 16:41
I tried it.The toolbar is not hiding.It changes its color to the background color.While scrolling it looks weird! – AruLNadhaN Nov 19 '14 at 01:51
works, but requires API 16, any way we can make this work on API 9? – SavageKing Dec 04 '14 at 14:19
1

If i am not mistaken, it requires API 12. For compatibility with lower API levels, use http://nineoldandroids.com/ – Kuno Dec 04 '14 at 14:24
Thanks for the quick reply but i don't know why it is not working perfectly. Following is my code. Actually sometimes i have to click multiple times to hide/show the toolbar. `@Override public boolean dispatchTouchEvent(MotionEvent ev) { if (mIsShowing) { hideToolBar(); mIsShowing = false; } else { showToolBar(); mIsShowing = true; } return super.dispatchTouchEvent(ev); } private void hideToolBar() { mToolBar.animate().translationY(-mToolBar.getBottom()) .setInterpolator(new AccelerateInterpolator()).start(); } ` – Shajeel Afzal Mar 16 '15 at 12:19
and to show the animation: `private void showToolBar() { mToolBar.animate().translationY(0) .setInterpolator(new DecelerateInterpolator()).start(); } ` – Shajeel Afzal Mar 16 '15 at 12:20
When do you want the toolbar to hide/show? Almost certainly dispatchTouchEvent is not the right place for this. – Kuno Mar 16 '15 at 13:00
@Kuno This takes care of animating the toolbar, but the views below it do not animate as well to fill in the space. I would think that the layout_below property of my RelativeLayout would be preserved, but this is not the case. Any idea how to handle this? – Mike Ortiz May 10 '16 at 03:30
Interesting solution but it is not working, the CONTENT inside the toolbar is animated but the VIEW itself is still in position. – Lampione Dec 11 '16 at 12:01

Philippe · Answer 2 · 2015-02-24T14:52:34.543

42

For hiding the toolbar you can just do :

getSupportActionBar().hide();

So you just have to had a scroll listener and hide the toolbar when the user scroll !

edited Feb 24 '15 at 14:52

answered Feb 16 '15 at 02:41

Philippe

1,567
16
18

Good solution, still not providing an animation though. That's strange because other Material Design fundamental views (as FAB) provide an animation when showing/hiding – Lampione Dec 11 '16 at 12:03

score 27 · Answer 3 · answered May 02 '16 at 02:14

27

Hide:

getSupportActionBar().hide();

Show:

getSupportActionBar().show();

answered May 02 '16 at 02:14

Andrew

36,676
11
141
113

score 16 · Answer 4 · edited May 23 '17 at 10:31

The answer is straightforward. Just implement OnScrollListenerand hide/show your toolbar in the listener. For example, if you have listview/recyclerview/gridview, then follow the example.

In your MainActivity Oncreate method, initialize the toolbar.

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        if (toolbar != null) {
            setSupportActionBar(toolbar);
            getSupportActionBar().setDisplayShowHomeEnabled(true);
        }
}

And then implement the OnScrollListener

public RecyclerView.OnScrollListener onScrollListener = new RecyclerView.OnScrollListener() {
        boolean hideToolBar = false;
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);
            if (hideToolBar) {
                ((ActionBarActivity)getActivity()).getSupportActionBar().hide();
            } else {
                ((ActionBarActivity)getActivity()).getSupportActionBar().show();
            }
        }

        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);
            if (dy > 20) {
                hideToolBar = true;

            } else if (dy < -5) {
                hideToolBar = false;
            }
        }
    };

I got the idea from: https://stackoverflow.com/a/27063901/1079773

Add the animation part too, this would be a really perfect answer. — Jaydev, Mar 14 '17 at 07:55

hoi · Answer 5 · 2016-02-17T03:13:51.280

8

Android Design Support Library can be used to show/hide toolbar.

See this. http://android-developers.blogspot.kr/2015/05/android-design-support-library.html

And there are detail samples here. http://inthecheesefactory.com/blog/android-design-support-library-codelab/en

edited Feb 17 '16 at 03:13

answered Jul 14 '15 at 08:12

hoi

2,168
20
22

Thanks for pointing the "inthecheesefactory" site! This is a great site with useful informations! – Filipe Brito Mar 19 '16 at 14:29

score 2 · Answer 6 · answered Dec 27 '16 at 06:01

There are actually quite a number of ways to hide/show the toolbar while you are scrolling the content. One of the ways is to do it via the Android Design Support Library or more specifically the Coordinator layout aka. super-powered frame layout.

Basically all you need to do is to have the following structure in your layout file and you should be able to achieve the result that you want.

<CoordinatorLayout>
   <AppBarLayout>
   </AppBarLayout>
   <NestedScrollView>
   </NestedScrollView>
</CoordinatorLayout>

I have actually made a video to explain how it can be done in a step by step manner. Feel free to check it out and let me know if it helps. Thanks! :)

https://youtu.be/mEGEVeZK7Nw

score 2 · Answer 7 · edited Feb 12 '17 at 13:31

2

Just add this property inside your toolbar and its done

app:layout_scrollFlags="scroll|enterAlways"

Isn't is awesome

edited Feb 12 '17 at 13:31

pacholik

8,607
9
43
55

answered Feb 12 '17 at 13:13

Rishab Surana

1,977
1
11
20

great but not use it for me , this code auto hide both toolbar and tabLayout – AbolfazlSalmani Jul 10 '18 at 06:12

Timwillhack · Answer 8 · 2015-02-22T18:44:55.300

I've been trying to implement the same behavior, here is the brunt of code showing and hiding the toolbar (put in whatever class containing your RecyclerView):

int toolbarMarginOffset = 0

private int dp(int inPixels){
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, inPixels, getApplicationContext().getResources().getDisplayMetrics());
}

public RecyclerView.OnScrollListener onScrollListenerToolbarHide = new RecyclerView.OnScrollListener() {
    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        toolbarMarginOffset += dy;
        if(toolbarMarginOffset>dp(48)){
            toolbarMarginOffset = dp(48);
        }
        if(toolbarMarginOffset<0){
            toolbarMarginOffset = 0;
        }
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams)toolbar.getLayoutParams();
        params.topMargin = -1*toolbarMarginOffset; 
        toolbar.setLayoutParams(params);
    }
};

I've included the dp function to convert from pixels to dp but obviously set it to whatever your toolbar height is. (replace dp(48) with your toolbar height)

Where-ever you setup your RecyclerView include this:

yourListView.setOnScrollListener(onScrollListenerToolbarHide);

However, there are a couple additional issues if you are also using a SwipeRefreshLayout.

I've had to set the marginTop of the first element in the adapter for the RecyclerView to the Toolbar's height plus original offset. (A bit of a hack I know). The reason for this is I found that if I changed my above code to include changing the marginTop of the recyclerView while scrolling it was a jittery experience. So that's how I overcame it. So basically setup your layout so that your toolbar is floating on top of the RecyclerView (clipping it) Something like this (in onBindViewHolder of your custom RecyclerView adapter) :

 if(position==0){
     ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams)holder.card.getLayoutParams();
     // params.height = ViewGroup.LayoutParams.WRAP_CONTENT;
     params.topMargin = dp(10+48);
 }

And lastly, since there is a large offset the RecyclerViews refresh circle will be clipped, so you'll need to offset it (back in onCreate of your class holding your RecyclerView):

swipeLayout.setProgressViewOffset(true,dp(48),dp(96));

I hope this helps someone. Its my first detailed answer so I hope I was detailed enough.

It causes the screen to flicker when you scroll slowly, doesn't look good. — Golan Shay, Apr 15 '15 at 11:58

score 1 · Answer 9 · answered Jan 07 '16 at 08:47

1

To hide the menu for a particular fragment:

 setHasOptionsMenu(true); //Inside of onCreate in FRAGMENT:  


   @Override
   public void onPrepareOptionsMenu(Menu menu) {
       menu.findItem(R.id.action_search).setVisible(false);
   }

answered Jan 07 '16 at 08:47

Parama Sudha

2,583
3
29
48

score 0 · Answer 10 · answered Jun 14 '15 at 01:19

I implemented a utility class to do the whole hide/show Toolbar animation when scrolling. You can see the article here http://rylexr.tinbytes.com/2015/04/27/how-to-hideshow-android-toolbar-when-scrolling-google-play-musics-behavior/. Source code is here https://github.com/rylexr/android-show-hide-toolbar.

Johann · Answer 11 · 2015-06-21T08:03:22.510

A library and demo with the complete source code for scrolling toolbars or any type of header can be downloaded here:

https://github.com/JohannBlake/JBHeaderScroll

Headers can be Toolbars, LinearLayouts, RelativeLayouts, or whatever type of view you use to create a header.

The scrollable area can be any type of scroll content including ListView, ScrollView, WebView, RecyclerView, RelativeLayout, LinearLayout or whatever you want.

There's even support for nested headers.

It is indeed a complex undertaking to synchronize headers (toolbars) and scrollable content the way it's done in Google Newsstand.

This library doesn't require implementing any kind of onScrollListener.

The solutions listed above by others are only half baked solutions that don't take into consideration that the top edge of the scrollable content area beneath the toolbar has to initially be aligned to the bottom edge of the toolbar and then during scrolling the content area needs to be repositioned and possibly resized. The JBHeaderScroll handles all these issues.

score 0 · Answer 12 · answered Aug 27 '15 at 16:11

There is an Android library called Android Design Support Library that's a handy library where you can find of all of those Material fancy design things that the Material documentation presents without telling you how to do them.

It's well presented in this Android Blog post. The "Collapsing Toolbar" in particular is what you're looking for.

android lollipop toolbar: how to hide/show the toolbar while scrolling?

12 Answers12

Linked