Material designed apps are all the rage these days. Gone are the days of Gingerbread design, and if your app is Holo, you’re already behind. Everyone (including your project manager) will want a shiny new Material App – but what about the people still using older Android devices? You can’t leave them behind, so that’s where the Material Support Library comes in.

Rr32ynHS

Setup

In order to use the Material Support Library, you will have to update your support repository and add a dependency to your application. If you need help with this, the best guide I’ve found comes straight from Chris Banes himself.

Add the support library to your build.gradle:

https://gist.github.com/johnybot/dfa3b29952cce6809b68.jsChange your application theme to a Theme.Appcompat theme:https://gist.github.com/johnybot/96ec87d2c64be137497d.js

Change your Activites to ActionBarActivites. ActionBarActivity is a subclass of FragmentActivity, so there should be no issues if you were already using FragmentActivities:

https://gist.github.com/johnybot/45b5b662a0ef59707020.jsThat’s it! You are now using the Material Support Library. Try running your application to see all the Material goodness. hootsuite_crash Oops. Don’t worry, we can fix this.

getActionBar() -> getSupportActionBar()

or, Why does my app crash on launch? When you call getActionBar() on an ActionBarActivity, you will receive a null object. This causes a lot of NullPointerExceptions in existing code, so you’ll need to use getSupportActionBar() instead. Unfortunately, this means you will have to cast getActivity() in your fragments:https://gist.github.com/johnybot/0f48dda0266b029154d8.js

android:showAsAction -> app:showAsAction

or, Everything is in the overflow menu 😦

material_overflow_broken

If you open up one of your menu.xml files, you’ll see that showAsAction is underlined as red. This fix is as simple as changing “android” to “app”, and adding the app namespace. Because showAsAction was introduced in API 11, the support library has to use its own definition of showAsAction:

https://gist.github.com/johnybot/e9fa495b9ea03be742ac.jsmaterial_overflow_fixed

PreferenceActivity -> ActionBarActivity + PreferenceFragment

or, Where is the ActionBar in my PreferenceActivity? preferences_broken Here at Hootsuite we are using the somewhat deprecated PreferenceActivity. This is a holdover from when we supported API 8+, but we’ve since moved to support API 14+ and can use a PreferenceFragment. This allows us to use any type of activity and use the generic AppCompat theme we set up earlier.https://gist.github.com/johnybot/2059d224516779750cd2.js

preferences_fixed

This is all fairly simple to set up, but you have to use getFragmentManager() instead of getSupportFragmentManager() as PreferenceFragment extends android.app.Fragment and not android.support.v4.app.Fragment. If you are still supporting Gingerbread, I would recommend having a custom layout, or using one of the various backports that are available.

DrawerLayout + Toolbar

Or, Making Roman Nurik Happy

Take a look at the Material Design Checklist and you will notice that you need to change your existing drawer layout to  be over the toolbar and under the status bar. There’s a handy StackOverflow post explaining how to implement this.

I found that it is better to have a separate Theme that you will use in your DrawerActivity. You can use the normal theme to have an ActionBar and the NoTitleBar theme if you manually add a Toolbar:

https://gist.github.com/johnybot/56faa6f0fbb4eafb147c.jsI have found that most apps use the Light.DarkActionBar theme. Using this theme, you will have to add some attributes to the Toolbar. Adding app:theme will allow you to specify the Dark version of the ActionBar, and app:popupTheme sets the style of popups like the overflow menu.https://gist.github.com/johnybot/d19a24cae335ac3026d1.js

drawer_material

In order to put more than just a solid colour under the status bar you will need a custom layout. When you set fitsSystemWindows to true, fitSystemWindows() will get called on your View. You will need to override this in a custom ViewGroup and draw a translucent overlay, an example of which can be seen in the Google IO app.

drawer_material_scrim

Converting your application to use the Material Support Library may take some time and effort, but it’s worth it in the end. An app with a modern look and feel will make your application stand out in the Play Store, and provide a better user experience. Look for the Material update to our Hootsuite Android App, coming soon!

Style Resources

Or, Help! I Don’t Have a Designer!

HarmsAbout the Author: Johnathan Harms is an Android Engineer on the Hootsuite Mobile team. In his spare time, he likes playing video games and thanking Nick. Follow him on Twitter @johnathanharms.