In this post I will be writing about how you can change your current activity to material design.

Material design is a certain set of specifications that allows you to change the look and feel of your app, this is done by maintaining a type of continuity in the design, the appearance of views, activity transitions etc.

With all these news features, what you can do, you change the action bar colour, change the top status bar colour, change the tints on views.

In previous versions changing all these things were quite difficult, but now they are pretty easy and Android has provided guidelines to achieve these.

For this part we will be using AppCompact library for backward compatibility.

Lets first understand the terminology of various sections of activity in styles.xml

Now all these attributes defined above can be customized in styles.xml.

I am now starting on with the view of one of my apps before any customization. Its a wallpaper changer app and available on Android market.

This is just like a normal activity, now lets start customizing it.

Currently your styles.xml might be looking like:

 

<style name=”AppTheme” parent=”AppBaseTheme”>       
</style>

 

Now lets change the actionbar background colour, for this we will use colorPrimary attribute.

<item name=”colorPrimary”>@color/blue</item>

Next we can change the status bar colour. I will make the status bar of same colour.

<item name=”colorPrimaryDark”>@color/blue</item>

Lets try to change the ascent colour also, with this it will change the tint to every widget. I will be attaching a screen-shot of a view with progress bar, and you can see that its colour will be changed.

<item name=”colorAccent”>@color/red</item>

So lets see how our changes look.

 

Do you see some thing here in centre, our progress bar is Red in colour, that’s a tint.

Here is how my final xml looks:

<style name=”AppTheme” parent=”AppBaseTheme”>
        <item name=”windowActionBarOverlay”>true</item>
        <item name=”colorPrimary”>@color/black</item>
        <item name=”colorPrimaryDark”>#00000022</item>
        <item name=”colorAccent”>@color/red</item>
</style>

 

and here is how my final app looks:

 

Hope you guys liked it, don’t forget to share it and follow my Facebook page, for more such content.