Migrating from the Actionbar to the Toolbar

I’ve been putting this off for while, but the time finally came to migrate my actionbars to toolbars in my android projects and get my head around the change. Like everything, thinking about it is worse than doing it and the work in the end was pretty trivial.

Why use toolbars?

But we just got the ActionBar not so long ago! Why another change, whats the point? Well, lots of points, really, but primarily to support Material design. Check out all the designy talk here and look at the section on paper toolbars. The really nice thing about this API, is that the Toolbar itself is an ActionBar. As we will see a bit further down, all you need to do is ditch your old ActionBar, create a Toolbar and then call setSupportActionBar(myNewToolbar). Then you have basically most of your old behaviour. You can treat the toolbar like an old actionbar and make the change progressively.

But why change to a toolbar if you are just going to use it like an actionbar? Well, don’t do that. Change, and then design your app to take advantage of the toolbar features:

  • Toolbars can float. They don’t have to be anchored to the top of your Activity. They are just another view in your layout and can be brought up when required, depending on the context.
  • They can be opaque, and resized, allowing for the cool scrolling behaviour you can see in Google Newstand whereby the content slides in and out from behind the top toolbar. This allows much richer interaction with the content as you can see in the screenshots below. This is the same page, with the same toolbar, but having scrolled a little.
  • Newstand Toolbar 1blog2

Version Compatibility

Android is really getting much better at handling backward compatibility and the days of relying on great 3rd party libraries such as ActionBarSherlock may have come to an end.

Using the AppCompat library, the toolbar can be used back as far as API Level 7 (Eclair), and only a crazy person would consider supporting less than that nowadays.

This means that we don’t use the Material theme directly, but instead the AppCompat theme and it handles all the rest for us.

The code

Like I said, it’s really easy. The first thing you want to do, is get rid of your existing Actionbar, presuming you have one. This is done in the themeing. Make sure you have access to the app compat library by adding it to your gradle file and then go to your styles.xml file and change it to use the AppCompat NoActionBar theme.

Gradle file:
dependencies {
    compile 'com.android.support:appcompat-v7:21.0.3'
}

styles.xml file:

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <!-- Not required to change to toolbar, just putting them in for completeness -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

    </style>

Aside: As you can see, in here, you can set the primary, secondary and accent colors as per the Material design guidelines. It’s sort of outside the scope of this post, but the code is there in case you want to follow it up.

Now, in your layout file for the activity, you need to add the toolbar itself.

Activity Layout file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/background_material_dark"
        android:id="@+id/galleryActToolbar"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <!-- Other views can now go here -->

</LinearLayout>

Finally, if you are intending to use the toolbar as you did your actionbar previously, you need to set it in your Activities onCreate function:


    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_gallery);

        Toolbar toolbar = (Toolbar) findViewById(R.id.galleryActToolbar);
        setSupportActionBar(toolbar);
    }

And that’s it. Your first step on the way to Material design compliant is complete! Simples.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s