Lollipop toolbar for Android: how to hide / show toolbar when scrolling?

Question

I am using the new toolbar widget introduced in appcompat / support-v7. I would like to hide / show the toolbar depending on whether the user scrolls up / down the page, as in the new Google playstore application or in the NewsStand application. Is there something built into the toolbar widget for this, or should I use it in combination with FrameLayout and ObservableScrollView?

Answer 1

As far as I know, there is nothing that will do it for you. However, you can see the source code for Google IO, especially BaseActivity . Search for "auto hide" or look onMainContentScrolled

To hide the Toolbar , you can simply 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(); 

Answer 2

To hide the toolbar, you can simply:

 getSupportActionBar().hide(); 

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

Answer 3

Hide

 getSupportActionBar().hide(); 

Show:

 getSupportActionBar().show(); 

Answer 4

The answer is simple. Just implement OnScrollListener and OnScrollListener / show your toolbar in the listener. For example, if you have listview / recyclerview / gridview, 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 we implement 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 an idea: stack overflow

Answer 5

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

Take a look. http://android-developers.blogspot.kr/2015/05/android-design-support-library.html

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

Answer 6

There are actually quite a few ways to hide / show the toolbar when scrolling through the contents. One way is to do this through the Android Design Support Library, or rather, the location of the coordinator. heavy duty frame layout.

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

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

I really made a video to explain how this can be done step by step. Feel free to check this out and let me know if that helps. Thank you :)

https://youtu.be/mEGEVeZK7Nw

Answer 7

I am trying to implement the same behavior, here is the main feature of the code that shows and hides the toolbar (placed in any 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 turned on the dp function to convert from pixels to dp, but obviously set it depending on the height of your toolbar. (replace dp (48) with your toolbar height)

Wherever you set up RecyclerView, enable this:

 yourListView.setOnScrollListener(onScrollListenerToolbarHide); 

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

I had to set the marginTop of the first element in the adapter for the RecyclerView to the height of the toolbar plus the original offset. (A bit about the hack I know). The reason for this is because I found that if I changed my code above by enabling marginTop in recyclerView when scrolling, it was inconvenient. So, how I overcame it. So, basically tweak your layout so that the toolbar floats on top of the RecyclerView (crop it). Something like this (in the onBindViewHolder of your RecyclerView custom adapter):

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

And finally, since there is a large bias, the RecyclerViews update circle will be cropped, so you will need to compensate for it (back to the onCreate of your class containing RecyclerView):

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

Hope this helps someone. His first detailed answer, so I hope I was detailed enough.

Answer 8

To hide the menu for a specific fragment:

  setHasOptionsMenu(true); //Inside of onCreate in FRAGMENT: @Override public void onPrepareOptionsMenu(Menu menu) { menu.findItem(R.id.action_search).setVisible(false); } 

Answer 9

Just add this property inside your toolbar and do

 app:layout_scrollFlags="scroll|enterAlways" 

Not surprising

Answer 10

I ran a utility class to animate the entire mask / show Toolbar while 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/ . The source code is here https://github.com/rylexr/android-show-hide-toolbar .

Answer 11

Here you can download the full source code library and demo for scrolling toolbars or any type of header:

https://github.com/JohannBlake/JBHeaderScroll

Headings can be toolbars, LinearLayouts, RelativeLayouts, or any view you use to create a heading.

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

Nested headers are even supported there.

This is a really complex commitment to synchronize the headings (toolbars) and scrollable content in the same way as Google Newsstand did.

This library does not require any type of onScrollListener to be implemented.

The solutions listed above by others are only half-baked solutions that do not take into account that the top edge of the scrollable content area below the toolbar must first be aligned with the bottom edge of the toolbar, and then, when scrolling, the content area should be changed and possibly changed . JBHeaderScroll handles all of these problems.

Answer 12

There is an Android library called Android Design Support Library, which is a handy library where you can find all the materials that come up with the material design presented in the material documentation without telling you how to do it.

This is well presented in this Android blog post . In particular, the Collapsing Toolbar is what you are looking for.

Answer 13

The toolbar in the Material Design API is similar to any other VIEW used in Android ...

try using:

 toolbar.setVisibility(View.GONE); 

it worked for me

I haven't animated it yet, hiding the process. Well, I think this can be done with an instance of Animator, just like animating a simple View