Android - Theme Demo Example

Following example demonstrates how you can use a theme for an application. For demo purpose we will modify our default AppTheme wehere default text, its size, family, shadow etc will be changed. Let's start with creating a simple Android application as per the following steps −

Following is the content of the modified main activity file src/com.example.themedemo/MainActivity.java. This file can include each of the fundamental lifecycle methods.

package com.example.themedemo;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      
      //--- find both the buttons---
      Button sButton = (Button) findViewById(R.id.button_s);
      Button lButton = (Button) findViewById(R.id.button_l);
      
      // -- register click event with first button ---
      sButton.setOnClickListener(new View.OnClickListener() {
         public void onClick(View v) {
            // --- find the text view --
            TextView txtView = (TextView) findViewById(R.id.text_id);
            
            // -- change text size --
            txtView.setTextSize(20);
         }
      });
      
      // -- register click event with second button ---
      lButton.setOnClickListener(new View.OnClickListener() {
         public void onClick(View v) {
            // --- find the text view --
            TextView txtView = (TextView) findViewById(R.id.text_id);
            
            // -- change text size --
            txtView.setTextSize(24);
         }
      });
   }
   
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
      getMenuInflater().inflate(R.menu.main, menu);
      return true;
   }
}

Following will be the content of res/values/style.xml file which will have addition style CustomButtonStyle defined −

<resources>

   <!--
      Base application theme, dependent on API level. This theme is replaced
      by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
   -->
	
   <style name="AppBaseTheme" parent="android:Theme.Light">
     <!--
         Theme customizations available in newer API levels can go in
         res/values-vXX/styles.xml, while customizations related to
         backward-compatibility can go here.
      -->
   </style>

   <!-- Application theme. -->
   <style name="AppTheme" parent="AppBaseTheme">
      <!-- All customizations that are NOT specific to a particular API-level can go here. -->
      <item name="android:capitalize">characters</item>
      <item name="android:typeface">monospace</item>
      <item name="android:shadowDx">1.2</item>
      <item name="android:shadowDy">1.2</item>
      <item name="android:shadowRadius">2</item>
      <item name="android:textColor">#494948</item>/> 
      <item name="android:gravity" >center</item>
      <item name="android:layout_margin" >3dp</item>
      <item name="android:textSize" >5pt</item>
      <item name="android:shadowColor" >#000000</item>
   </style>
    
   <!-- Custom Style defined for the buttons. -->
   <style name="CustomButtonStyle">
      <item name="android:layout_width">100dp</item>
      <item name="android:layout_height">38dp</item>
   </style>

</resources>

Following will be the content of res/layout/activity_main.xml file −

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

   <Button 
      android:id="@+id/button_s"
      style="@style/CustomButtonStyle"
      android:text="@string/button_small"
      android:onClick="doSmall"/>
    
   <Button 
      android:id="@+id/button_l"
      style="@style/CustomButtonStyle"
      android:text="@string/button_large"
      android:onClick="doLarge"/>

   <TextView
      android:id="@+id/text_id"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:capitalize="characters"
      android:text="@string/hello_world" />

</LinearLayout>

Following will be the content of res/values/strings.xml to define two new constants −

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="app_name">ThemeDemo</string>
   <string name="action_settings">Settings</string>
   <string name="hello_world">Hello world!</string>
   <string name="button_small">Small Font</string>
   <string name="button_large">Large Font</string>
</resources>

Following is the default content of AndroidManifest.xml. Here we do not need to change anything because we kept out theme name unchanged. But if you define fresh new theme or inherit a default them with different name then you will have to replace AppTheme name with the new them name.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.guidemo"
   android:versionCode="1"
   android:versionName="1.0" >
   
   <uses-sdk
      android:minSdkVersion="8"
      android:targetSdkVersion="17" />
      
   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name="com.example.guidemo.MainActivity"
         android:label="@string/app_name" >
            
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
         
      </activity>
      
   </application>
</manifest>

Let's try to run your ThemeDemo application. I assume you had created your AVD while doing environment setup. To run the app from Eclipse, open one of your project's activity files and click Run icon from the toolbar. Eclipse installs the app on your AVD and starts it and if everything is fine with your setup and application, it will display following Emulator window −

Kickstart Your Career

Get certified by completing the course

Get Started