Create simple Material Design application in Android Studio

Introduction:

Google introduced material design in last year’s I/O, Android Material Design which was introduced in Android 5.0 Lollipop version. In Material Design lot of new things were introduced like Material Theme, new widgets, custom shadows and custom animations. In this tutorial we are going to learn the basic steps of Material Design development i.e writing the custom theme.

Demo:

Using this code:

1.Install Android Studio

Download Android Studio and do the necessary steps to install.

2.Let's Start

Open Android Studio and create a new project and select a blank activity to start

3.Material Design Color Customization

Material Design provides set of properties to customize the Material Design Color theme. But we use five primary attributes to customize overall theme.

colorPrimaryDark – This is darkest primary color of the app mainly applies to notification bar background.

colorPrimary – This is the primary color of the app. This color will be applied as toolbar background.

navigationBarColor – This color defines the background color of footer navigation bar.

textColorPrimary – This is the primary color of text. This applies to header title.

4.Create Material Design Color Theme

1.Open res => values => String.xml

<resources>
    <string name="app_name">FirstStudioApp</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="header">Material Design</string>
</resources>

2.Open res => values => colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#0080FF</color>
    <color name="colorPrimaryDark">#045FB4</color>
    <color name="textColorPrimary">#FFFFFF</color>
    <color name="blackColor">#000000</color>
</resources>

3.Open res => values => dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="sixty_dp">60dp</dimen>
</resources>

4.create a values folder for a specific Api Level

res/values-v21/styles.xml (Android Lollipop theme)
res/values/styles.xml  (Normal Android theme)

In values/styles.xml create to styles:

<resources>
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.No                           ActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/blackColor</item>
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>
    <style name="AppTheme" parent="AppTheme.Base"></style>
</resources>

In values-v21/styles.xml create to styles:

<resources>
    <!-- Themes for Android API21 -->
    <style name="AppTheme" parent="AppTheme.Base">
        <item name="android:colorPrimary">@color/colorPrimary</item>
        <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:colorAccent">@color/blackColor</item>
        <item name="android:navigationBarColor">@color/colorPrimaryDark</item>
    </style>
</resources>