How to change the layout theme of an Android Application

What is Theme?

In any mobile, we have display settings, and the option to set the entire mobile theme such as light blue colour theme, red colour theme or any other colour. This will make the entire mobile functionality with this theme setting.

One needs to understand the style in Android so as to set the theme of an Android application.

Style is an XML file that resides in "project/res/values" directory and usually comprises of settings of appearances. The basic structure of "style.xml" is as below:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="nameOfTheTheme">
        <item name="android:attributeSets">value</item>
    </style>
</resources>

We can notice here that that in the style tag, there is one attribute named "name" which has the value. This value determines the "name of theme", for example, "MyTheme".

The next is an "item" tag that comprises of several attribute sets of views like "android:textColor", " android:textSize" etc. We need to specify this attribute and then write the value corresponding to it. Here is an example of a style.xml file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme">
        <item name="android:textColor">#FF0000</item>
    </style>
</resources>

It can be observed clearly that the name of the style is "My Theme" and the item tag has the attribute "Text Colour” that possesses the value "#FF0000" which is the colour "Red".

The following code needs to be written before the setting of a layout file in "setContentView". This will set the theme while your activity is loading.

activity.setTheme(R.style.MyTheme);
setContentView(R.layout.main);

The application theme will be set before loading layout using the above code. Let us follow the below steps to create the application.

Step1

An Android project needs to be created and name it "ChangeTheme". Now, do a right-click on the project. Select "New -> Android XML File". The below dialog box will get open so that the name of the XML file can be given. Select Resource Type as "Values" and name of the file as "style.xml".

Figure 1:Indicates the New Android Project to be created

Add the below code on opening that file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="FirstTheme" >
        <item name="android:textColor">#FF0000</item>
    </style>
    <style name="SecondTheme" >
        <item name="android:textColor">#00FF00</item>
    </style>
    <style name="Thirdheme" >
        <item name="android:textColor">#0000F0</item>
    </style>
</resources>

It can be seen that, we have created 3 styles namely "FirstThem", "SecondTheme" and "ThirdTheme" with the same attribute "Text Colour". However the colour values are different.

Step 2

Now open your "main.xml" layout file that is residing in "res/layout" directory.

The following code needs to be entered in so as to add 3 buttons and 1 label in it.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello C-Sharp"
 android:textAppearance="?android:attr/textAppearanceLarge" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="First Theme" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Second Theme" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Third Theme" />
</LinearLayout>

After the completion of this code, you need to go to "graphical" view and the following screen will be displayed.

Figure 2: Indicates the screen post navigating to Graphical view

Step3

Open your activity file which in this case is the "ChangeThemeActivity.java" file. This file is located in the "src/package" directory.

The buttons need to be bind and give “OnClickListener” so as to set the theme at runtime. Write the subsequent code in that file in order to do that.

Listing 1: ChangeThemeActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
public class ChangeThemeActivity extends Activity implements OnClickListener
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        Utils.onActivityCreateSetTheme(this);
        setContentView(R.layout.main);
          
                    findViewById(R.id.button1).setOnClickListener(this);
          findViewById(R.id.button2).setOnClickListener(this);
          findViewById(R.id.button3).setOnClickListener(this);
    }
     @Override
     public void onClick(View v) 
     {
          // TODO Auto-generated method stub
          switch (v.getId())
          {
          case R.id.button1:
          Utils.changeToTheme(this, Utils.THEME_DEFAULT);
          break;
          case R.id.button2:
          Utils.changeToTheme(this, Utils.THEME_WHITE);
          break;
          case R.id.button3:
          Utils.changeToTheme(this, Utils.THEME_BLUE);
          break;
          }
     }
}

Let us write the below code in the "Utils" file:

Listing 2: Utils.java

import android.app.Activity;
import android.content.Intent;
public class Utils
{
     private static int sTheme;
     public final static int THEME_DEFAULT = 0;
     public final static int THEME_WHITE = 1;
     public final static int THEME_BLUE = 2;
     /**
      * Set the theme of the Activity, and restart it by creating a new Activity of the same type.
      */
     public static void changeToTheme(Activity activity, int theme)
     {
          sTheme = theme;
          activity.finish();
activity.startActivity(new Intent(activity, activity.getClass()));
     }
     /** Set the theme of the activity, according to the configuration. */
     public static void onActivityCreateSetTheme(Activity activity)
     {
          switch (sTheme)
          {
          default:
          case THEME_DEFAULT:
              activity.setTheme(R.style.FirstTheme);
              break;
          case THEME_WHITE:
              activity.setTheme(R.style.SecondTheme);
              break;
          case THEME_BLUE:
              activity.setTheme(R.style.Thirdheme);
              break;
          }
     }
}

Description

1. changeToTheme ( Activity activity, int theme )
There are two arguments in this method, one is "Activity", that provides this method to identify the activity that has called this method and which theme to change. The other argument is “Theme" id. This is already declared in the beginning of the class and is written below:

public final static int THEME_DEFAULT = 0;
public final static int THEME_WHITE = 1;
public final static int THEME_BLUE = 2;

We declare three constants to identify each of them since we have 3 themes.
2. onActivityCreateSetTheme ( Activity activity )
The method holds the responsibility for setting the theme to the activity. After this, the method will verify which theme to set. It will identify the same by making use of a switch case and will call the "setTheme" method.

Step 4

We are prepared now to run the application. Before that, do have "AVD" (Android Virtual Device) added in your eclipse else go to "Window -> AVD Manager" and add a new AVD device to it.
To begin with the execution, right-click on your "project" and select "Run As -> Android Application" thereby making your application run in the emulator.



Figure 3: Both screens referring to the application executed in the emulator

Conclusion

The tutorial briefed about the process to create styles, to use it as a theme of an application and finally on the way to alter the theme of an application at the time of execution.