As you know, the Android 5.0 Lollipop was released featuring with new UI style called Material Design.
Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. You can find more information, design guidelines about Material Design here: http://www.google.com/design/spec/material-design/introduction.html#introduction-principles
Luckily, Google also provides support library – AppCompat v21 – to allow us to apply Material Design on older Android versions.
A – AppCompat v21 Library
AppCompat v21 library supports following material design features:
- Provide Material Design style for some system widgets (EditText, Spinner, CheckBox, RadioButton, SwitchCompat, CheckedTextView) when using AppCompat theme
- Customize theme colour palette
- CardView – a new View in Android 5.0
- RecyclerView – a new View in Android 5.0 used to display data collection
- Palette – and utility class to extract prominent colours from image
B – Apply Material Design to Pre-Lollipop Devices using AppCompat v21
1 – Set Up
Add following dependencies to Graddle build file:
dependencies {
compile 'com.android.support:appcompat-v7:21.0.+'
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}2 – Apply Material Theme
Opent styles.xml and make your AppTheme inherit from Theme.AppCompat.
You can also customize theme colour palette here
<style name="AppTheme" parent="Theme.AppCompat">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowNoTitle">true</item>
</style>Parallelly, you should create a specific styles.xml file for Android 5.0 (in values-v21 folder), to be able to use all the Material Design features:
<style name="AppTheme" parent="android:Theme.Material.Light">
<item name="android:colorPrimary">@color/colorPrimary</item>
<item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="android:colorAccent">@color/colorAccent</item>
<item name="android:windowNoTitle">true</item>
</style>FYI about the colour attributes:
- colorPrimary: the primary colour of your app, will be applied to the app bar
- colorPrimaryDark: will be applied to the status bar and contextual app bars
- colorAccent: will be applied to some theme UI controls like Checkboxes, RadioButton, EditText,…
3 – Demo using supported system widgets
Now, your project is ready to use Material Design theme.
Here, I added some common views to the activity for a visual demo only:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:hint="Edit Text" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:text="Button"/>
<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:text="Checkbox"/>
<RadioButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:text="Radio Button"/>
</LinearLayout>Demo result:
C – Download Source Code for Apply Material Design to Pre-Lollipop Devices using AppCompat v21
https://drive.google.com/file/d/0Bw3dwdSezn6fWFZvaDJTY21wcEk/view?usp=sharing
http://www.mediafire.com/download/gc918np2et81do8/DemoMaterialDesignBasic.zip
In next post, I’ll introduce about 2 new Views in Android 5.0: CardView and RecyclerView.
