Android Tips: Hello Material Design v7 AppCompat

Avatar

James

Nexus 4 (KitKat) Screentshot 2Android 5.0 Lollipop introduced a complete refresh, known as Material Design, to the Android user interface, which generated rapid adoption throughout the development community. Until Google introduced revision 21 of the Android Support v7 AppCompat library, Material Design themes, controls, and features were utilized only if you wanted to target devices running API 21.

We recently took a look at how this library gives developers an opportunity to add the ActionBar to applications targeting older devices all the way back to API 7. However, now you can use this updated library to add Material Design to any of your applications and use new controls like the new Toolbar, which replaces the ActionBar. Let’s see how easy it is to get started with the new Support Library v7 AppCompat by updating our Toolbar example.

Getting Started

To start integrating AppCompat into your Android project you will want to install the Support Library v7 AppCompat from the Component Store or directly from NuGet. This will also install the Support v4 Library, which is required because it provides controls that help maintain backwards compatibility.

Supportv7Component

Since you will now be able to target older versions of Android, you will want to adjust your Minimum and Target Android version under Android Application in the project options.

MinandTarget

Updating to Material Theme

There are many differences to the actual resources that are embedded into your app when you use the AppCompat library. This means that the actual themes and attributes are completely different between normal Material and AppCompat themes. You will find three new themes that you can inherit from:

Dark: Theme.AppCompat
Light: Theme.AppCompat.Light
Light with Dark ActionBar: Theme.AppCompat.Light.DarkActionBar

MaterialDesign

StylesFoldersTo use one of these themes, you’ll want to create two folders under your Resources folder named values and values-v21 where you will create a styles.xml where you can customize your applications theme. In our values/styles.xml you will create the base theme of your application and then set custom attributes. You will see that these attributes are different than using the standard Material Theme since they have dropped the android: prefix as they are now part of your application.

values/styles.xml

Then, inside of your values-v21/styles.xml, you’ll set a few more custom attributes that can take advantage of transitions on devices running Lollipop:

The last step is to open your AndroidManifest.xml under the Properties folder and add reference to your new theme under the application node with android:theme="@style/MyTheme".

Integrate Toolbar

Previously, we saw how to integrate the new Toolbar into your application. The core of that remains the same, except that you will now directly reference the new Toolbar widget from the Support Library. If you haven’t already create a new Android Layout file under Resources/Layout/toolbar.axml:

Note here the use of custom themes directly for the Toolbar and the use of custom attributes. These are a change form the normal use of the Toolbar when not using AppCompat. With our Toolbar setup we can now integrate it into our layouts by user the include node to place the Toolbar where you want.

Update that Activity

The core of any Android application are Activities. When you start using AppCompat, you simply need to update your activities inheritance.
From:

To:

You can now setup your Activity to set the SupportActionBar with the new Toolbar that you have embedded into your layout. I prefer to use an alias to ensure the correct Toolbar is always referenced:

Then you simply need to find the Toolbar, set it, and access it in your OnCreate:

There you have it, you can now run your newly Material Themed Android application on devices that aren’t running Lollipop!

Nexus 4 (KitKat) Screentshot 1

Learn More

You can get the full source code for this project in the Support v7 Sample gallery. There you will also find other awesome examples of more Support v7 libraries such as CardView, RecyclerView, and Palette. During Evolve 2014, Jérémie Laval and I gave two talks on Material Design from Concept to Implementation. (Part 1 and Part 2) that are available to watch now.

Discuss this post in the Xamarin forums.

Avatar
James Montemagno

Principal Program Manager, Mobile Developers Tools

Follow James   

No Comments.