My Life with Android
Introduction Android Componets UserInterface Advanced UI Data Storage Advanced Concepts Others New Studio

Styles and Themes

A style is a collection of properties that specify the look and format for a View or window.

A style can specify properties such as height, padding, font color, font size, background color, and much more.
A style is defined in an XML resource that is separate from the layout.
For example, by using a style, you can take this layout XML.
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#00FF00"
    android:typeface="monospace"
    android:text="@string/hello" />
And turn it into this:
<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />
All of the attributes related to style have been removed from the layout XML and put into a style definition called CodeFont, which is then applied with the style attribute.
A theme is a style applied to an entire Activity or application, rather than an individual View.

Defining Styles

To create a set of styles, save an XML file in the res/values/ directory of your project. The name of the XML file is arbitrary, but it must use the .xml extension and be saved in the res/values/ folder.The root node of the XML file must be <resources>.For each style you want to create, add a <style> element to the file with a name that uniquely identifies the style (this attribute is required). Then add an <item> element for each property of that style, with a name that declares the style property and a value to go with it (this attribute is required). The value for the <item> can be a keyword string, a hex color, a reference to another resource type, or other value depending on the style property.
EX:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
    </style>
</resources>

Inheritance

The 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 change or add. You can inherit from styles that you've created yourself or from styles that are built into the platform.
For example, you can inherit the Android platform's default text appearance and then modify it:
<style name="GreenText" parent="@android:style/TextAppearance">
        <item name="android:textColor">#00FF00</item>
    </style>
If you want to inherit from styles that you've defined yourself, you do not have to use the parent attribute.
Instead just prefix the name of the style you want to inherit to the name of your new style, separated by a period.
For example, to create a new style that inherits the CodeFont style defined above, but make the color red :
<style name="CodeFont.Red">
        <item name="android:textColor">#FF0000</item>
    </style>
Notice that there is no parent attribute in the <style> tag, but because the name attribute begins with the CodeFont style name (which is a style that you have created), this style inherits all style properties from that style. This style then overrides the android:textColor property to make the text red. You can reference this new style as @style/CodeFont.Red.
You can continue inheriting like this as many times as you'd like, by chaining names with periods.
EX :
You can extend CodeFont.Red to be bigger:
<style name="CodeFont.Red.Big">
        <item name="android:textSize">30sp</item>
    </style>
This inherits from both CodeFont and CodeFont.Red styles, then adds the android:textSize property.
Note : You can't inherit Android built-in styles this way. To reference a built-in style, such as TextAppearance, you must use the parent attribute.
EX:
You might normally place the android:inputType attribute in an <EditText> element, like this:
<EditText
    android:inputType="number"
    ... />
You can instead create a style for the EditText element that includes this property:
<style name="Numbers">
  <item name="android:inputType">number</item>
  ...
</style>
So your XML for the layout can now implement this style:
<EditText
    style="@style/Numbers"
    ... />
Note: Don't forget to prefix the property names in each <item> element with the android: namespace. For example: <item name="android:inputType">.

Applying Styles and Themes to the UI

There are two ways to set a style:
  • To an individual View, by adding the style attribute to a View element in the XML for your layout.
  • Or, to an entire Activity or application, by adding the android:theme attribute to the <activity> or <application> element in the Android manifest.
Apply a style to a View
Here's how to set a style for a View in the XML layout:
<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />
Now this TextView will be styled as defined by the style named CodeFont.
Note: The style attribute does not use the android: namespace prefix.
Apply a theme to an Activity or application
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/CustomTheme">
If you want a theme applied to just one Activity in your application, then add the android:theme attribute to the <activity> tag instead.
For example, you can use the Dialog theme and 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">
For example, you can modify the traditional light theme to use your own color like this:
<color name="custom_theme_color">#b0b0ff</color>
<style name="CustomTheme" parent="android:Theme.Light">
    <item name="android:windowBackground">@color/custom_theme_color</item>
    <item name="android:colorBackground">@color/custom_theme_color</item>
</style>
android:windowBackground attribute only supports a reference to another resource;
Now use CustomTheme instead of Theme.Light inside the Android Manifest:
<activity android:theme="@style/CustomTheme">
Select a theme based on platform version
Newer versions of Android have additional themes available to applications, and you might want to use these while running on those platforms while still being compatible with older versions.
For example, here is the declaration for a custom theme which is simply the standard platforms default light theme. It would go in an XML file under res/values (typically res/values/styles.xml):
<style name="LightThemeSelector" parent="android:Theme.Light">
    ...
</style>
To have this theme use the newer holographic theme when the application is running on Android 3.0 (API Level 11) or higher, you can place an alternative declaration for the theme in an XML file in res/values-v11, but make the parent theme the holographic theme:
<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
    ...
</style>
Now use this theme like you would any other, and your application will automatically switch to the holographic theme if running on Android 3.0 or higher.
Using Platform Styles and Themes
The Android platform provides a large collection of styles and themes that you can use in your applications. You can find a reference of all available styles in the R.style class. To use the styles listed here, replace all underscores in the style name with a period. For example, you can apply the Theme_NoTitleBar theme with "@android:style/Theme.NoTitleBar".

Applying Styles for Individual View

res/values/app_styles.xml
<style name="CustomButtonStyle">
      <item name="android:layout_width">100dp</item>
      <item name="android:layout_height">38dp</item>
      <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">#000000</item>
      <item name="android:gravity" >center</item>
      <item name="android:layout_margin" >3dp</item>
      <item name="android:textSize" >5pt</item>
      <item name="android:background">#70ff106d</item>
      <item name="android:shadowColor" >#70ff106d</item>
   </style>
Applying in your View
<Button
       android:id="@+id/button1"
       style="@style/CustomButtonStyle"
       android:text="Button" />

Applying Styles for Individual View

A theme is a style applied to an entire activity or application, rather than an individual View.
The example show how to define your own theme while extending a platform theme.
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="MyTheme" parent="android:Theme.Light">
        <!--1. Windows Setting -->
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@color/translucent_red</item>
        <item name="android:windowFullscreen">true</item>
       
        <!--2. Override Default Button Style -->
        <item name="android:buttonStyle">@style/MyCustomButton</item>

        <!--3. Override Default TextView Style -->
        <item name="android:textViewStyle">@style/MyCustomTextview</item>
</style>
   

<!--2. Override Default Button Style -->

 <style name="MyCustomButton" parent="android:Widget.Button">
        <item name="android:background">@color/dashboard_title</item>
        <item name="android:textColor">#F00</item>
        <item name="android:padding">8dp</item>
    </style>

<!--3. Override Default Button Style -->

<style name="MyCustomTextview" parent="android:Widget.TextView">
        <item name="android:background">#FF0</item>
        <item name="android:textColor">#FFF</item>
        <item name="android:padding">8dp</item>
    </style>
</resources>