Android - SPLessons

Android Style Theme

Chapter 12

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Android Style Theme

Android Style Theme

Android Style Theme explains how android supports customizing view and widgets by applying styles & themes. A style is a collection of properties that specifies the look and format for a view or widget. A style can specify properties such as height, padding, font color, font size, background color, and much more. In this chapter, we will explain you how to use styles and themes in applications with examples and code snippets.

Android Styles:

You can style a View(Button) in the following way:

Ex:


<Button
         android:id="@+id/button2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@+id/button1"
         android:layout_centerHorizontal="true"
         android:layout_marginTop="49dp"
         android:textColor="#000000"
         android:background="#009ACD"
         android:typeface="monospace"
         android:textStyle="italic"
         android:padding="20dp"
         android:text="Button"/>

The below code shows how to use the same style for Button at multiple places in your application:

<Button
    android:id="@+id/button2"
    style="@style/MyStyle2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/button1"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="49dp"
    android:text="Button2" />

And create Mystyle2 under res/values/style.xml folder.

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="MyStyle2">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#000000</item>
        <item name="android:typeface">monospace</item>
        <item name="android:background">#009ACD</item>
        <item name="android:textStyle">italic</item>
        <item name="android:padding">20dp</item>
        <item name="android:textSize">25sp</item>
    </style>
</resources>

Inheriting Built-in StylesThe parent attribute in the <style> element lets you specify a style from which your style should inherit properties. You can use this to inherit properties from an existing style and then define only the properties that you want to add. Also, you can inherit from styles that you’ve created yourself or from styles that are built into the platform.

Below code shows how to inherit the android platform’s default text appearance and then modify it @android:style/TextAppearance.Large

&amp;amp;lt;style name="MyStyle3" parent="@android:style/TextAppearance.Large"&amp;amp;gt;
    &amp;amp;lt;item name="android:layout_width"&amp;amp;gt;fill_parent&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:layout_height"&amp;amp;gt;wrap_content&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:textColor"&amp;amp;gt;#000000&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:typeface"&amp;amp;gt;monospace&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:background"&amp;amp;gt;#009ACD&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:textStyle"&amp;amp;gt;italic&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:padding"&amp;amp;gt;20dp&amp;amp;lt;/item&amp;amp;gt;
&amp;amp;lt;/style&amp;amp;gt;

Android Themes:

A theme is a style applied to an entire activity or application, rather than an individual View. The technique for defining a theme is the same as defining a style.

&amp;amp;lt;!-- Application theme. --&amp;amp;gt;
&amp;amp;lt;style name="AppTheme" parent="android:Theme.Light"&amp;amp;gt;
    &amp;amp;lt;!-- All customizations that are NOT specific to a particular API-level can go here. --&amp;amp;gt;
    &amp;amp;lt;item name="android:windowNoTitle"&amp;amp;gt;true&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:background"&amp;amp;gt;@color/Moccasin&amp;amp;lt;/item&amp;amp;gt;
&amp;amp;lt;/style&amp;amp;gt;

The above code overrides the default android Theme:Light theme and overrides android:windowNoTitle property.
In order to set a theme for all the activities of your application, open the AndroidManifest.xml file and edit the <application> tag to include the android:theme attribute with the style name. For example:

<application android:theme="@style/MyTheme">

If you want a theme to be applied to just one Activity in your application, then add the android:theme attribute to the <activity> tag.

You can use the Dialog theme to make your Activity appear like a dialog box.

<activity android:theme="@android:style/Theme.Dialog">

Or if you want the background to be transparent, use the translucent theme.

<activity android:theme="@android:style/Theme.Translucent">

Ex:

Create MainActivity.java under src/<your packagename>.

MainActivity.java:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

}

Create activity_main.xml under res/layout.

activity.xml:

&amp;amp;lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" &amp;amp;gt;

    &amp;amp;lt;Button
        android:id="@+id/button1"
        style="@style/MyStyle1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:text="Button1" /&amp;amp;gt;

    &amp;amp;lt;Button
        android:id="@+id/button2"
        style="@style/MyStyle2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="26dp"
        android:text="Button2" /&amp;amp;gt;

    &amp;amp;lt;Button
        android:id="@+id/button3"
        style="@style/MyStyle3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/button2"
        android:layout_below="@+id/button2"
        android:layout_marginTop="42dp"
        android:text="Button3" /&amp;amp;gt;

