Michał Z.

How to hide/show Toolbar when list is scrolling (part 3)

2015-06-23T00:00:00+00:00

This is a third (and the really last) post of this series :) If you haven’t read part 1 or part 2 that’s ok because they are deprecated now. In previous parts I showed how to manually achieve hiding/showing Toolbar when list is scrolling. But now we have the Design Support Library and we don’t have to write it on our own! I will show how to use CoordinatorLayout and create a simple Behavior to hide/show Toolbar and FAB when list scrolls up/down. Many of you had a problem with tabs and lists that contain too few items to scroll. I’m happy to tell you that thanks to CoordinatorLayout all these problems are gone :) Let’s begin!

This is what we want to achieve:

Preparation

In order to use the new cool features that Design Support Library has to offer we need to modify our build.gradle file:

It’s just updated SDK, build tools and libraries to the newest version. And as you can see there is also a new one at the end compile 'com.android.support:design:22.2.0'.

Now we can create our PartThreeActivity and fill it with some data. Our demo will have 2 tabs with lists of items on each tab. So we’ll need a ViewPager which will be showing two Fragments. In our case both Fragments will display a list of items, so they will be the same. The only difference is that we will show 20 items on first page and only 5 items on second page. This is because I want to show you that even if list is too short to scroll we will be able to show/hide the Toolbar and FAB. So let’s start from creating a PartThreeFragment class. Here is it’s layout file:

Nothing special here, just a RecyclerView. Let’s jump to PartThreeFragment code:

It’s an ordinary Fragment so I won’t describe it. The only interesting part is that we can give it a number of items that our list will contain (look at createInstance(int itemsCount) and createItemList() methods). RecyclerAdapter and the layout of a single list item is exactly the same as we created in part 2.

So we have it, now we need to setup our PartThreeActivity. Let’s look at the layout file:

Let’s stop a little bit. There are a few new things in there. First is the CoordinatorLayout. It’s a new layout that let’s you create interactions between Views that you put inside it. As the documentation says it’s a FrameLayout on steroids. It intercepts touch events and let’s you inject your own [Behaviors]. We’ll see an example of this a little bit later. Next new thing is the [AppBarLayout]. It’s an enhanced version of Linearlayout that allows you to specify scrolling interactions. You can for example create a collapsing Toolbar effect or some other things with it. It’s as simple as puttng it into your layout and setting some attributes. But it’s designed to work in pair with CoordinatorLayout so if you use it in some other ViewGroup you will loose it’s functionality. The last new thing that you can see here is the TabLayout which i think is self-explanatory. It’s basically a new material version of tabs for Android. In our case we want to have the Tabs below the Toolbar so we wrap them in an AppBarLayout. The last part of our layout is a ViewPager. Let’s glue it all together using some Java code:

The only interesting fragment of this class is ViewPager and TabLayout initialization which you can see above. PagerAdapter is a simple implementation of FragmentPagerAdapter so I assume that you are familiar with it. In lines 4 and 5 we are adding two pages to our adapter. First page will contain our PartThreeFragment with 20 items and second page will contain the same Fragment but with only 5 items.

We can now compile it and see how it looks like:

It works but as you can see, the top of the list is not fully visible. It seems that it’s partially covered by our AppBarLayout. To fix this we need to add a Behavior to a ViewPager. It looks like this:

This string value points to android.support.design.widget.AppBarLayout$ScrollingViewBehavior so it’s a fully qualifed Behavior class name. It’s a static inner class inside AppBarLayout class. Behavior is a mechanism that let’s you specify interactions between the Views that you put inside a CoordinatorLayout. The CoordinatorLayout parses Behaviors and handles interactions between Views. Thanks to the fact that you can add it using xml attribute allows adding a Behavior to any View. This is a very powerful API and I really encourage you to play with it. In our case adding ScrollingViewBehavior to the ViewPager causes that it will be positioned correctly according to AppBarLayout and its position will be updated as AppBarLayout scrolls. The new Design Support Library source is not available yet but you can use Android Studio built in decompiler to see what exactly ScrollingViewBehavior is doing. If we run our app now we should see something like this:

It looks ok, so we can move on.

