How to apply Material Design to your app

Changes HDDMigration to be made from Holo to Material.

The Android 5.0 SDK was released(if you want know step by step guide to installing it) last Friday, featuring new UI widgets and material design, our visual language focused on good design. To enable you to bring your latest designs to older Android platforms we have expanded our support libraries, including a major update to AppCompat, as well as new RecyclerView, CardView and Palette libraries.

In this post we'll take a look at what’s new in AppCompat and how you can use it to support material design in your apps.

We will go Step by Step to make changes for Material Design:

From ActionbarCompact to AppCompactv21

AppCompat (aka ActionBarCompat) started out as a backport of the Android 4.0 ActionBar API for devices running on Gingerbread, providing a common API layer on top of the backported implementation and the framework implementation. AppCompat v21 delivers an API and feature-set that is up-to-date with Android 5.0.

Three things to lookout or there might be three situations we need to consider.

Setting up the things first to migrate to appcompact v21:

Migrating from holo to material.

If you have followed the guidelines correctly then you don't require to change lots of thing in your app for migration.

A)Open the values Folder that contains the Themes.xml file and change accordingly.

values/themes.xml:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
    <!-- Set AppCompat’s actionBarStyle -->
    <item name="actionBarStyle">@style/MyActionBarStyle</item>

    <!-- Set AppCompat’s color theming attrs -->
    <item name=”colorPrimary”>@color/my_awesome_red</item>
    <item name=”colorPrimaryDark”>@color/my_awesome_darker_red</item>
    
    <!-- The rest of your attributes -->
</style>

Note:

B)If you are using gradle , add appcompat as a dependency in your build.gradle file:

just paste the below code in dependency

dependencies {
    compile "com.android.support:appcompat-v7:21.0.+"
}

 C) Now you can remove all other actionbar styles.

2)Apply themes using new color palette attributes:
Checkout the new colors added in Android 5.0 Lollipop

D)Copy the code the themes,xml in values folder.

<!-- colorAccent is used as the default value for colorControlActivated,
         which is used to tint widgets -->
    <item name=”colorAccent”>@color/accent</item>

    <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight, and colorSwitchThumbNormal. -->

In the next post we will look at how to create a Actionbar from scratch using the latest Material Design.

We would ask you to try this things and comments if you face with some problems,
Please like and share with other dev who are willings to try this out too!

Happy developing!Happy Coding!