&amp;amp;lt;/RelativeLayout&amp;amp;gt;

Under res/values/styles.xml use the following code.

styles.xml:

&amp;amp;lt;resources xmlns:android="http://schemas.android.com/apk/res/android"&amp;amp;gt;

    &amp;amp;lt;!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    --&amp;amp;gt;
    &amp;amp;lt;style name="AppBaseTheme" parent="android:Theme.Light"&amp;amp;gt;

    &amp;amp;lt;/style&amp;amp;gt;

    &amp;amp;lt;!-- Application theme. --&amp;amp;gt;
    &amp;amp;lt;style name="AppTheme" parent="android:Theme.Light"&amp;amp;gt;
        &amp;amp;lt;!-- All customizations that are NOT specific to a particular API-level can go here. --&amp;amp;gt;
         &amp;amp;lt;item name="android:windowNoTitle"&amp;amp;gt;true&amp;amp;lt;/item&amp;amp;gt;
         &amp;amp;lt;item name="android:background"&amp;amp;gt;@color/Moccasin&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;/style&amp;amp;gt;

   &amp;amp;lt;style name="MyStyle1"&amp;amp;gt;
    &amp;amp;lt;item name="android:layout_width"&amp;amp;gt;fill_parent&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:layout_height"&amp;amp;gt;wrap_content&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:textColor"&amp;amp;gt;#FFFFFF&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:typeface"&amp;amp;gt;monospace&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:background"&amp;amp;gt;#009ACD&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:textStyle"&amp;amp;gt;bold&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:padding"&amp;amp;gt;10dp&amp;amp;lt;/item&amp;amp;gt;
   &amp;amp;lt;/style&amp;amp;gt;

   &amp;amp;lt;style name="MyStyle2"&amp;amp;gt;
    &amp;amp;lt;item name="android:layout_width"&amp;amp;gt;fill_parent&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:layout_height"&amp;amp;gt;wrap_content&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:textColor"&amp;amp;gt;#000000&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:typeface"&amp;amp;gt;monospace&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:background"&amp;amp;gt;#009ACD&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:textStyle"&amp;amp;gt;italic&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:padding"&amp;amp;gt;20dp&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:textSize"&amp;amp;gt;25sp&amp;amp;lt;/item&amp;amp;gt;
   &amp;amp;lt;/style&amp;amp;gt;

     &amp;amp;lt;style name="MyStyle3" parent="@android:style/TextAppearance.Large"&amp;amp;gt;
    &amp;amp;lt;item name="android:layout_width"&amp;amp;gt;fill_parent&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:layout_height"&amp;amp;gt;wrap_content&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:textColor"&amp;amp;gt;#000000&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:typeface"&amp;amp;gt;monospace&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:background"&amp;amp;gt;#009ACD&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:textStyle"&amp;amp;gt;italic&amp;amp;lt;/item&amp;amp;gt;
    &amp;amp;lt;item name="android:padding"&amp;amp;gt;20dp&amp;amp;lt;/item&amp;amp;gt;    

   &amp;amp;lt;/style&amp;amp;gt;

   &amp;amp;lt;color name="Moccasin"&amp;amp;gt;#FFE4B5&amp;amp;lt;/color&amp;amp;gt;

&amp;amp;lt;/resources&amp;amp;gt;

AndroidManifest.xml:

&amp;amp;lt;?xml version="1.0" encoding="utf-8"?&amp;amp;gt;
&amp;amp;lt;manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.spl.myproject"
    android:versionCode="1"
    android:versionName="1.0" &amp;amp;gt;

    &amp;amp;lt;uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="16" /&amp;amp;gt;

    &amp;amp;lt;application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" &amp;amp;gt;
        &amp;amp;lt;activity
            android:name="com.spl.myproject.MainActivity"
            android:label="@string/app_name" &amp;amp;gt;
            &amp;amp;lt;intent-filter&amp;amp;gt;
                &amp;amp;lt;action android:name="android.intent.action.MAIN" /&amp;amp;gt;

                &amp;amp;lt;category android:name="android.intent.category.LAUNCHER" /&amp;amp;gt;
            &amp;amp;lt;/intent-filter&amp;amp;gt;
        &amp;amp;lt;/activity&amp;amp;gt;
    &amp;amp;lt;/application&amp;amp;gt;

&amp;amp;lt;/manifest&amp;amp;gt;

Output: