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:

• Material Design Tabs with Design Support Library
• Flexible Space with Image Pattern
• Parallax Scrolling Tabs

Layout

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 />

    </android.support.design.widget.AppBarLayout>

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

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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

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.

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 Follow @Suleiman_194 for instant updates on new posts, tips and tricks in Android design.

Cheers!

Suleiman

Product Designer who occasionally writes code.

iamsuleiman.com