Android - SPLessons
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: [code lang="xml"] &amp;amp;lt;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"/&amp;amp;gt; [/code] The below code shows how to use the same style for Button at multiple places in your application: [code lang="xml"] &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="49dp" android:text="Button2" /&amp;amp;gt; [/code] And create Mystyle2 under res/values/style.xml folder. [code lang="xml"] &amp;amp;lt;resources xmlns:android="http://schemas.android.com/apk/res/android"&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;/resources&amp;amp;gt; [/code] 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 [code lang="xml"] &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; [/code] 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. [code lang="xml"] &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; [/code] 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: [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; } } [/java] Create activity_main.xml under res/layout. activity.xml: [code lang="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; [/code] Under res/values/styles.xml use the following code. styles.xml: [code lang="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; [/code] AndroidManifest.xml: [code lang="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; [/code] Output: