Android Styles and Themes Tutorial

Overview

This documentation explains how to create, define, and apply styles and themes in Android applications. It covers reusable UI styling, inheritance, activity-level themes, Nine-Patch drawables, selectors, gradients, and dialog-style activities with practical XML examples.

Android Design Patterns

Android is one of the most mature mobile platforms, and its UI system is built around well-defined design patterns and guidelines. These patterns exist to ensure applications remain consistent, usable, and performant across different devices and screen sizes.

While developing Android applications, focus on these core principles:

• Applications should be usable and easy to understand
• Visual design should be clean and attractive, without unnecessary complexity
• UI components should remain lightweight and responsive

Following Android’s official design guidelines helps maintain platform consistency and improves long-term maintainability.

Using Custom Styles in Android

Android allows UI customization using styles, which are reusable collections of view attributes. Styles help reduce duplication and centralize UI changes.

A style can define properties such as:

• Layout width and height
• Padding and margins
• Text color and size
• Background drawable
• Typeface and text style

Styles in Android work conceptually similar to CSS in web development.

Defining Styles in XML

Styles are defined inside XML files located in the res/values/ directory.
The root element must always be <resources>.

Example: TextView Without Style

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello_world"
    android:textColor="#006633"
    android:background="#f0f0f0"
    android:typeface="monospace"
    android:textStyle="italic"
    android:padding="5dp" />

This works, but repeating the same attributes across multiple layouts leads to duplication and maintenance issues.

Creating a Reusable Style

Define a style once and reuse it throughout the application.

<style name="MyTextViewStyle">
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">#006633</item>
    <item name="android:typeface">monospace</item>
    <item name="android:background">#f0f0f0</item>
    <item name="android:textStyle">italic</item>
    <item name="android:padding">5dp</item>
</style>

Applying a Style to a View

<TextView
    android:id="@+id/textView2"
    style="@style/MyTextViewStyle"
    android:text="@string/hello_world" />

Any change to the style definition automatically applies to all views using it.

Inheriting Built-in Android Styles

Styles can inherit properties from existing Android platform styles.

<style name="MyTextViewStyle"
    parent="@android:style/TextAppearance.Large">
    <item name="android:textColor">#006633</item>
    <item name="android:typeface">monospace</item>
    <item name="android:background">#f0f0f0</item>
    <item name="android:textStyle">italic</item>
    <item name="android:padding">5dp</item>
</style>

This approach keeps styles minimal and consistent with platform defaults.

Inheriting Custom Styles

Android allows chaining custom styles using dot notation.

<style name="MyTextViewStyle.BoldRed">
    <item name="android:textColor">#FF0000</item>
    <item name="android:textStyle">bold</item>
</style>

This style inherits all properties from MyTextViewStyle and overrides only specific attributes.

Further inheritance example:

<style name="MyTextViewStyle.BoldRed.Big">
    <item name="android:textSize">30sp</item>
</style>

Applying Themes to Activities

A theme is a style applied at the activity or application level.

<style name="MyTheme" parent="android:Theme.Light">
    <item name="android:windowNoTitle">true</item>
    <item name="android:colorBackground">@color/default_bg</item>
</style>

Apply Theme to Entire Application

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

Apply Theme to a Single Activity

<activity
    android:name=".MainActivity"
    android:theme="@style/MyTheme" />

Using Nine-Patch Backgrounds

Nine-patch images allow scalable backgrounds without visual distortion.

Place the .9.png file inside:

res/drawable/ic_green_button.9.png

Define button styles:

<style name="MyButton" parent="android:Widget.Button">
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">#ffffff</item>
    <item name="android:textSize">22sp</item>
</style>

<style name="MyButton.Green">
    <item name="android:background">@drawable/ic_green_button</item>
</style>

<style name="MyButton.Orange">
    <item name="android:background">@drawable/ic_orange_button</item>
</style>

Using Selector Drawables

Selectors allow drawable changes based on view state.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_green_button"
          android:state_pressed="true" />
    <item android:drawable="@drawable/ic_orange_button" />
</selector>

Apply selector as a background in styles or layouts.

Gradient Drawables

Gradients can be defined entirely in XML.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="270"
        android:startColor="#4a557c"
        android:endColor="#62c4e7" />
</shape>

Apply it via style:

<style name="MyButton.Orange.Gradient">
    <item name="android:background">@drawable/my_gradient</item>
</style>

Making an Activity Look Like a Dialog

Android provides built-in dialog themes.

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

For a transparent background:

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