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.
Most buttons are made with several drawables. Usually you’ll have a pressed and normal version of assets like this:
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:
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.
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
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.
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.
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:
Using this style for a specific AlertDialog requires you to specify a theme in the AlertDialog.Builder constructor:
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:
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.
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.
and in your layout file:https://gist.github.com/johnybot/11320fc445c9af1edcd1.js
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:
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:
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.