Android Style Resources – Tutorial

Android Style resources are very important to learn in order to manage our applications. Android is one of the top mobile operating system and it has efficient and generic features for its developers. We have different elements in our XML and each one have its own style. It is recommended that the elements of same functionality should have same look to match the colors and design of the theme of application. Lets say we have ten buttons in our application and all of them have same color, design and size. One way to do this is to copy the size, colors and design attributes of one element and paste it in other element and so on. In this way, we are repeating similar styles for each element and it will keep on repeating as number of elements increase. Later on if we have to change any attribute’s value, we will need to do this for all the elements.

Android Style Resources

Android Studio has come with an efficient way to assign similar styles to more than one elements. There are custom android style resources where we can define common styles for different elements and use those styles in different elements. In this way we would just need to refer to that style resource from elements in XML in order to use it. And if we have to change any thing (like color, size etc.), we will just do it in style resource and it will effect all the element where this style was used.

For example we have a button having different attributes for its styling as shown below.

<Button
    android:layout_width="150dp"
    android:layout_height="60dp"
    android:text="OK"
    android:textSize="30dp"
    android:id="@+id/myButton"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true" />

Now we will copy the whole code and paste it again and again to make more button of same styles. But if we make a resource of this button style, we would not have to repeat that again, but just a reference to that style resource as shown below.

<Button
    android:id="@+id/myButton2"
    style="@style/MyButtonStyle"
    android:layout_below="@+id/myButton"
     />

I have added the id because it can’t be same of more than one elements. Right now it will not work, because we have not made our style with name MyButtonStyle. So, lets see how we can create custom style for the button to use it every where.

Go to the main app project > res > values and open the styles.xml file as shown in the image below.

In this file you will see a resource tag having a default style tag having no items within it. In order to create a style for our button, we need to create a new style tag within the resource tag. So within the style tag we need to add one item tag for each attribute’s property. You just add the following code within the resource tag (but not inside any other style tag).

<style name="MyButtonStyle" >
    <item name="android:layout_width">150dp</item>
    <item name="android:layout_height">60dp</item>
    <item name="android:textColor">#ff2818</item>
    <item name="android:textSize">30dp</item>
    <item name="android:text">OK</item>
</style>

You can here the name attribute of item tag should be the attribute type of element and inside it, there should be the value of that item name. After saving this file, if you go back to activity_main.xml (or any other xml file) and see the button where we added style attribute as style=”@style/MyButtonStyle”. That button will get the width, height, textColor, textSize and text property from the style resource as shown in the image below.

Note: We can override attributes that are written in the styles any where in our element. Like if we want to change text color of one button but have same functionality defined in the style, we can write some thing like android:textColor=”#fd2818″ again in button element to override it.

We can inherit the pre written style items in a new style tag. We want to remove repetition in the code. So, the style items that are already defined should not be defined again but use pre written style items and having its own items as well. Now what you need to do is to add a new style tag, just below the MyButtonStyle and name it as MyButtonStyle.Background as given below.

<style name="MyButtonStyle.Background">
    <item name="android:background">#3ca84f</item>
</style>

Now in the activity_main.xml (or your own activity), add a new button below the previous two buttons with the following attributes.

<Button
    android:id="@+id/myButton3"
    style="@style/MyButtonStyle.Background"
    android:layout_below="@+id/myButton2"/>

You can see in the above code, I have assigned a style MyButtonStyle.Background to it. It will inherit the style of MyButtonStyle plus the style defined in MyButtonStyle.Background as shown in the image below.

You can do multiple inheritance as long as you want (in order to get rid of repetition of styles in styles.xml file).

Note: If you have common background image for buttons (or other elements), define it in the styles too rather then setting a background image to each element in your activity.

So, this was all on Custom Android Style Resource. I hope that you have got the idea of what is the benefit of styles and how to define them. These are some standards that we need to follow while developing apps and style is one of them. So, I would recommend you to follow this styling technique in every application that you develop and also see the styles and theme article by android officials. If any body have any question or want to share more on this topic, just comment below this post. Thank you 🙂