Tutorial: Flexible Space With Image Action Bar

Android Support Library

Android Support Library provides many useful features for android developers and doing it with backward-compatibility in mind. Watch this video where Ian Lake explain why it's so good (it's just me or his smile looks terrifying? Leave your thoughts in the comment section).

As you may guess we'll use design part of this library, actually a small part of the design part. To be able to use it in your project you should add a gradle dependency.

compile 'com.android.support:design:23.3.0'

Flexible Space With Image is a scrolling technique that was presented as a part of the material design and Android Support Design Library makes it really easy to implement one and also makes it backward-compatible so you don't need to write a code mess to support it on each API.

We can achieve this effect with very small amount of java code using XML primarily.

We’ll use CoordinatorLayout, AppBarLayout, and CollapsingToolbarLayout.

CoordinatorLayout actually is what you probably think it is. It's layout that can coordinate its child layouts between each other. With other layouts from Support Desing Library, it provides an implementation of nice scrolling techniques of material design.

AppBarLayout is basically vertical LinearLayout that is ahead of the game. Its child elements can change behavior while scrolling. It provides full functionality only if it used as direct CollapsingToolbarLayout child.

And CollapsingToolbarLayout. This speaks for itself. It's a toolbar and it can collapse :). Remember that it's designed to be a direct child of AppBarLayout.  

Also, you'll want to use NestedScrollVIew or another scrollable layout to see all impact.

Let's continue to build the messaging app from the last tutorial, and we will make profile activity.

The XML code will be something like this

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
    app:contentScrim="?attr/colorPrimary">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="32dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/strange"
                android:fitsSystemWindows="true"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

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

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scrollableView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <TextView
                android:id="@+id/number_textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="16dp"
                android:text="+1 234 5678 90" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Description"
                android:textColor="@android:color/black"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/description_textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/strange" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

Let's talk about attributes.

I think that the most important one is layout_scrollFlags it determines how AppBarLayouts children will react to scrolling. There're 5 flags: scroll, enterAlways, enterAlwaysCollapsed, snap and exitUntilCollapsed.

layoutCollapseMode attribute will define how elements will behave while collapsing.

Here's how it looks.

By the way, you should use a theme without action bar for this code to work. Use theme like this.

<style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowActionBarOverlay">true</item>
        <item name="windowNoTitle">true</item>
</style>

And set theme attribute of your activity in AndroidManifest to AppTheme.NoActionBar

<activity
            android:name=".ProfileActivity"
            android:theme="@style/AppTheme.NoActionBar" />

There is a very few Java code that you need to write to make it perfect.

public class FlexibleActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flexible);

        //Initialize toolbar
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        //Set custom title
        toolbar.setTitle("Doctor Strange");

        setSupportActionBar(toolbar);
        //Show "back" button
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);


    }
}

It'll set the custom title in the toolbar and show back button to return to parent activity (if your activity has one).

In the end of the day, this will look like that.

Okay, that's all for today, feel free to ask any questions in the comment section below.

Stay tuned to learn more tweaks with CoordinatorLayout.

See you in the next one, peace!

P.S. You can look at my code on my GitHub repository