Android Styles and Themes Tutorial with Multiple Style Inheritance Examples
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">
<activity android:theme="@style/MyStyle"> <application android:theme="@style/MyStyle">
<activity android:theme="@android:style/Theme.Dialog"> <application android:theme="@android:style/Theme.Dialog">
Contents
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>
<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>
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>
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>
<TextView
style="@style/MyStyleTwo"
android:id="@+id/stdmsg"
android:text="@string/message"/>
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>
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">
<application android:theme="@style/MyStyle">
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>
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">
<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
