ZOFTINO.COM android and web dev tutorials

Android Material Styles and Themes

Android platform provides material styles and themes which follow material design guidelines. Material themes were introduced in Android 5.0 (API level 21).

Since material themes are available from API level 21 onwards, apps which use material themes should take care of backward compatibility so that apps using material themes will work on devices running older versions of android.

In this post, I’ll show how to use material styles and themes in your app and provide backward compatibility for material styles.

Material Themes

Android platform provides two material themes, one is dark and second one is light

  1. Theme.Material
  2. Theme.Material.Light

There are several variants of the above material themes, listed below.

  1. Theme.Material.NoActionBar
  2. Theme.Material.NoActionBar.Fullscreen
  3. Theme.Material.NoActionBar.Overscan
  4. Theme.Material.NoActionBar.TranslucentDecor
  5. Theme.Material.Light.DarkActionBar
  6. Theme.Material.Light.NoActionBar.Fullscreen
  7. Theme.Material.Light.NoActionBar.Overscan
  8. Theme.Material.Light.NoActionBar.TranslucentDecor

Using Material Themes

You can apply material theme to an application or activity by setting theme attribute of application and activity elements in android manifest file. To apply themes to individual views, you can use theme attribute of the views. For more information about themes and styles, you can read Android styles and themes tutorial.

 <application
    android:theme="@android:style/Theme.Material.Light"
    . . . >
</application>

Theme.Material Output

Below is the screen shot of a layout with common UI components and Theme.Material.

android material theme example

Theme.Material.Light Output

Below is the screen shot of a layout with common UI components and Theme.Material.Light.

android material theme light example

Material Themes Custom Colors

You can change the theme color for text color, status bar, action bar, navigation bar, window background and UI controls using textColorPrimary, colorPrimaryDark, colorPrimary, navigationBarColor, windowBackground and colorAccent properties respectively.

<resources>
<style name="AppTheme" parent="@android:style/Theme.Material.Light">
    <item name="android:colorPrimary">#673ab7</item>
    <item name="android:colorPrimaryDark">#1a237e</item>
    <item name="android:colorAccent">#f44336</item>
    <item name="android:textColorPrimary">#1b5e20</item>
    <item name="android:textColor">#0091ea</item>
    <item name="android:windowBackground">@color/colorBackground</item>
</style>
</resources>

android material theme color customization

Material Dialog Themes

Material themes include themes for dialog and overlays. Below is screen shot of dialog window with ThemeOverlay_Material_Dark.

android material theme dialog example

Below are the material dialog and overlay themes and variants of these themes are also available.

  1. Theme_Material_Dialog
  2. Theme_Material_Dialog_Presentation
  3. Theme_Material_Light_Dialog
  4. ThemeOverlay_Material_Dialog
  5. ThemeOverlay_Material_Light
  6. ThemeOverlay_Material_Dark
  7. ThemeOverlay_Material

If you want to change default dialog theme of the material theme applied to application, you can use alertDialogTheme and dialogTheme attribute as shown below.

<style name="AppTheme" parent="@android:style/Theme.Material.Light">
    <item name="android:colorPrimary">#673ab7</item>
    . . .	
    <item name="android:alertDialogTheme">@android:style/Theme.Material.Dialog.Presentation</item>
    <item name="android:dialogTheme">@android:style/Theme.Material.Dialog.Presentation</item>
</style>

Material Styles for Text

Below are some of the material text styles and screen shot shows applying the styles to TextView with textAppearance attribute.

  1. TextAppearance.Material.Body1
  2. TextAppearance.Material.Body2
  3. TextAppearance.Material.Inverse
  4. TextAppearance.Material.Small
  5. TextAppearance.Material.Medium
  6. TextAppearance.Material.Large
  7. TextAppearance.Material.Headline
  8. TextAppearance.Material.Title
  9. TextAppearance.Material.Display1
  10. TextAppearance.Material.Display2

android material theme textappearance examples

Widget Materials Themes

As shown in the above screen shots, default material themes are applied to UI controls when application or activity themes is set to one of the material themes. You can change the color of the widgets as explained above.

If you want particular widgets on a screen to have a different look, you can use theme attribute to apply different themes to it or change specific styling attribute to get required look and feel.

Below screen shot shows two buttons using different styles, Widget.Material.Light.Button and Widget.Material.Button.Borderless.Colored.

android material widge example

Material Themes Compatibility

Since material themes were introduced in Android 5.0, you need to take care of compatibility issue so that application, which is using material themes, run on prior Android versions.

One way to take care of compatibility is to define separate styles for different versions of android and keep them in corresponding res/values folder. This approach is the right choice if you want material design for your app only when it runs on android 5.0 and later versions and non-material themes when it runs on versions prior to Android 5.0. For example, two versions of style file with the same custom theme name is defined and placed in res/values and res/values-21 folders. You can apply the custom theme to application in manifest. Android will pick the style based on its version on the device.

Custom style inheriting material theme that needs to be placed res/values-21 folder.

 <resources>
<style name="AppTheme" parent="@android:style/Theme.Material.Light">
    <item name="android:colorPrimary">#673ab7</item>
    . . .
</style>
</resources>

Custom style inheriting holo theme that needs to be saved in res/values folder.

 <resources>
<style name="AppTheme" parent="@android:style/Theme.Holo.Light">
    . . .
</style>
</resources>

Using App Compact Material Themes

If you want material themes in all the versions of android, you can use app compact material themes from support library. App compact material themes are material themes which are part of support library and can provide material design for apps running on older android versions.

To use app compact material themes, make sure that app compact library, for example com.android.support:appcompat-v7:26.0.1, is added to your project.

Some of the material themes in support library are Theme.AppCompat.Light, Theme.AppCompat, and Theme.AppCompat.DayNight.

To know app compact styles and themes see app compact styles.