Now it’s time to make our Toolbar scrollable. If you have seen two previous parts of this post you’re probably thinking that we will be creating another OnScrollListener or something. But it’s not the case. Actually we need to add only one line of code to out layout file:

And that’s it! The app:layout_scrollFlags="scroll|enterAlways" line will cause that our Toolbar will scroll of the screen when user scrolls down the list and as soon as he starts scrolling up the Toolbar will show up again. Clean and simple, that’s the power of CoordinatorLayout!

The app now looks like this:

As you can see if you scroll the Toolbar off the screen and change tabs, it remains scrolled off. And even that on the second page we have only 5 items, so list itself cannot be scrolled, you can still show the Toolbar. The CoordinatorLayout makes it possible.

So the last part is adding a FAB. In part 1 we had to create it manually. We were using an ImageButton with a circular drawable as a background. From now on we have a FloatingActionButton widget in the Design Support Library! Let’s add it to our activity_part_three.xml layout file:

There are some known issues with FAB and other widgets from Design Support Library but most of them are already fixed so all we have to do is to wait for the release of the updated version. More on using new FAB widget you can read on Antonio blog. Our app now have a FloatingActionButton:

But if we start scrolling, the FAB stays in place and only the Toolbar is moving. To address this issue we will create a custom Behavior for our FAB. Let’s look at the code:

It’s not a lot of code as you can see. Let’s look at the important parts. First we extend from CoordinatorLayout.Behavior class. Note that we have to override constructor taking Context and AttributeSet as parameters in order to use this Behavior in our layout (xml) files. Next method that we need to override is layoutDependsOn. This method tells CoordinatorLayout that we want our FAB to depend on AppBarLayout. So from now on we will be notified about changes of an AppBarLayout size or position. To receive this notification we have to override another method which is onDependentViewChanged. In this method we are calculating how much of the AppBarLayout is scrolled off the screen and we are scrolling our FAB accordingly. So if a half of our AppBarLayout is scrolled off then a half of FAB should also be scrolled off. That’s basically it. Calculating ratio and moving FAB. We return true from this method because it changes position of child view (FAB in our case). What we need to do right now is to add this behavior to our FAB. Let’s do it then:

As you can see we are using fully qualified name of our Behavior class.

Let’s see how it works:

Great, now the FAB moves with our Toolbar!

As you can see the new Design Support Library is really powerful. Using it is pretty simple but it takes some time to get used to new stuff. I again encourage you to play with it and see what else you can do. Behaviors are very flexible and there is a lot more methods available in there. As I have said there are still some rough edges. For example the Toolbar is not snapping to the position, there is some issue with Overscroll which shows when you fling up but not when you scroll up etc. Most of these issues has status FutureRelease so we will get the fixes soon :)

Code

Source code of the full project described in this post is available on GitHub repo.

- Michał Z.

How to hide/show Toolbar when list is scrolling (part 2)

2015-02-28T00:00:00+00:00

This post is outdated, you should jump to part 3 or stay if you are bored :)

This is a second (and the last) post of this series. If you haven’t read part 1 I recommend you to do it. In previous part we’ve learned how to achieve an effect of hiding Toolbar like Google+. Today we will see how we can make it to behave like Google Play Store Toolbar. Let’s begin!

Before we start, I would like to say that I’ve refactored this project a little bit - it’s split in two Activities: PartOneActivity and PartTwoActivity that are started from MainActivity. Code is in the packages partone and parttwo so you can easily find classes that interest you.

This is how our final effect will look compared to Play Store Toolbar:

First things first

I won’t show build.gradle file because it’s the same as in part 1 so we will start from creating a layout for our Activity:

It’s just a RecyclerView and a Toolbar (we will add Tabs later). Notice that I’m using the second method (with adding padding to RecyclerView) described in previous post.

I will omit a layout file of our list item because it’s exactly the same as before. RecyclerAdapter was also described so we can skip it (here is how it should look - simple adapter, without header).

Let’s jump to our PartTwoActivity code:

It’s a basic initialization of RecyclerView and Toolbar, notice setting OnScrollListener in line 27.

The most interesting part is HidingScrollListener, so let’s create it!

