Hide/Show Toolbar while Scrolling Recycler View

In this tutorial, you would learn how to hide and show toolbar automatically while scrolling up and down. One of the examples of this type of layout is shown above in the Google PlayStore app. The toolbar, which consists a search box gets hidden when we scroll up and automatically shows up when we scroll down.

It might seem to be a very difficult task at first, but trust me its very very easy. Just follow the steps below to achieve this.

STEP-1

Create a new Android project and navigate to styles.xml and paste the following code. Also, add the recycler view library in your app-level build.gradle file.

compile ‘com.android.support:design:25.0.0’

styles.xml

After that, go to your Android Manifest.xml file and the change in application theme from android:theme=”@style/AppTheme” to android:theme=”@style/AppTheme.NoActionBar” .

This is done to remove the default action bar provided by the AppTheme.

STEP-2

Navigate to activity_main.xml in res/layout directory and enter the following xml.

activity_main.xml

How does it work?

Normally, you would be using the Coordinator layout as the parent layout and toolbar and recylcer view as its child layout. For the scrolling effects to take place i.e if you want the toolbar to hide and show while scrolling, you need to wrap the toolbar inside a container called AppBarLayout.

Please note that AppBarLayout must be the direct child of Coordinator Layout according to official Google docs.

Then, we need to define an association between our AppBarLayout and view that will be scrolled i.e Recycler View (could be NestedScrollView, ListView etc. depending on what you use). This is done using a special string resource @string/appbar_scrolling_view_behavior present in the support library. You need to set this string in attribute app:layout_behaviour of the Recycler View. So when the recycler view scrolls, it notifies the AppBarLayout that the view has been scrolled which in turn triggers the event of showing or hiding the toolbar.

The attribute app:layout_scrollFlags must be set for any scroll effects to take into effect. This attribute has five flags. The scroll flag must always be enabled and used with other flag(s).

1. scroll : must always be enabled for any scroll effects to take place.

2. enterAlways: The view will become visible when scrolling up. This flag is useful in cases when scrolling from the bottom of a list and wanting to expose the Toolbar as soon as scrolling up takes place.

3. enterAlwaysCollapsed: Assuming enterAlways is declared and you have specified a minHeight, you can also specify enterAlwaysCollapsed. When this setting is used, your view will only appear at this minimum height. Only when scrolling reaches to the top will the view expand to its full height.

4. exitUntilCollapsed: When the scroll flag is set, scrolling down will normally cause the entire content to move.

5. snap: Using this option will determine what to do when a view only has been partially reduced. If scrolling ends and the view size has been reduced to less than 50% of its original, then this view to return to its original size. If the size is greater than 50% of its sized, it will disappear completely.

STEP-3

Go to MainActivity and initialize the toolbar and recycler view.

mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.setTitle("Hide/Show On Scroll");


mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mDataList = new ArrayList();
addDummmyData(mDataList);
mAdapter = new RecyclerViewAdapter(this, mDataList);
mRecyclerView.setAdapter(mAdapter);

addDummyData(mDataList) is a method which generates some dummy data and adds it to an arraylist.


private void addDummmyData(ArrayList mDataList) {
for (int i =0; i< 100; i++){ mDataList.add("Item "+ i); } }

STEP-4

Create the layout file for each list item in the recycler view and add the following code.

recylcerview_row.xml

STEP-5

Create a new Adapter Class called RecyclerViewAdapter and paste the following code. For simplicity, we will be showing only string in the recycler view.

FULL MAIN ACTIVITY CODE

RUNNING THE APP

Run the app and scroll the recycler view up and down to see the toolbar hide and show automatically.

DOWNLOAD FULL SOURCE CODE

Please comment below if you face any issues. Thank you for reading 🙂

admin Author

Leave a Reply

Your email address will not be published. Required fields are marked *