Quick Return Pattern with Android Design Support Library

The ‘Quick Return’ is a famous UI pattern seen in Android apps. It aims to dedicate the screen’s maximum possible real estate to content, instead of controls. With Android Design Support Library, the same which was harder in the past, is now quite easy!

Quick Return Pattern

This is similar to Google Now’s search box. It scrolls off-screen with the rest of the scrollable content, but upon scrolling slightly up at any point, it scrolls back into view – Roman Nurik

You might have come across this in my Implement a FAB post where I would’ve showed you how to implement this which was quite a tedious process. The good news is, in this post the very same effect is quite easily achievable with pure XML only!

Take a look at this video for a better understanding.

We can see a lot of famous apps implement the Quick Return pattern such as Google +, WhatsApp and Play Store. The Android Design Support Library enables us to achieve this pattern with minimal effort. Something which was an intensive process to do in the past!

When to use it?

The pattern works best when you have a long list of scrollable content. A perfect example would be a contacts list, a news feed and even a gallery.

Content always takes top priority and giving maximum screen space to just that is essential. Screen real estate is all the more important in phones which have smaller displays compared to their tablet counterparts.

Controls such as the Toolbar (ActionBar), Split Action Bar, Floating Action Button, all take up space and prove to be a hindrance. Hence really long scrollable content is the perfect opportunity for us to implement this pattern and hide such persistent controls. These can always be revealed upon scrolling up again.

Also read:


Let’s take a look at how our XML structure will be first. The AppBarLayout will help us control the Toolbar behavior.

<!-- Helps listen and react to events in child views -->
<android.support.design.widget.CoordinatorLayout >

<!-- Helps control Toolbar -->
    <android.support.design.widget.AppBarLayout >

        <android.support.v7.widget.Toolbar />


<!-- Our scrollable list with scroll behavior -->
    <android.support.v7.widget.RecyclerView /> 

If any of the new widgets don’t make sense to you, then I highly recommend that you go through my previous post which clearly explains everything.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"


            app:layout_scrollFlags="scroll|enterAlways" />


        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


Do note the highlighted lines as these two are key in making the Quick Return pattern actually work!

The scroll flag enables views to scroll off the screen, while enterAlways enables the Quick Return pattern. The string resource ‘appbar_scrolling_view_behavior‘ tells the AppBar how to react upon scrolling the RecyclerView.

Wrapping it up!

That’s all there is to it really! Just don’t forget to do the usual drill where you need to set up your Toolbar as ActionBar and then populate your RecyclerView! 😉

When you’re done with all that, go ahead and run your app. Your Toolbar will now be responding to scroll in RecyclerView. The Quick Return pattern will be enabled. As you scroll down the Toolbar moves out of the screen and while scrolling down even slightly, the Toolbar moves back into the screen.

quick return_opt

Check out this code sample on GitHub.

Maximizing screen real estate is of real importance for apps especially those running on phone that have small screens. Making use of the available space smartly allows us to hide what’s not required, allowing our content to stand out. This eliminates hindrances, prioritizing the content our users want to see comfortably.

NOTE: The Design Support Library is the first of its kind and aims to achieve big. But being released recently, it is bound to have its bugs.

Do subscribe (below) or  for instant updates on new posts, tips and tricks in Android design.



Product Designer who occasionally writes code.

You may also like...

27 Responses

  1. Joseph Joey says:

    Can we do the same thing with a floating action button?

  2. Witalo Benicio says:

    Can i use SwipeRefreshLayout with this?

  3. Srujan Barai says:

    Will this work if I implement it with a viewPager?

    • Suleiman19 says:

      Hi Srujan,
      It definitely can work with a ViewPager setup. Instead of a NestedScrollView, you can use a ViewPager. Just wrap your Toolber and Tablayout within AppBarLayout and you’re good to go.

  4. Jeff says:

    Can we do a similar pattern on iOS? I think Quick Return is a great concept, but I have no idea how it’d be done on iOS. Any idea?

  5. Chitra Bahadur says:


  6. igoticecream says:

    Is there any way to trigger this after certain threshold?

  7. Tomas says:

    Can you do a tutorial about how to make a material design recycler view like the thumbnail?
    I got stuck on designing 🙁

  8. pelonchas says:

    Can you make a post of how to use this behavior using fragments? I’m developing an app that have 3 fragments, in 2 of them I have a recyclerview, I want to achieve this kind of behavior but don’t have any idea of how I can do this.

  9. Justin says:

    What about the other half of quick return; I want the FAB to scroll off the bottom of the screen and then when I scroll back up, the toolbar and the FAB should come back. Is this possible with the current design support library?

    • Suleiman19 says:

      That is not the ‘other half’ of quick return. This pattern exists ever since late 2012. At that point we didn’t even have Material Design let alone the FAB.

      Anyway, I don’t see the library provisioning for the quick return for the FAB as simply using the same scroll flags don’t work.

      Take a look at this post if you want to hide your FAB on scroll: http://blog.grafixartist.com/implement-floating-action-button-fab-part-2/

      • Justin says:

        Thanks, that will work! You would think that the CoordinatorLayout is powerful enough to handle this kind of stuff. Do you think there will be a way to do this in later versions of the design support library?

      • Suleiman19 says:

        The design library is new, and the importance of FAB is growing. We can hope for support in the coming versions.

        If you check the docs for CoordinatorLayout there are methods to detect nested scroll events and such. It is powerful. But its uses are largely not yet tapped.

  10. Witalo Benicio says:

    It works with GridView?

Leave a Reply

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