Backward Compatibility / Material Design / Themes

Material – Part 2

In the previous article we got a simple app working which is a simple RSS viewer showing a list of recent Styling Android posts, and a detail view when you click on them. In this article we’ll look at applying some material design principles to the app and also try and make it backwards compatible using the appcompat library.

The obvious first stop that we need to do is add the new version of the appcompat library to our build.gradle:

Let’s begin applying some material deign by looking at the colour scheme that we’re going to use. In the series on Ripples we looked at how easy it it is to apply a colour scheme in the Android-L preview, and it’s every bit as easy using appcompat. However we need to use a different theme than inheriting from the Material themes which are only available on Android-L preview / Lollipop. This is also true for devices which are running Lollipop because these also need to use the appcompat themes – under the covers appcompat detects the underlying OS version and uses the most appropriate mechanisms.

So we need to alter our main app theme:

One thing worthy of note is that don’t include the android namespace on either the parent theme or the item names. This is because they are defined within our app’s default namespace because the appcompat library is imported in to our project and so we don’t have to address them as being part of the OS.

We also need to define the colour definitions:

We also need to delete the v21 styles that we defined previously because, as we mentioned, the appcompat library will manage this for us and we don’t need separate styles.

If we run this on a Lollipop device everything looks great – we have our colour themes in place:

However there are a couple of problems if we run it on KitKat:

Firstly, the status bar is still showing black. There’s nothing that we can do about this because extending our colour scheme outside of our app and on to system controls is simply not supported pre-Lollipop, so we’ll just have to live with it.

The second problem is that the ActionBar has disappeared! It was certainly there before we applied the appcompat theme. The reason for this is that to apply the theme and support the ActionBar our Activity must extend ActionBarActivity. This is pretty simple for FeedDetailView which currently extends Activity but requires a little more work on FeedListActivity which currently extends ListActivity:

Essentially we have to manually implement some of the functionality that we got from ListActivity, but there really isn’t that much required.

There’s one last thing worth mentioning: We get different item selection visual feedback on Lollipop compared to older versions of Android even when using the appcompat library. On Lollipop we get a nice ripple effect (as was discussed in the series on Ripples):

Whereas on KitKat we get a standard ListView click animation:

The reason for this is purely that Ripples are not included in the appcompat library, and utilise the render thread that has been introduced with Lollipop. It wouldn’t play well with other animations without the render thread, so has not been included.

In the next article we’ll take a further look in to some of the backwardly compatible material design stuff that we can do with the appcompat library.

The source code for this article is available here.

© 2014, Mark Allison. All rights reserved.

CC BY-NC-SA 4.0 Material – Part 2 by Styling Android is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at http://blog.stylingandroid.com/license-information.

3 Comments

  1. Hey, nice article.

    I see that the “compatibility burden” will never go away heh. Now we need to rewrite stuff to have lollipop features. At least we don’t have to support API 9 anymore.

  2. Hi, Nice one,

    I am implementing Meterial using eclipse+ADT with your articles and able run the Part 1.And while changing the part 2 as Application Theme in styles like below

    Eclipse unable to build the application instead showing

    error: Error retrieving parent for item: No resource found that matches the given name ‘Theme.AppCompat.Light.DarkActionBar’.

    Can you please let me know how to solve the above error.
    Thanks,

Leave a Reply

Your email address will not be published. Required fields are marked *