Making Android app Material

April 17, 2020

This is an introduction on how to make your Android app follow Material Design guidelines. There are many resources out there that go into much greater detail and edge cases. This one is a quick Getting Started post.

Gradle Dependency

First, remove Design Support library and add Material Design Components (MDC) library in Gradle:

implementation "com.google.android.material:material:$version"

App Theme

Make sure your app theme in styles.xml extends any of the built-in Material Components themes. For instance:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">

Color Palette

Choose a color palette at material.io. The site is an excellent resource to quickly see how predefined color combinations look like as well as customize them.

Update colors.xml

Based on the desired color palette, update your colors.xml.

Update styles.xml

Color attributes undergone some changes in Material theming:

• colorPrimary -> no change

• colorPrimaryDark -> colorPrimaryVariant + android:statusBarColor

• colorAccent -> colorSecondary + colorSecondaryVariant

For instance, now the new styles.xml may look like this:

<style name="Theme.App" parent="Theme.MaterialComponents.*">
  <item name="colorPrimary">@color/navy_700</color>
  <item name="colorPrimaryVariant">@color/navy_900</color>
  <item name="colorSecondary">@color/green_300</color>
  <item name="colorSecondaryVariant">@color/green_500</color>
  <item name="android:statusBarColor">@color/navy_900</item>
</resources>

Widget Styles

When adding view widgets such as TextView, Button, Card, etc, visit material design components and choose platform Android. When looking to style a Button, for instance, you’ll end up here.

There you will see that, at the time of writing this, there are 4 times of Buttons, for example:

• Text button

• Outlined button

• Contained button

• Toggle button

Apply Widget Style

Once you choose one of the available styles from above, apply the style in your layout file:

<Button 
  ...
  style="?attr/materialButtonOutlinedStyle" />

Or, in the case of a TextInputLayout, use special material design widget:

<com.google.android.material.textfield.TextInputLayout
  ...
  style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" />

Note that we are using a regular Button and not a MaterialButton. The conversion is done for us under the hood using MaterialComponentsViewInflater (which extends AppCompatViewInflater). This conversion is available for the following AppCompat types only. Other widgets should use fully qualified Material Design Components declarations instead.

• Button

• CheckBox

• RadioButton

• TextView

• AutoCompleteTextView

Custom Styles

Sometimes using built-in styles is not enough and you’d want to customize styles by extending them in styles.xml to overwrite desired attributes.

<style name="MyApp.OutlinedButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
  ...

And then use them in your layout this way:

<Button
  ...
  style="@style/MyApp.OutlinedButton" />

Review Material Components

Finally, review all your components such as collapsing toolbars, app bars, bottom sheets, bottom navigation, icons, etc. Compare them with the Components section of the material.io. There you will find best practices and code samples of how to implement these layouts.

Depending on a component, you will find material design direction for Android, iOS, Flutter and Web.

Next steps

Material Design is a big topic and there are many excellent resources out there for you to explore! Material Design for Android and material.io are excellent starting points. There are many in-depth posts by Nick Rout on Medium as well.