Android Styles and Themes with Examples

In android, Styles and Themes are used to change the look and feel of Views and appearance of application based on our requirements. By using Styles and Themes we can reduce the code duplication and make our app light & responsive.

Generally, the style is a combination of multiple attributes such as background color, font color, font size, font style, height, width, padding, margin, etc. and it is used to change the look and feel of View or window.

In android, the style is defined in separate XML resource file and we can use that defined style for the Views in XML that specifies the layout. The Styles in android are similar to CSS styles in web design.

Following is the example of defining a TextView control with required style attributes in XML layout file.

<TextView
    android:id="@+id/txtResult"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#86AD33"
    android:textSize="20dp"
    android:textStyle="bold" />

If you observe above code snippet, we defined a TextView control with required style attributes directly in XML layout file.

Suppose if we use same or similar TextView styles in multiple places of our application, then the duplication of code will increase and in future, if we want to change the style of our application, we need to update the same style in all the places and it’s a time consuming process.

We can overcome this problem by defining a style for the particular view and use the same style in all the places wherever it is required in our application.

If we use style attribute we can move all style attributes related to particular view to separate XML resource file and refer that file in XML layout like shown below

<TextView
    android:id="@+id/txtResult"
    style="@style/TextviewStyle"/>

If you observe above code snippet, we removed all style attributes from XML layout and moved those attributes to a style definition called TextviewStyle. In following sections we will see the definition of TextviewStyle attribute.

In android, theme is a style that is applied to an entire activity or app, instead of an individual View like as mentioned above. When we applied a style as a theme, the views in activity or app applies to the all style attributes that supports. For example. If we apply TextviewStyle as a theme for an activity, then the text of all the views in activity appears in a same style.

In simple words, if we use an entry from resource file to style a view, then we can call it as a style. In case if we use an entry from resource file to style an activity or app, then we can call it as a theme.

Android Defining Styles

As we discussed, we need to define a style in separate XML resource file and use that defined style for the Views in XML that specifies the layout.

To define a set of styles, we need to create a new XML file in /res/values directory of our project and the root node of XML file must be a <resources>.

To create a style in XML file, we need to follow below steps.

• We need to add a <style> element in XML file with a name attribute to uniquely identify the style.
• To define an attributes of style, we need add an <item> elements with a name that defines a style attribute and we need to add an appropriate value to each <item> element.

In android, we can define a multiple styles using <style> element with a name attribute to uniquely identify the style in XML file.

Following is the example of defining a style in separate XML file using <style> element.

<resources>
    <style name="TextviewStyle">
        <item name="android:textColor">#86AD33</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">20dp</item>
        <item name="android:padding">10dp</item>
    </style>
</resources>

If you observe above code snippet, we created a style “TextviewStyle” with all required style attributes and we can use same style for multiple views instead of writing the same code multiple times.

Android Apply a Style to View

Once we are done with creation of style, we can use it for the views which is defined in XML layout file with style attribute.

Following is the example of setting a style for the views in XML layout.

<TextView
    android:id="@+id/txtResult"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/TextviewStyle"
    android:text="Welcome to Tutlane"/>

If you observe above code snippet, the style (TextviewStyle) whatever we defined in XML is applied to TextView control using style attribute and we can use the same style for other TextView’s also based on our requirements.

Android Style Inheritance

In android, by using parent attribute in <style> element we can inherit the properties from an existing style and define only the attributes that we want to change or add. We can inherit the styles that we created our self or from the styles that are built into the platform.

Following is the example to inherit android platform’s default TextView style (@android:style/Widget.TextView) and modify it.

<style name="TextviewStyle" parent="@android:style/Widget.TextView">
    <item name="android:textColor">#86AD33</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">20dp</item>
</style>

If you observe above code snippet, we are inheriting built-in platform style Widget.TextView using parent attribute in <style> element.

In android, we can inherit the styles that we defined our self. To inherit our styles we don’t need to use parent attribute, instead we can use dot notation by prefixing the name of the style that we want to inherit to the name of our new style, separated by a period. 

Following is the example of inheriting the style (TextviewStyle) which we defined above and create a new style like as shown below.

<style name="TextviewStyle" parent="@android:style/Widget.TextView">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">#86AD33</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">20dp</item>
    <item name="android:layout_marginTop">12dp</item>
    <item name="android:layout_marginLeft">100dp</item>
