Tips and Tricks for Android Material Support Library 2: Electric Boogaloo

If you followed my previous blog post and the linked tutorials, you should have an app that uses the Material Support Library and looks pretty decent. The focus of this post is to help you put some polish on your design, and move closer to the Google Material design guidelines. The best part: none of these tips will require a designer or new assets.

Ripple All the Things

Everyone likes a satisfying ripple effect on buttons, and for everything else to have touch feedback. I’ll show you how to add this effect everywhere you can. Note that the ripples will only show up on devices running Lollipop, and will fall back to a static highlight on previous versions.

Buttons

Most buttons are made with several drawables. Usually you’ll have a pressed and normal version of assets like this:

/drawable/button.xml:https://gist.github.com/johnybot/aa0f43994f240c566e48.js

To get your ripple on, overwrite your button in drawable-v21 and add a ripple effect to your normal button. Using ?android:colorControlHighlight will give the ripple the same colour as the built-in ripples in your app:

/drawable-v21/button.xml:https://gist.github.com/johnybot/b8557e2532bfdffba941.js

If you don’t like the default grey, you can specify what colour you want colorControlHighlight to be in your theme. However, I would caution against this, as it distracts from the content of your app and none of the Google-designed apps seem to do it.

Clickable Views

What do you do if you have a View that you want to add a ripple to? A common case is having a LinearLayout with a few items that are clickable. You could create your own drawable with a <ripple> element, but there is an easier way. Just set the background to ?attr/selectableItemBackground.

In XML:https://gist.github.com/johnybot/14bc0828638e61f83bc5.js

In code:https://gist.github.com/johnybot/99b8aa00a0e725b2185c.js

If you want the ripple to extend past the boundary of the view, then you can instead use ?attr/selectableItemBackgroundBorderless. This works well with ImageButtons and smaller Buttons that are part of a larger View:

Dialogs with Style

AlertDialogs and ProgressDialogs should automatically show with a material design when running on a Lollipop device. Unfortunately, unless you manually change them, they’ll appear in the default teal. If you’re into the teal, you can leave it as is — but we can easily make the dialogs match our application’s theme.

All Dialogs

Having your buttons fit into your theme is as simple as creating a style and adding it to your theme. The colour of the buttons in an AlertDialog and ProgressBar in a ProgressDialog are decided by the colorAccent attribute.

styles.xml:https://gist.github.com/johnybot/da8ef074fda559afa8cf.js

themes.xml:https://gist.github.com/johnybot/31b9d73ba3017956609f.js

Destructive Dialogs

When the Material Design Guidelines were first released, they included a separate design for destructive dialogs. This design had a red button to emphasize the destructive nature of the action being performed. To implement it, you can overwrite the buttonBarPositiveButtonStyle property in your dialog Theme:

styles.xml:https://gist.github.com/johnybot/089a762b9c8ea7a5e7c2.js

Using this style for a specific AlertDialog requires you to specify a theme in the AlertDialog.Builder constructor:

https://gist.github.com/johnybot/0cd021d01934ce19d4f3.js

Material Dialogs on Every Platform

If you want your Dialogs to have a Material look and feel across all Android versions, you’ll need either custom dialog styles or a library. I am not a fan of reinventing the wheel, so I would suggest using one of the many libraries available:

• https://github.com/afollestad/material-dialogs
• https://github.com/fengdai/AlertDialogPro/
• https://github.com/drakeet/MaterialDialog

Navigation Drawers

Looking at the Material design section on Navigation Drawers will give you a good guideline for designing your DrawerLayout. It provides detailed drawings of padding, text size and colour needed to get a basic Material styled drawer.

Text Color

The guidelines say you should use either your primary colour or black for the selected drawer item. You could detect which item is selected in code and change the textColor, but there is an easier way. By using a ColorStateList, you can specify what colour the text will be when it is selected and unselected.

color/menu_text.xml:https://gist.github.com/johnybot/40d6878bccbeda0d9cd2.js

and in your layout file:https://gist.github.com/johnybot/11320fc445c9af1edcd1.js

Icon Color

You should also change the colour of your menu icons to match the text. If you are on v-21 and up, you can simply set the “android:tint” attribute to the same ColorStateList as before. However, as you’re using the Material Support Library, you’ll need a broader solution to this problem.

One solution would be to have two assets with each image: one for selected and one for unselected. This is a fine solution, but requires both changing assets if you want a colour change, and some experience with image editing software. A way to programmatically colour your icons is with a ColorFilter:

https://gist.github.com/johnybot/38894e2232d6fee054cd.js

This Stack Overflow post shows you a great way to make your icon change based on its state by creating a subclass of ImageView. You can also reuse your ColorStateList like with the v-21 tint:
https://gist.github.com/johnybot/61bf48309d7e288691bc.js

Shoutouts

@Mike_Worth, @bryanstern, and @stinkley for their continuing insight, @kimli for being the best, and @chrisbanes for his excellent work on the appcompat library.

Conclusion

Getting your app to follow the basics of Google’s Material Design Guidelines is not terribly hard. Many things don’t even require a designer. With these basics in place, you can move on to the more complicated concepts like animation and elevation.

Check out Hootsuite’s new Android redesign, now available in the Play Store.

About the Author

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