Wednesday 5 September 2012

How to apply new theme to whole application in android | Applying theme at run time in android

It is pretty easy to applying new theme to the whole application at run time. First you create a your own custom themes and set it in the java code. Whenever a new theme is applied at run time we have set the same before calling onCreate() and setContentView() method.
See the instructions enjoy coding....

Step-1:
Create  attrs.xml in '.../res/values' folder.


<?xml version="1.0" encoding="utf-8"?>
  <resources>
       <!-- View styles -->
       <attr name="textTitle" format="reference" />
       <attr name="textBody" format="reference" />
       <attr name="buttonText" format="reference"/>
       <attr name="radioButtonText" format="reference"/>
       <attr name="backgroundTheme" format="reference"></attr>
     
 </resources>
Step-2:

Create color.xml in values folder of you project.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="text_color">#2B3856</color>
</resources>


Step-3:

Create styles.xml file in the '.../res/values' folder.



<?xml version="1.0" encoding="utf-8"?>
<resources>
   <style name="small_title_text">
      <item name="android:textSize">20sp</item>
      <item name="android:textColor">#228B22</item>
      <item name="android:textStyle">normal</item>
      <item name="android:paddingBottom">5dip</item>
   </style>
   <style name="small_body_text">
      <item name="android:textSize">16sp</item>
      <item name="android:textColor"> #228B22</item>
      <item name="android:textStyle">normal</item>
      <item name="android:paddingBottom">5dip</item>
   </style>
   <style name="small_button_text">
      <item name="android:textSize">16sp</item>
      <item name="android:textColor"> #228B22</item>
      <item name="android:textStyle">normal</item>
 
   </style>


   <style name="large_title_text">
      <item name="android:textSize">24sp</item>
      <item name="android:textColor"> #228B22</item>
      <item name="android:textStyle">normal</item>
      <item name="android:paddingBottom">5dip</item>
   </style>

   <style name="large_body_text">
      <item name="android:textSize">20sp</item>
      <item name="android:textColor"> #228B22</item>
      <item name="android:textStyle">normal</item>
      <item name="android:paddingBottom">5dip</item>
   </style>
   <style name="large_button_text">
      <item name="android:textSize">20sp</item>
      <item name="android:textColor"> #228B22 </item>
      <item name="android:textStyle">normal</item>

   </style>

   <!--radio button style  -->

   <style name="small_radio_btn_text">
      <item name="android:textSize">16sp</item>
      <item name="android:textColor"> #228B22 </item>
      <item name="android:textStyle">normal</item>
      <item name="android:paddingBottom">5dip</item>
   </style>

   <style name="large_radio_btn_text">
      <item name="android:textSize">20sp</item>
      <item name="android:textColor">#228B22</item>
      <item name="android:textStyle">normal</item>
      <item name="android:paddingBottom">5dip</item>
   </style>

   <style name="default_radio_btn_text">
      <item name="android:textSize">15sp</item>
      <item name="android:textColor"> #228B22 </item>
      <item name="android:textStyle">normal</item>
      <item name="android:paddingBottom">5dip</item>
   </style>

  <!-- Change gray_radient theme -->

  <style name="gray_gradient">
      <item name="android:background"> #C1CDCD </item>
      <item  name="android:padding">2dp</item>
</style>

  <!-- Change radial gradient theme -->

  <style name="radial_gradient">
      <item name="android:background"> #36648B </item>
      <item  name="android:padding">2dp</item>
</style>

  <style name="default_theme">
      <item name="android:background">@drawable/background</item>
      <item  name="android:padding">2dp</item>
</style>


  <!-- Change default theme -->

  <style name="background_default">
      <item name="android:background">@drawable/background</item>
      <item  name="android:padding">2dp</item>
