How to inherit from other styles or how to extend your own styles in android?

By | April 17, 2012

Hello all….
I have covered many tutorials on styles on how to implement and use them.
Today I will show you how to inherit from other styles or how to extend a style already created by you and use it for applying to other views.

Here is one of my previous posts.
http://www.coderzheaven.com/2012/02/03/changing-the-style-or-theme-of-default-alertdialog-in-android/
Another one is here..
http://www.coderzheaven.com/2011/06/19/styling-text-in-android-through-xml/

OK We will start now.

First I will show you my main.xml
It contains only one simple textview.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

<TextView    
	 android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="Hello World, Coderzheaven"
 />
   
</LinearLayout>

OK now we are going to apply a style to the textview, for that I am creating a file named “styles.xml” inside the values folder.
And inside the styles.xml copy this code.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="RedLabel">
		<item name="android:layout_width">fill_parent</item>
		<item name="android:layout_height">wrap_content</item>
		<item name="android:typeface">monospace</item>
		<item name="android:background">#F00</item>
		<item name="android:textColor">#FFF</item>
	</style>
</resources>
[xml]


Now we will apply this style to the textview like this -> by providing it as style to the textview in the xml.
[xml]
<TextView    
	 android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="Hello World, Coderzheaven"
     style="@style/RedLabel"
     />

Now we will create another style and name it ButtonStyle aand apply it to a button. But the main thing is that this new style is inherited from the style we previously created. i.e the first style will be the parent of the second thus extending the first one. Our styles.xml will look like this now.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="RedLabel">
		<item name="android:layout_width">fill_parent</item>
		<item name="android:layout_height">wrap_content</item>
		<item name="android:typeface">monospace</item>
		<item name="android:background">#F00</item>
		<item name="android:textColor">#FFF</item>
	</style>
	
 	<style name="ButtonStyle" parent="RedLabel">
		<item name="android:layout_width">wrap_content</item>
		<item name="android:layout_height">wrap_content</item>
		<item name="android:textSize">15px</item>
		<item name="android:typeface">serif</item>
	</style>

</resources>

Now we will apply this style to a button inside the main.xml(Do this after placing a button control inside main.xml)

Our new main.xml will now look like this.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

<TextView    
	 android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="Hello World, Coderzheaven"
     style="@style/RedLabel"
     />
 
 <Button    
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="This is a button"
     style="@style/ButtonStyle"
 />   
</LinearLayout>

i.e. We can extend this second style and soon. That’s the power of styles in xml.

This the main java file. Actually we don’t need this .

package com.coderzheaven.pack;

import android.app.Activity;
import android.os.Bundle;

public class StyleDemo extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Please leave your valuable comments on this post so that I can improve it.

One thought on “How to inherit from other styles or how to extend your own styles in android?

  1. Pingback: Changing the style or theme of default alertDialog in Android.

Leave a Reply

Your email address will not be published. Required fields are marked *