material design - 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?




12 Answers: 

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

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 !

 

Hide:

getSupportActionBar().hide();

Show:

getSupportActionBar().show();
 

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:

 

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

 

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

 

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.

 

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

Just add this property inside your toolbar and its done

app:layout_scrollFlags="scroll|enterAlways"

Isn't is awesome

 

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.

 

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.

 

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.

 

More Articles


java - Android Adding Buttons to Toolbar Programmatically

I am trying to create a toolbar programmatically and Add Left and Right Bar Button to it without using XML.But the button is not getting aligned to right.So kindly help me.Toolbar TopTulBarVar = new Toolbar(this);TopTulBarVar.setId(View.generateViewId());TopTulBarVar.setBackgroundColor(Color.parseCo

mfc - How do I handle toolbar messages in a dialog box

I am writing a MFC MDI application, which I started with the wizard, with visual studio 2017. In this application I have dialog boxes with toolbars. But when the dialog boxes are shown, the toolbar buttons are not enabled, even though the dialog classes contain handlers for the button IDs.For instan

visual studio - C# Registerhotkey() won't read some keycodes

While trying to create an auto clicker application using a Visual Studio Windows Form that allows you to select the hotkey you want, I stumbled upon a problemWhen a user inputs keys such as ~ or / the hotkey won't work, However, if I put in 0xC0 (for tilde) or 0xDC (for slash) instead of (int)[tilde


mfc - How to make a floating CMFCToolbar nonmovable

First I make my CMFCToolbar permanent withm_wndMyToolBar.SetPermament(TRUE); // it removes the CLOSE Button Now, how can I achieve that the user can not move the permanent CMFCToolbar?I have tried to subclass the CMFCToolbar, but the ON_WM_MOUSEMOVE & ON_WM_NCMOUSEMOVE are never called inside t

java - I want to change the color of Toolbar of the application on scrolling

I have a toolbar that change color on scrolling basicly color is transparent and when scrolling it change color I want to set only one color instead of transparent and let one color be shownI have tried to change color on toolbar xml and display scroling in activitythis my toolbar.xml<?xml versio

wpf - Canvas control is not available in Windows form application?

WPF Canvas control is not available in Windows form application. Am using Visual Studio 2010. Framework 4.0. Is there way to add these controls to VS2010 toolbox?


android - How to get a progress bar under the ActionBar in Material Design?

The Material Design specifications for Progress and activity specifically show in several areas a horizontal progress indicator of only a few pixels (dips) thick below whatever it is we are calling the ActionBar these days (probably Toolbar).However, I don't see any way to actually implement that po

c# - WindowsForm app with wpf windows is not working on other computers

I'm new to WPF and c# programming,i have built a winform app with a database and some wpf forms.wpf forms contain some background images and componentone tab controls.To add wpf forms:i added a wpf user control and modified its code as a window.in that case i m unable to put background images from u

configuration - PhpStorm configure to work remotely

Hi is there a way for PhpStorm to work directly on a remote server? No local files. Because as of the moment PhpStorm has local files wherein it just automatically uploads all files during save on remote.My problem is if someone changes something remotely I need to manually download it first before

wpf - Adding NAudio controls to toolbox

I am trying to use the controls from NAudio library such as WaveViewer, VolumeMeter, VolumeSlider, Fader, WaveformPainter etc. I am using Visual Studio 2012 and have net 4.5 installed. I have also downloaded and referenced NAudio 1.7 and its .dll to my project. When I right click on toolbox and clic