</style>




  <!-- Base application theme is the default theme. -->
  <style name="Theme" parent="android:Theme">
  </style>

  <style name="Theme.SmallText">
     <item name="textTitle">@style/small_title_text</item>
     <item name="textBody">@style/small_body_text</item>
     <item name="buttonText">@style/small_button_text</item>
     <item name="radioButtonText">@style/small_radio_btn_text</item>
 
  </style>

  <style name="Theme.LargeText">
      <item name="textTitle">@style/large_title_text</item>
      <item name="textBody">@style/large_body_text</item>
      <item name="buttonText">@style/large_button_text</item>
      <item name="radioButtonText">@style/large_radio_btn_text</item>
  </style>

  <style name="Theme.DefaultText">
      <item name="backgroundTheme">@style/background_default</item>
      <item name="radioButtonText">@style/default_radio_btn_text</item>
  </style>

  <style name="Theme.Gray">
      <item name="backgroundTheme">@style/gray_gradient</item>
  </style>

  <style name="Theme.Radial">
      <item name="backgroundTheme">@style/radial_gradient</item>
  </style>

  <style name="Theme.DefaultTheme">
      <item name="backgroundTheme">@style/background_default</item>
  </style>

  <style name="PreferencesTheme" parent="android:Theme.Light">
       <item name="android:background">#FFEAEAEA</item>
</style>
 </resources>


Step-4:
Create  questions.xml, 
Then you need to declare you style in your xml file. 


<?xml version="1.0" encoding="utf-8"?>
<ScrollView
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:id="@+id/scroll_view_start_test_for_all"
 android:layout_above="@+id/lin_lay"
 android:layout_below="@+id/top"
 style="?backgroundTheme"
 android:layout_height="fill_parent">
       
           <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingBottom="10dp"
            android:orientation="vertical">
       
     
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="2"
        android:layout_marginTop="10dp"
        android:orientation="horizontal">
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginBottom="10dp"
         android:textStyle="bold"
         style="?textBody"
         android:textColor="@color/text_color"
         android:text="Question No: "/>
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginBottom="10dp"
         android:layout_weight="1.7"
         style="?textBody"
         android:textColor="@color/text_color"
         android:textStyle="bold"
         android:id="@+id/start_all_que_no"/>
   
     </LinearLayout>
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/text_color"
        android:layout_marginBottom="10dp"
        style="?textBody"
        android:id="@+id/start_all_que_detail"
        android:text="@string/question"/>
   
     <RadioGroup
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:id="@+id/group_start_test_for_all"
         android:orientation="vertical">
   
      <RadioButton
       android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textColor="@color/text_color"
          android:id="@+id/rd_option_a_start_test"
          style="?radioButtonText"
         android:text="A: LuckNow" />

       <RadioButton
       android:layout_width="wrap_content"
       android:id="@+id/rd_option_b_start_test"
       android:text="B: Agra"
       style="?radioButtonText"
       android:textColor="@color/text_color"
       android:layout_height="wrap_content"/>

       <RadioButton
       android:layout_width="wrap_content"
       android:id="@+id/rd_option_c_start_test"
       android:textColor="@color/text_color"
       android:text="C: Delhi"
       style="?radioButtonText"
       android:layout_height="wrap_content"/>

       <RadioButton
          android:layout_width="wrap_content"
          android:id="@+id/rd_option_d_start_test"
          android:text="D: Banglore"
          style="?radioButtonText"
          android:textColor="@color/text_color"
          android:layout_height="wrap_content" />
 
     </RadioGroup>
           
</LinearLayout>
   
</ScrollView>




Step-5:

Create a java file 'Utils.java' in you package res/com.example.customTheme



package com.example.com.exampe.changetheme;

import android.app.Activity;
import android.util.Log;

public class Utils {

public static String SIZE="";
public static boolean settingChanged=false;
public static String THEME="";

public static void setThemeToActivity(Activity act )
{

 try {


if (Utils.SIZE.equalsIgnoreCase("LARGE"))
{
   act.setTheme(R.style.Theme_LargeText);
   Log.d(" ", "Theme Large txt size is to be is applied.");
}
if (Utils.SIZE.equalsIgnoreCase("SMALL"))
{
   act.setTheme(R.style.Theme_SmallText);
   Log.d(" ", "Theme Small text Size is to be is applied.");
}

if(Utils.SIZE.equalsIgnoreCase("DEFAULT"))
{
act.setTheme(R.style.Theme_DefaultText);
Log.d("", "theme default text size is applied.");
}

if(Utils.THEME.equalsIgnoreCase("defaultTheme"))
{
act.setTheme(R.style.Theme_DefaultTheme);
Log.d("", "Default theme is to be applied.");
}


if(Utils.THEME.equalsIgnoreCase("Gray"))
{
act.setTheme(R.style.Theme_Gray);
Log.d("", "gray theme is to be applied.");
}

if(Utils.THEME.equalsIgnoreCase("Radial"))
{
act.setTheme(R.style.Theme_Radial);
Log.d("", "radial theme is to be applied.");
}
 

 }
 catch (Exception e) {
e.printStackTrace();
}

}
}


