Material Design For Pre-Lollipop Devices

Material design is Google’s new specification for designing applications across a variety of devices. Using the latest AppCompat library for Android, you can start integrating some aspects of material design in your Android apps today. There is no need to wait for Lollipop (Android 5.0) adoption to start using aspects of material design. Check out the support library details for a full list of what’s been added. In this post we’ll focus on the new Toolbar and how it can be integrated with a menu drawer.

Lollipop is the new operating system (OS) for Android devices. This is a major release and has updates to many aspects of the OS.

Toolbar

One of the big additions to the support library was the Toolbar widget. It’s a generic replacement for the ActionBar. The Toolbar is often still referred to as an ActionBar when it’s docked to the top of the application. Here is an example of what the new Toolbar looks like:

Since the Toolbar is generic, it no longer needs to be tied to the top of the app. Here is an example of the Toolbar placed in a different location:

The first step to adding the new Toolbar is to update your theme to support material design through AppCompat. Notice that we are setting windowActionBar to false. We only want one ActionBar and will be creating a Toolbar in the next step that will be added to the Activity.

styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <!-- Set AppCompat’s color theming attrs -->
        <item name="colorPrimary">@android:color/holo_red_light</item>
        <item name="colorPrimaryDark">@android:color/holo_red_light</item>
        <item name="windowActionBar">false</item>
        <item name="searchViewStyle">@style/MySearchViewStyle</item>
    </style>
</resources>

Pro-tip: Use the AppCompat theme even to ensure forward compatibility as well as backwards support. If your app still uses the old Holo theme, Lollipop devices will try to apply the new material design which may break functionality.

Next, make sure your main activity extends ActionBarActivity (from the support library). Add the following code to the onCreate method of your Activity. If you have a menu drawer already, this will break your project. Continue to the menu drawer section for instructions on how to fix this.

// Set the ActionBar
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);

After adding this code you can access the ActionBar like you would normally, using the getSupportActionBar() method.

ActionBarDrawerToggle

Google’s material design guidelines suggest the navigation drawer should appear over the app bar. However, only about half of the newly designed Google apps follow this convention. The other half use the new ActionBarDrawerToggle to animation the hamburger icon into an arrow. At this point, with an even split between these implementations, use the one that fit’s your app design the best.

Below the ActionBar

Used in Google Play, Google Drive and Play Music

Above the ActionBar

Used in Gmail and Google Wallet

Adding the arrow animation is as simple as setting the mDrawerToggle as a listener for the mDrawerLayout. If you prefer not to use this animation (when covering the ActionBar with the menu drawer) just remove this line of code.

// Used to animate the hamburger menu into an arrow
mDrawerLayout.setDrawerListener(mDrawerToggle);

DrawerLayout Integration

If you use the current wizard within Android Studio, a few of changes need to be made to the NavigationDrawerFragment to support the Toolbar widget and ActionBarDrawerToggle. The biggest change is moving the adapter initialization from onCreateView to setUp. The reason for this is that we need a reference to the ActionBar to create the adapter. When using the Toolbar, this needs to be passed in via the setUp function to ensure the ActionBar reference exists.

You can get the source code for this on GitHub.

Conclusion

Material design is a big step forward in the design specification for Android. The AppCompat library can be used to start integration aspects of material design to pre-Lollipop devices. Keep your apps looking current by integrating these new design patterns as available in the support library.

At this point, only some aspects of material design have been added to the support library. Google will likely update the library in the future to include additional support. For now, the following components have been added to the v7 support library: Toolbar (which takes the place of the ActionBar), SwitchCompat, CardView, RecyclerView and Palette.

Additional Resources:
AppCompat v21 — Material Design for Pre-Lollipop Devices!
Material Design on Android Checklist
Material Design Everywhere: Using AppCompat 21
appcompat v21: material design for pre-Lollipop devices!

Talk with us more about incorporating material design into your Android apps.