Android Styles and Themes Tutorial with Multiple Style Inheritance

By Arvind Rai, August 16, 2015

This page will walk through the Android Styles and Themes tutorial with multiple style inheritance examples. Here we will cover how to define a style and then how to use it with UI component like EditText, TextView, ListView etc. Styles are defined by user.and Android also provides in-built styles. Styles can be used at view level in layout as well as application and activity level in AndroidManifest.xml. Styles can be inherited from one style to another style. We can inherit android in-built style into user style and can override property if required.
Styles are used in view using attribute style.

<TextView  style="@style/MyStyleOne">

And at Activity and application level, we use attribute as android:theme.

<activity android:theme="@style/MyStyle">
<application android:theme="@style/MyStyle">

If theme is android in-built, it is used as

<activity android:theme="@android:style/Theme.Dialog">
<application android:theme="@android:style/Theme.Dialog">

Define and Apply Styles on UI using @style
Inheritance with Android In-Built Style using parent attribute
Single and Multiple Inheritance with User Style
Theme to an Activity or Application
Use In-Built Theme at Application or Activity Level
Themes for Android Version Specific

Define and Apply Styles on UI using @style

To use style, first create an XML file in res/values with arbitrary name. In our example, we have created a file with the name my_style.xml as follows.
res/values/my_style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name=" MyStyleOne ">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
        <item name="android:textSize">30sp</item>
        <item name="android:background">#ffffff</item>        
    </style>
</resources>

Find the meaning of tags which are being used.
<resources>: This is the root tag to define style. Within this tag we can define more than one style.
<style> : This is the tag which defines the style for a view. The name attribute defines the name of style. It contains items tag.
<item> : Each item tag defines one style attribute.

In our example style code, we have a style with the name MyStyleOne which are being used in res/layout/ activity_main.xml as below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"    
    tools:context=".MainActivity">
    <TextView
        style="@style/MyStyleOne"
        android:id="@+id/stdmsg"
        android:text="@string/message"
        android:textColor="#F44336"/>
</LinearLayout>

We need to take care that style is applied using @style as style="@style/any_style_name". style is the attribute of UI components like TextView, EditText, ListView, Button etc. If any style element has been used repeatedly in view and style xml, then element used in view takes priority. For the example android:textColor has been used in my_style.xml and TextView. UI will show the effect of android:textColor="#F44336" of TextView.

Find the res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Concretepage</string>
    <string name="message">Concretepage.com helps the software developers and interviewees. 
                          Every topic is written with example and concrete explanation. 
                          We write topics mainly on core java, j2ee and java frameworks.
    </string>
</resources>

Find the output

Android Styles and Themes Tutorial with Multiple Style Inheritance Examples

Inheritance with Android In-Built Style using parent attribute

Find the link for Android in-built style Android in-built style. To use android in-built style with our other style elements, we can do as follows in res/values/my_style.xml.

<style name="MyStyleTwo" parent="@android:style/TextAppearance">
     <item name="android:textSize">30sp</item>
     <item name="android:layout_width">fill_parent</item>
     <item name="android:layout_height">wrap_content</item>
</style>

Here we need to observe that we have to use parent attribute of style tag. For the example we are using android in-built style TextAppearance. The way in-built style is used is parent="@android:style/TextAppearance" as style attribute. We can override the style element values too. In TextAppearance style, text size is 16sp, but we have overridden it as 30sp. Now MyStyleTwo style can be used in res/layout/activity_main.xml.

    <TextView
        style="@style/MyStyleTwo"
        android:id="@+id/stdmsg"
        android:text="@string/message"/>

Find the output.

Single and Multiple Inheritance with User Style

To inherit one user style in another style, we have not to use parent attribute. We prefix one style to another style separating by a period(.). Suppose we have a style named as style_one, if we need to inherit it with another style named as style_two, then we can do it as style_one.style_two and if more inheritance needed, suppose for style_three, we can do it as style_one.style_two.style_three. Find the example.
res/values/my_style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="style_one">
        <item name="android:textColor">#C51162</item>
        <item name="android:textSize">30sp</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>        
    </style>
    <style name="style_one.style_two">
        <item name="android:textSize">20sp</item>
        <item name="android:background">#795548</item>                             
    </style>
    <style name="style_one.style_two.style_three">
        <item name="android:textColor">#76FF03</item>    
        <item name="android:background">#004D40</item>                   
    </style>
</resources>

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"    
    tools:context=".MainActivity">
    <TextView
        style="@style/style_one"
        android:id="@+id/stdmsg1"
        android:text="@string/message1"/>    
    <TextView
        style="@style/style_one.style_two"
        android:id="@+id/stdmsg2"
        android:text="@string/message2"/>
    <TextView
        style="@style/style_one.style_two.style_three"
        android:id="@+id/stdmsg3"
        android:text="@string/message3"/>
</LinearLayout>

res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Concretepage</string>
    <string name="message1">Android Styles and Themes Tutorial with Multiple Style Inheritance Examples</string>
    <string name="message2">Concretepage.com helps the software developers and interviewees. 
                          Every topic is written with example and concrete explanation. 
                          We write topics mainly on core java, j2ee and java frameworks.
    </string>
    <string name="message3">Java, Spring, Hibernate, JQuery, quiz,
         interview questions, Windows Tools, Forum 
    </string>
</resources>

Find the output.

Theme to an Activity or Application

Theme is the style which is applied to an activity or application level. Style can be in-built or user defined. Suppose we have a user defined theme as MyStyle which can be used at Activity level as

<activity  android:name=".MainActivity" android:theme="@style/MyStyle">

And at application level, it will be defined as

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

Find the code.
AndroidManifest.xml

    <application android:theme="@style/MyStyle"
        android:allowBackup ="false"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity  android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

res/layout/activity_main.xml

    <TextView
        android:id="@+id/stdmsg1"
        android:text="@string/message1"/>    
    <TextView
        android:id="@+id/stdmsg2"
        android:text="@string/message2"
        android:background="#795548"/>
    <TextView
        android:id="@+id/stdmsg3"
        android:text="@string/message3"
        android:background="#004D40"/>

res/values/my_style.xml

<resources>
    <style name="MyStyle">
        <item name="android:textColor">#C51162</item>
        <item name="android:textSize">30sp</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>        
    </style> 
</resources>

Find the output

Use In-Built Theme at Application or Activity Level

Android in-built theme can also be used at application and activity level in AndroidManifest.xml. To apply theme at application level, do as below.

<application android:theme="@android:style/Theme.Dialog">

And to apply theme at Activity level do as below.

<activity android:theme="@android:style/Theme.Dialog">

Themes for Android Version Specific

To support android newer version and older version in-built theme, we need to create folder parallel to res/values. Suppose we have to support in-built theme introduced in 16 version and 19 version. So first we will create folder with pattern as res/values-v16 and then inside it we will create style XML file. Folder and file structure will look like.

res/values/style.xml
res/values-v16/style.xml
res/values-v19/style.xml

Download Source Code

android-styles-and-themes-tutorial-with-multiple-style-inheritance-examples.zip

POSTED BY

ARVIND RAI

LEARN MORE

JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5