android lollipop toolbar: how to hide/show the too

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?

Answer 1

Toolbar in Material Design API is just like any other VIEW used in Android...

try using:

toolbar.setVisibility(View.GONE);

this worked for me

i haven't yet animated it's hiding process. Well i think that can be done using an Animator instance, just like animating a simple View

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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);
   }

Answer 6

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();