Android Theme Demo Example

0
286

In this chapter, we will be covering a step-to-step guide to use an Android theme in your application. Here, we will be modifying the default AppTheme theme. In here, we will make sure to change the default font, font size, font family, and other details. Let’s begin with the creation of a basic Android application as given in the following steps.

Also Read: Android Styles and Themes

Step 1: Open the Eclipse IDE. Here, create an Android application under the name of ThemeDemo. Put this application under the com.example.themedemo package. This step has already been explained in Hello World Example chapter.

Step 2: Open the main activity file which is named as MainActivity.java. You can easily locate this file under the src/com.example.themedemo/ path. Well, in this file, you will be adding the click event listeners and handlers for the buttons defined in the layout of the application. The file also contains the fundamental lifecycle callback 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;
   }
}

Step 3: Now, you need to define your style in the global style file, which is style.xml. You can locate this file under res/values/ directory. Here, you will be required to define the custom attributes for a button to be used. You will also be changing the default theme of the application to change the text. This is possible by using the already defined CustomButtonStyle theme.

<resources>
   <style name=”AppBaseTheme” parent=”android:Theme.Light”>
   </style>
   <!– Application theme –>
   <style name=”AppTheme” parent=”AppBaseTheme”>
      <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>

Step 4: It’s time to modify the activity_main.xml file. You can easily find this file under res/values/ directory. This file needs to be modified by including a set of required UI controls. Also, you will be making use of the defined style.

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

Step 5: After this, there is a requirement to define the two new constants in the strings.xml file. To locate this file, trace the res/values/ folder.

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

Step 6: Make sure that you leave the default content of the AndroidManifest.xml file untouched. We do not need to modify this file as the theme name has been left as it is. But in case, you define a new theme or inherit the default theme with a new name then do not forget to replace the AppTheme with your new theme 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>

Step 7: Finally, you need to verify all the changes done on the ThemeDemo application. For this final step, you need to have an already created AVD. We are assuming that you must have created it during the environment setup. Now, to run this application on Eclipse IDE, open any of the activity files of your project. After this, go to the toolbar and click on the Run icon. The Eclipse IDE then start installing your ThemeDemo application on your AVD and if everything goes fine then you will be displayed with the final output on the Emulator window. The final output will appear as the following screenshot.