If you’ve read previous part it should look familiar (actually it’s even simpler right now). What do we have here? There is only one important variable so far - mToolbarOffset which holds a scrolled offset relative to Toolbar's height. To put it simply, we want to track only values between 0 and Toolbar height so thanks to this: it will be increased if we scroll up (but we don’t want it to be bigger than Toolbar's height) and decreased if we scroll down (again we don’t want it to be lower than 0). You will see why do we restrict these values soon. We are also clipping mToolbarOffset because it’s possible that it will have some value out of our range for a small period of time (e.g. during fling) and it would cause flickering. We’ve also defined onMoved() - an abstract method which we call during scroll. It may surprise you but this is it for now!

We have to get back to our PartTwoActivity and implement onMoved() method inside our scroll listener:

Yup, that’s all. We can run our app and see what do we have:

Pretty good, the Toolbar is moving along with the list and getting back just as we expect it to. This is thanks to the restrictions that we put on the mToolbarOffset variable. If we would omit checking if it’s bigger than 0 and lower than mToolbarHeight then when we would scroll up our list, the Toolbar would move along far away off the screen, so to show it back you would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight position and not more so it’s “sitting” right above the list all of the time and if we start scrolling down, we can see it immediately showing.

It works pretty well, but this is not what we want. It feels weird that you can stop it in the middle of the scroll and the Toolbar will stay half visible. Actually this is how it’s done in Google Play Games app which I consider as a bug.

I think that views should smoothly snap to the position like Logo/SearchBar in Chrome app or Toolbar in Play Store app. I’m pretty sure that I saw it somewhere in Material guidelines/checklist or heard in one of Google I/O presentations.

Let’s revisit out HidingScrollListener code:

It got a little bit more complicated but there is nothing scary in there. We’ve just overrided the second method of the RecyclerView.OnScrollListener class which is onScrollStateChanged(). This is what we’re doing in this method:

We are checking if the list is in RecyclerView.SCROLL_STATE_IDLE state so it’s not scrolling nor flinging (because if it is, we’are translating Y position of the Toolbar manually - like before).
If we lift up our finger and list has stopped (it’s in RecyclerView.SCROLL_STATE_IDLE state) we have to check if it’s visible and if it is, then this means that we have to hide it if mToolbarOffset is bigger than HIDE_THRESHOLD or we have to show it again if mToolbarOffset is lower than SHOW_THRESHOLD:
And if it’s not visible then we have to do the opposite - if mToolbarOffset (which now is calculated from top position so it’s mToolbarHeight - mToolbarOffset) is bigger than SHOW_THRESHOLD then we are showing it and if it’s lower than HIDE_THRESHOLD then we are hiding it again:

onScrolled() stays the same as it was, and we don’t have to change anything else here. The last thing that we need to do is to implement our two new abstract methods in PartTwoActivity class:

It’s time to build our project and see the effect:

Looks like it’s working! :)

You may think that adding the tabs will complicate the code, so let me show you that it’s not the case.

Adding Tabs

We need to modify our Activity's layout:

and tabs.xml:

As you can see I’m not adding real Tabs, just a layout that mimics their look. It won’t change anything in the implementation. You can put any view here. There are some implementations of the Tabs for Material Design available on github or you can create them yourself :)

Adding the Tabs means that they will cover our list a little, so we need to increase the padding. To make it flexible we won’t be setting this in xml (notice removed padding from RecyclerView in part_two_activity.xml), because Toolbar can have different height depending on orientation or device (e.g on tablets), so we would have to create a bunch of xml to cover all the cases. Instead we will set the padding in code: It’s pretty simple, we’re setting the padding to be the sum of Toolbar's height and Tabs' height. If we run this now we will see something like this:

It’s all good, our first list item is perfectly visible, so we can move along. Actually we won’t change anything in our HidingScrollListener class. The only change that needs to be done is in PartTwoActivity:

Can you see what has changed? We are getting mToolbarContainer reference which is a LinearLayout instead of Toolbar, and in onMove(), onHide() and onShow() methods we are translating and animating this view instead of Toolbar. This will move a whole container that contains the Toolbar and Tabs and this is exactly what we need to do.

