Applying Themes and Styles to an Android application


           We use themes to override the default look and feel of an Android application. A theme is a set of styles.Android theme was inspired by CSS styles. We normally separate the styles to CSS file in our web applications, in the same way we are separating Android styles to themes.
By default android comes with many themes which we can directly use. It is also possible to create our own themes. In this tutorial, we are just showing you how to apply an existing theme, how to create our own styles and how to inherit styles.

By default eclipse applies "AppTheme" to the applications.
For example; When we apply "AppTheme" to an application it will display the content as shown below;


The theme is set in the AndroidManifest.xml file using  android:theme property.

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme">

'android:' prefix in the front of the style name means this is a reference to a resource defined by Android. Not the one that is defined in our program.

To apply a different theme we have to change the name of the theme;

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Dialog" >

Theme.Dialog will change the style as shown below;


If we use the android:theme in <application> tag of the manifest file, then the theme will be applied to entire application.

It is possible to apply themes the specific activity. To set a theme to specific activity, we need to use android:theme property inside <activity> tag

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

Instead of separately defining a theme we can directly write the styles in any element tag. For example;

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#FF0000"
    android:typeface="monospace"
    android:text="@string/compiletimeerror.com" />

This time the text will be displayed as shown below;





How create our own style?

Create an Android xml file with name "mystyle" inside /res/values directory.


Define whatever styles you want in the file
Note: <resources> should be the root node

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="mystyle" parent="@android:style/TextAppearance.Small">
        <item name="android:textColor">#008000 </item>
        <item name="android:typeface">sans</item>
        <item name="android:textSize">20sp</item>
    </style>
</resources>
In the above code, "mystyle" is the name of the style. We have to use this name to apply the style.

Now add a <TextView> element in the layout xml file which uses this style

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView2"
        style="@style/mystyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="@string/hello_world" />

</RelativeLayout>

style attribute is used to specify the style which we have created. Example: style="@style/mystyle"

Note: I have defined a string in /res/values/strings.xml already
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Theme</string>
    <string name="hello_world">We use themes to override the default look and feel of an Android application. A theme is a set of styles.Android theme was inspired by CSS styles. We normally separate the styles to CSS file in our web
applications, in the same way we are separating Android styles to themes.
</string>
    <string name="menu_settings">Settings</string>
</resources>

When we run the application the styles we have defined in the mystyle.xml should be applied to the text.




How to Inherit styles?

Just like inheriting a java class, we can reuse existing styles and add/override additional styles in android.
Lets see how to do this using the above application;
Create another android xml file called inherited_style.xml inside /res/values directory. We can inherit the existing "mystyle" using "parent" attribute of <style> tag

<style name="orange" parent="@style/mystyle">
Note: We should have already defined "mystyle". Otherwise the code will show error.
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="orange" parent="@style/mystyle">
        <item name="android:textColor">#FFA500</item>
    </style>
</resources>

We have created a new style called "orange" and inherited the styles from "mystyle". And also we have specified textColor attribute which will override the parent's style.

Lets add one more <TextView> in the layout xml file to use the newly inherited style.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView2"
        style="@style/mystyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="@string/hello_world" />

    <TextView
        android:id="@+id/textview1"
        style="@style/orange"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textView2"
        android:text="@string/hello_world" />

</RelativeLayout>

When we run the application, the first <TextView> should use "mystyle" and the second <TextView> should use "orange". ( "orange" is a inherited style, so this will have its parent's styles too).


It works!!!.

Know how to add options menu here




Reactions:

1 comment :

  1. I need information about Android Game Apps Development and also sample codes for any of the games...

    ReplyDelete