The material design is a specification for creating user interface. The material design specification is developed and maintained by Google and it aims at all platforms.

The new coming Android L platform will include an implementation for the material design. Towards the next coming Android course I am going to deliver in HIT I chose to adjust its training material and adds a significant coverage for implementing the material design on android. In addition to this important update I have also started to develop the Android Material Design free course at http://abelski.lifemichael.ocm. So far, I have developed the code samples, the slides and the video clips for learning how to use the android material theme and for learning how to use the RecyclerView new widget.

The following video clip show how simple it is to start using the material theme. The video clip overviews a simple demo that includes the definition of a new theme that extends the material theme. The two important files this code sample includes are AndroidManifest.xml where the application theme is set and the other XML file that defines a new theme (style) that extends the material theme.

The AndroidManifest.xml file can set the style that will function as a theme for the entier application.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="com.lifemichael.www.materialdemo" >
 <application
 android:allowBackup="true"
 android:icon="@drawable/ic_launcher"
 android:label="@string/app_name"
 android:theme="@style/AppTheme" >
 <activity
 android:name=".MyActivity"
 android:label="@string/app_name" >
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />
 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>
 </application>
</manifest>

The AppTheme style is defined in a separated XML file that should be saved inside the values folder.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>
</resources>

The following video clip overviews this code sample and explains how does it work. Please note that you could also use the material theme directly.

Changing the material theme we extend is fairly simple. We just need to override the design items inherited from the material design.

<resources>
    <style name="MaterialDemoTheme" parent="android:Theme.Material.Light">
        <item name="android:colorPrimary">@color/brand_color_primary</item>
        <item name="android:colorPrimaryDark">@color/brand_color_primary_dark</item>
        <item name="android:colorAccent">@color/brand_color_accent</item>
        <item name="android:textColorPrimary">@color/text_color_primary</item>
    </style>
</resources>

Defining the colors in a separated file as separated resources will assist you picking the right color.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="brand_color_primary">#ffad1115</color>
    <color name="brand_color_primary_dark">#ff7b0c0d</color>
    <color name="brand_color_accent">#ff915f64</color>
    <color name="text_color_primary">#fff8f2c1</color>
</resources>

The following video clip overviews this code sample and explains how does it work.

You can find more explanations, slides and video clips about this topic in my free Android Material Design course at http://abelski.lifemichael.com.

Leave a Reply

Your email address will not be published. Required fields are marked *