</style>
<style name="TextviewStyle.Blue">
    <item name="android:textColor">#0088CC</item>
    <item name="android:textStyle">italic</item>
</style>

If you observe above code snippet, we didn’t used any parent attribute in <style> tag, we used style name TextviewStyle to inherit all the style attributes. The TextviewStyle.Blue style will inherit all the properties from TextviewStyle and overrides the android:textColor and android:textStyle attributes to make the text italic and Blue. The newly created style referenced from Textview as @style/TextviewStyle.Blue.

We can continue inheriting the styles like this as many times by chaining names with periods.

Following is the example to extend Textviewstyle.Blue style to further.

<style name="TextviewStyle" parent="@android:style/Widget.TextView">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">#86AD33</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">20dp</item>
    <item name="android:layout_marginTop">12dp</item>
    <item name="android:layout_marginLeft">100dp</item>
</style>
<style name="TextviewStyle.Blue">
    <item name="android:textColor">#0088CC</item>
    <item name="android:textStyle">italic</item>
</style>
<style name="TextviewStyle.Blue.Background">
    <item name="android:background">#FBBC09</item>
</style>

The TextviewStyle.Blue.Background style will inherit the properties from TextviewStyle and TextviewStyle.Blue styles and it will add a new android:background attribute.

Android Defining Themes

In android, theme is a style that is applied to an entire activity or app, instead of an individual View like as mentioned above. When we applied a style as a theme, the views in activity or app applies to the all style attributes that supports. For example. If we apply TextviewStyle as a theme for an activity, then the text of all the views in activity appears in a same style.

Following is the example of defining a theme in android application.

<color name="custom_theme_color">#b0b0ff</color>
<style name="CustomTheme" parent="Theme.AppCompat.Light">
    <item name="android:windowBackground">@color/custom_theme_color</item>
    <item name="android:colorBackground">@color/custom_theme_color</item>
</style>

The above code overrides windowBackground and colorBackground properties of Theme.AppCompat.Light theme.

To set a theme for particular activity, open AndroidManifest.xml file and write the code like as shown below

<activity android:theme="@android:style/CustomTheme">

In case, if we want to set the theme for all the activities in android application, open AndroidManifest.xml file and write the code like as shown below.

<application android:theme="@android:style/CustomTheme">

Android Styling Color Palette

In android, we can customize the application basic theme colors based on our requirements.

Following is the example of basic material design in android application.

Generally, the above layout defined in styles.xml file like as shown below and it is resides in res/values folder.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

We can customize the application basic theme colors based on our requirements. Now we will see how to use these styles and themes in android applications with examples.

Android Styles and Themes Example

Following is the example of defining a custom styles for controls in LinearLayout to apply a different styles for controls in android application.

Create a new android application using android studio and give names as StylesThemesExample. In case if you are not aware of creating an app in android studio check this article Android Hello World App.

Now we need to define our styles in styles.xml file, for that open styles.xml file from \res\values folder and write the code like as shown below.

styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="TextviewStyle" parent="@android:style/Widget.TextView">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginLeft">100dp</item>
        <item name="android:layout_marginTop">10dp</item>
        <item name="android:textColor">#86AD33</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">20dp</item>
    </style>
    <style name="ButtonStyle" parent="@android:style/Widget.Button">
        <item name="android:layout_width">200dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginLeft">100dp</item>
        <item name="android:layout_marginTop">10dp</item>
        <item name="android:textColor">#FFFFFF</item>
        <item name="android:background">#F1511B</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">15dp</item>
    </style>
    <string name="wlcmsg">welcome to Tutlane</string>
</resources>

If you observe above code, we defined a two styles (TextViewStyle, ButtonStyle) and we can apply these styles for required controls in android application.

Now open an activity_main.xml file from \res\layout path and write the code like as shown below

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="200dp"
        android:textColor="#00ADEF"
        android:textSize="15dp"
        android:text="@string/wlcmsg"/>
    <TextView
        android:id="@+id/TextView2"
        style="@style/TextviewStyle"
        android:text="Welcome to Tutlane"/>
    <Button
        android:id="@+id/btnShow"
        android:text="Click on Button"
        style="@style/ButtonStyle" />
</LinearLayout>

If you observe above code we are referring our styles to required controls using style attribute.

Output of Android Styles and Themes Example

When we run above example using android virtual device (AVD) we will get a result like as shown below.

 This is how we can use the styles and themes in our applications to change the appearance of UI controls by reducing the code duplication.