Category: Development

Google Play Music app (GPM) is one of the best visually designed applications in Android’s ecosystem. It’s simple and clean. There are nice animations, transitions, beautiful use of colors/palettes, but most importantly, it follows Material Design spec almost perfectly. It’s a pleasure for your eyes and it offers a really enjoyable user experience.

While working on a personal Android project I wanted to give my app a nice “hide/show Toolbar while scrolling content” feature. After some research and playing with lots of samples found on the Internet, I realize none of them were as visually appealing as the GPM app. Some of them are nice, others not. But none of them follows the same approach.

I finally gave up with the samples and started playing a lot with the GPM app Toolbar. Tons of scrolling ups and downs to figure it out the exact same behavior.

Android Google Music app

I made a sample app that hides/shows the Toolbar in the exact same way as the GPM app does. Believe me, it was really tricky. To understand why, first let’s see GPM app in action:

Scrolling up

As you can see the Toolbar starts at the top with no shadow. If you scroll the content up without releasing your finger, the Toolbar gets scrolled up too. However, if you release your finger a little shadow appears and the “show” animation takes place.

If you continue scrolling up, Toolbar will eventually hide but this happens only when the amount of scrolled pixels is equals to its size. If you continue scrolling up Toolbar will not appear again.

Scrolling down

If you change the direction of the scrolling without releasing your finger you’ll see the Toolbar scrolls down with the content but if you release your finger and the amount of visible pixels of the Toolbar is greater than half its size, it will show again. However, if the amount is less than that, it will hide.

Shadow

One last interesting thing is Toolbar’s shadow. It appears only when there is content scrolled behind it but if you reach the top of your content when scrolling down or if the Toolbar is completely hidden, it will disappear.

At first glance seems pretty straightforward, the reality is that replicating its behavior exactly as in GPM was challenging.

Sample app

Now that we know how it behaves, let’s see the sample app in action.

Pretty cool ah? It has the exact same behavior as in GPM app. So here is how I implemented it.

First you need a Toolbar widget in your layout. Make sure you place the Toolbar on top of your container otherwise you will end up having some weird artifacts when touching option items in the Toolbar.

Then you need to listen for scrolling changes in your container. For my sample app I used a RecyclerView but you can use whatever scrolling container you want as long as you can listen for scrolling changes. Here is a snippet code of MainActivity.java class depicting the listener:

Don’t feel intimidated by this code. Basically, we need two variables: verticalOffset to keep track of the overall scrolled vertical space, and scrollingUp to keep track of the scrolling direction. These belongs to a new instance of an inner class RecyclerView.OnScrollListener that listen for scrolling changes on the Recycler and calculate the appropriate hide/show behavior on the Toolbar.

Threshold

As you can see in the code, I’m using a threshold of 60% visible before hiding the Toolbar but feel free to adjust it to whatever suits your needs.

Hide/Show animation

The basic idea behind a nice smooth animation is to detect when the scrolling action is idle to perform the hide/show transition, and calculate Toolbar’s Y-axis offset when is not. Once we do the calculations we can call to one of the helper methods to perform the animation:

The method View.setElevation(float) that makes the little nice shadow appear below the Toolbar, works only on Android Lollipop and newer devices. That means we need to make sure not to call this method on devices running older versions of Android.

With everything in place, we are now ready to enjoy a pretty neat “show/hide Toolbar animation when scrolling” in our apps.

Code

You can find the full source code described here in my Github repo. Feel free to leave any feedback or questions in the comments below.