Step-6:

Create Activity file (CustomThemeActivity.java)  and set theme before super.onCreate() and setContentView().


package com.example.com.exampe.changetheme;

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

public class CustomThemeActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
Utils.setThemeToActivity(this);
super.onCreate(savedInstanceState);
setContentView(R.layout.questions);



}

@Override
public void onBackPressed() {
// TODO Auto-generated method stub
super.onBackPressed();
startActivity(new Intent(getBaseContext(), SettingsTheme.class));
CustomThemeActivity.this.finish();
}
}



Step-7:

Create another activity SettingTheme.java


package com.example.com.exampe.changetheme;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class SettingsTheme extends Activity implements View.OnClickListener

{
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
  Utils.setThemeToActivity(this);
  setContentView(R.layout.config);

  findViewById(R.id.button1).setOnClickListener(this);
  findViewById(R.id.button2).setOnClickListener(this);
  findViewById(R.id.button3).setOnClickListener(this);
 }

 public void onClick(View v)
 {
  switch (v.getId())
  {
  case R.id.button1:
      Utils.THEME="DEFAULT";
      Utils.settingChanged=true;
      Utils.SIZE="DEFAULT";
      startActivity(new Intent( SettingsTheme.this,  CustomThemeActivity.class));

   break;
  case R.id.button2:
    Utils.THEME="Gray";
    Utils.settingChanged=true;
    Utils.SIZE="SMALL";
    startActivity(new Intent( SettingsTheme.this,  CustomThemeActivity.class));
   break;
  case R.id.button3:
       Utils.THEME="Radial";
       Utils.settingChanged=true;
       Utils.SIZE="LARGE";
       startActivity(new Intent( SettingsTheme.this,  CustomThemeActivity.class));
       break;
  default :
 break;

  }

 }
     public void onBackPressed() {
  // TODO Auto-generated method stub
  super.onBackPressed();
  startActivity(new Intent( SettingsTheme.this,  CustomThemeActivity.class));
  SettingsTheme.this.finish();

 }

}




Step-8:

Create an xml for SettingActivity - config.xml


<?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"
 style="?backgroundTheme"
 android:layout_height="fill_parent">

 <LinearLayout

  android:layout_width="fill_parent"
  android:orientation="vertical"
  android:gravity="center_vertical"
  android:layout_height="fill_parent">

  <Button
   android:id="@+id/button1"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Default with Normal Text Size"/>

  <Button
   android:id="@+id/button2"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Gray with medium text Size"/>

  <Button
   android:id="@+id/button3"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Radial with Large Size"/>

 </LinearLayout>

</LinearLayout>




You have almost done, run your application

These are the output when you select your theme.







You can also download the source code of this project from here : download zip.file
Hope this will help you to do well.

Regards:

Lalit

12 comments:

  1. HI dear that is nice blog for the android developer thanks to you. http://gangaballia.blogspot.in/

    ReplyDelete
    Replies
    1. Hi,
      can you please post complete Source code in form of eclipse project.
      I am unable to run this..
      Thanx

      Delete
    2. Yeah, Please check back again at the bottom the comment section.
      For any query please let me know.

      Delete
  2. thanks for the blog …very nice and interesting keep posting more…

    ReplyDelete
  3. hii bro , it's very helpful tutorial for us.... great work,,, carry on ...

    ReplyDelete
  4. Android live wallpapers are the most happening things because they give a whole new look to your smartphone. There are few themes that have become extremely popular among the users. If you have an Android smartphone, then these themes are a must have for you mobile price in pakistan

    ReplyDelete
  5. Hi Lalit,
    Nice tutorial.
    Your post is useful in cases where there are pre-defined xml styles in my application and xml layouts. But what should I do in cases where I am creating some layouts of my activity dynamically, which includes Buttons, Checkboxes and other widgets.
    Please share your thought about this.
    Thanks

    ReplyDelete
  6. You could demonstrate the basic principles of this on just one widget, rather than five, and one theme, instead of...I stopped counting...and in so doing greatly cut down on a lot of distracting clutter.

    With all the pixels you save, you could spare some to actually explain what the basic ideas are. Like, what's with the *two* activities?

    ReplyDelete