If we run it we can see that it seems to be working as expected, but if you look closely you will see that there is a little bug in there. Sometimes there is a white line visible between Tabs and Toolbar for the fraction of a second. It’s probably because they are not perfectly synchronized when they are animating. Fortunately it’s not something that we couldn’t fix:)

The fix is very simple, just put the background of the Toolbar and Tabs to their parent layout:

Now even if views are not perfectly synchronized during animation, it won’t be visible. There is one more bug, the same that we had in part 1. If we are at the top of the list, we can scroll a little bit up and if the HIDE_THRESHOLD small enough, the Toolbar will hide and there will be an empty space(padding) visible above the list. Again - fix is really simple:

We’ve just added one more variable that holds total scroll offset of the list, and when we are about to check if we should show or hide the Toolbar, we first check if we scrolled more than Toolbar's height (if not, we show the Toolbar again).

This is it, let’s run our app!

It’s working very well now :) And it even works with other LayoutManagers without changing anything else:

There was a question in the comment about saving scroll state, and it truly is a problem a little bit. If our item’s text would be long enough to be 2 lines in portrait mode and 1 line in landscape mode then our items heights will be different in portrait and landscape. So if we would scroll to position let’s say 100 in portrait and rotate the device with saving mTotalScrolledDistance and after rotation we would scroll up the list to the top, then mTotalScrolledDistance could be different than 0. There is no simple fix for that but for our usecase it doesn’t matter. And if you really want to do something about it, I would reset mTotalScrolledDistance to 0 and show the Toolbar after rotation.

So this is the end of this series of posts. I’m glad that some of you have learned something from the previous part. Thanks for the kind words :) I will continue writing this blog, but I don’t know what will be in the next posts yet:)

I also want to say that I think that methods described in this and previous post work pretty good but I didn’t test them well enough, so I’m not sure if they are ready to use in production code (see for example the saving state problem described above). The goal of this series was to show that you can achieve effects that looks difficult using only simple methods and standard APIs. I’ve also found out that this method can be used for many other things (e.g. creating sticking tabs with parallax background - like in Google+ profile screen). Happy coding!

Code

Source code of the full project described in this post is available on GitHub repo.

- Michał Z.

How to hide/show Toolbar when list is scroling (part 1)

2015-02-15T00:00:00+00:00

This post is outdated, you should jump to part 3 or stay if you are bored :)

In this post we will see how to achieve an effect that you can observe in Google+ app - hiding Toolbar and FAB (and any other views) when list is scrolling down and showing it again when it’s scrolling up. This behavior is mentioned in Material Design Checklist.

“Where appropriate, upon scrolling down, the app bar can scroll off the screen, leaving more vertical space for content. Upon scrolling back up, the app bar should be shown again.”

This is how our goal should look:

We will be using RecyclerView for our list but it’s possible to implement it in any other scrolling container (with a little more work in some cases i.e. ListView). There are two ways that come to my mind on how to achieve this:

With adding a padding to the list.
With adding a header to the list.

I decided to implement only the second one because I saw multiple questions on how to add a header to RecyclerView and this is a good opportunity to cover this but I will also briefly descripe the first one.

Let’s get started!

We will begin from creating our project and adding necesarry libraries:

Now we should define styles.xml so that our app will use Material Theme but without ActionBar (we will be using Toolbar):

The next thing is to create our Activity layout:

It’s a simple layout with RecyclerView, Toolbar and ImageButton which will be our FAB. We need to put them in a FrameLayout because Toolbar needs to be overlayed on RecyclerView. If we don’t do this, there will be an empty space visible above the list when we hide the Toolbar.

Let’s jump into the code of our MainActivity:

As you can see it’s a relatively small class. It only implements onCreate which does the following things:

Initializing Toolbar
Getting a reference to our FAB
Initializing RecyclerView

Now we will create an adapter for our RecyclerView. But first, we have to add a layout for our list items:

And corresponding ViewHolder:

Our list will be showing cards with only text so this is it - easy!

Now we can jump to the RecyclerAdapter code:

It’s a basic RecyclerView.Adapter implementation. There is nothing special about it. If you want to find about more about RecyclerView, I recommend you reading Mark Allison’s great series of posts

We got all the pieces in place so let’s run it!

