Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to change the layout theme of an Android Application

This article will explain the process to alter the layout theme of an Android application at runtime by accessing a button.

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".

Indicates the New Android Project to be created

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.

Indicates the screen post navigating to Graphical view

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 )
  2. 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.

  3. onActivityCreateSetTheme ( Activity activity )
  4. 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.

    Both screens referring to the application executed in the emulator
    Both screens referring to the application executed 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.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login