Oh wait.. what is this? The Toolbar hides our list items and as you have probably noticed it’s because we are using FrameLayout in our activity_main.xml. This is the moment when we have two options that I mentioned at te beginning. First option will be to add a paddingTop to our RecyclerView and set it to Toolbar height. But we have to be careful because RecyclerView will clip it’s chilren to padding by default so we have to turn it off. Our layout would look like this:

And it would do the thing. But as I said, I wanted to show you another way - maybe a little more complicated which involves adding a header to the list.

Adding a header to the `RecyclerView`:

First we need to modify our Adapter a little:

Here is how it works:

We need to define types of items that the Recycler will display. RecyclerView is a very flexible component. Item types are used when you want to have different layout for some of your list items. And this is exactly what we want to do - our first item will be a header view, so it will be different from the rest of items (lines 3-4).
We need to tell the Recycler which type item it wants to display is (lines 49-54).
We need to modify onCreateViewHolder and onBindViewHolder() methods to return and bind a normal item if it’s type is TYPE_ITEM and a header item if it’s type is TYPE_HEADER (lines 14-34).
We need to modify getItemCount() - we return a number of items in our dataset +1 because we have also a header (lines 43-45).

Now let’s create a layout and ViewHolder for the header view.

The layout is very simple. Important thing to notice is that it’s height needs to be equal to our Toolbar height. And it’s ViewHolder is also pretty straightforward:

Ok, it’s done so we can try it out!

Much better, right? So to sum up, we have added a header to our RecyclerView that has the same height as Toolbar and now our Toolbar hides header view (which is an empty view) and all of our list items are perfectly visible. And finally we can implement showing/hiding views when list is scrolling.

Showing/hiding views when list is scrolling.

To achieve this we will create only one more class - OnScrollListener for RecyclerView.

As you can see there is only one method where all the magic happens - onScrolled() method. It’s parameters - dx, dy are the amounts of horizontal and vertical scrolls. Actually they are deltas, so it’s the amount between two events, not total scroll amount.

Basically an algorithm works like this:

We are calculating total scroll amount (sum of deltas) but only if views are hidden and we are scrolling up or if views are visible and we are scrolling down because these are the cases that we care about.
Now if this total scroll amount exceeds some threshold (that you can adjust - the bigger it is, the more you have to scroll to show/hide views) we are showing/hiding views depending on the direction (dy>0 means that we are scrolling down, dy<0 means that we are scrolling up).
We aren’t actually showing/hiding views in our scroll listener class, instead we make it abstract and call show()/hide() methods, so the caller can implement them.

Now we need to add this listener to our RecyclerView:

And here are the methods where we animate our views:

We have to take margins into account when we are hiding views, otherwise fab would’t fully hide.

It’s time to test our app!

It looks almost good. Almost because there is a little bug - if you are at the top of the list and threshold is small, you can hide the Toolbar and have empty space at the top of the list visible. Fortunately there is an easy fix for this. All we need to do is to detect if the first item of the list is visible and trigger our show/hide logic only if it’s not.

After this change if the first item is visible and views are hidder, we are showing them, otherwise it works as before. Let’s run our project again and see if it helped.

Yup! It seems like everything is working like a charm now :)

It was the first blog post in my life so forgive me if it was boring or if I have made some mistakes. I will improve in the future.

And if you don’t want to use the method with adding a header, you can still use the second one with adding padding to the RecyclerView. Just add the padding and use HidingScrollListener that we’ve just created and it will work :)

In the next part I will show you how to make it to behave like scrolling in Google Play Store app.

If you have any questions feel free to ask them in the comments below.

Code

Source code of the full project described in this post is available on GitHub repo.

Thanks to Mirek Stanek for proof reading this post.

- Michał Z.

Michał Z.

How to hide/show Toolbar when list is scrolling (part 3)

Preparation

Scrolling Toolbar and FloatingActionButton

Code

How to hide/show Toolbar when list is scrolling (part 2)

First things first

Snapping the Toolbar

Adding Tabs

Code

How to hide/show Toolbar when list is scroling (part 1)

Let’s get started!

Adding a header to the RecyclerView:

Showing/hiding views when list is scrolling.

Code

Adding a header to the `RecyclerView`: