Advertisement
Android SDK

Android SDK: Exploring Styles and Themes

by

Styles and themes are time-saving ways to create a consistent look and feel across your Android application. In this tutorial, I’ll cover everything you need to know to apply these useful concepts to your own project. Starting with a quick introduction, this tutorial then demonstrates how to work with the styles and themes that are predefined by the Android platform. Finally, I will walk you through the process of creating your own, both from scratch and by using inheritance.


What Are Styles and Themes?

Styles and themes are essentially the same thing: a collection of properties. These properties can be anything from button color to the "wrap content" attribute or the size of your text. The crucial difference is how they’re applied to your project:

  • A style is applied to a View.
  • A theme is applied to individual activities or an entire application.

Why Should I Use Themes and Styles?

Implementing styles and themes has several benefits.

  1. Efficiency: If you’re going to be using the same collection of attributes throughout your application, defining them in advance turns this:
  2. <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ff0000ff"
         android:textStyle="italic"
        android:typeface="serif"
        android:text="@string/disclaimer" />

    Into this:

    <TextView
        style="@style/disclaimerFont"
        android:text="@string/disclaimer" />
  3. Consistency: Defining a style or theme helps to ensure a consistent look and feel.
  4. Flexibility: When you inevitably come to tweak your UI, you only need to touch the code in one location. This change is then automatically replicated, potentially across your entire application. Styles and themes give you the freedom to quickly and easily update your UI, without touching previously-tested code.

Step 1: Create a Custom Style

Defining and referencing custom styles in Android is similar to using string resources, so we’ll dive straight in and implement a custom style.

Open the res/values/styles.xml file. This is where you’ll define your styles.

android custom style

Ensure the styles.xml file has opening and closing "resource" tags:

<resources>

</resources>

Give your style a unique identifier. In this tutorial, we’ll use "headline":

<style name="headline">

Add your attributes and their values as a list of items.

<item name="android:textStyle">bold</item>

Once you’ve finished adding items, remember the closing tag:

</style>

This is the custom style we’ll use in this tutorial:

<resources>

  	<style name="headline">
   	<item name="android:layout_width">fill_parent</item>
   	<item name="android:layout_height">wrap_content</item>
    	<item name="android:typeface">monospace</item>
    	<item name="android:textColor">#ff0000ff</item>
            <item name="android:textStyle">bold</item>
            <item name="android:textSize">20dp</item>
   </style>
   
</resources>

Step 2: Apply Your Style

Applying a style to a View is easy. Open your layout file, and then locate the View and add:

 <TextView
       	style="@style/headline"
   android:text="Hello, world!" />

Tip: Note the missing ‘android:’ XML prefix. This prefix is omitted because the "headline" style isn’t defined in the android namespace.

Boot up the emulator and take a look at your custom style in action.

apply your style

Step 3: Examine the Predefined Styles

You’ve seen how easy it is to define and apply a custom style, but the Android platform features plenty of predefined styles, too. You can access these by examining the Android source code.

  1. Locate the Android SDK installed on your hard drive and follow the path: platforms/android/data/res/values
  2. Locate the ‘styles.xml’ file inside this folder. This file contains the code for all of Android’s predefined styles.
predefined styles

Step 4: Apply a Default Style

Pick a style to apply. In this example, we’ll use the following:

android textappearance style

Return to your layout file, and add the following to your View:

 <TextView
        android:id="@+id/textView1"
         style="@android:style/TextAppearance.StatusBar.EventContent.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />

Experiment with other default styles to see what different effects can be achieved.


Step 5: Create a themes.xml File

Now that you’re familiar with custom and default styles, we’ll move onto themes. Themes are very similar to styles, but with a few important differences.

Before we apply and define some themes, it’s a good idea to create a dedicated themes.xml file in your project’s "Values" folder. This is especially important if you’re going to be using both styles and themes in your project.

To create this file:

  1. Right-click on the "Values" folder.
  2. Select "New", followed by "Other".
  3. In the subsequent dialog, select the "Android XML Values File" option and click "Next".
  4. Enter the filename "themes" and select "Finish".
create themes.xml

Step 6: Apply a Default Theme

Unlike styles, themes are applied in the Android Manifest, not the layout file.

Pick a theme to work with by opening the ‘themes’ file in platforms/android/data/res/values and scrolling through the XML code. In this example, we’ll use the following:

notitlebar theme

Open the Android Manifest file. Depending on the desired scope of your theme, either apply it to:

A single activity:

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

Or the entire application:

<application android:theme="@android:style/Theme.NoTitleBar"

Finally, check how this looks in the emulator:

android default theme

Step 7: Cut Corners Using Inheritance

Although you can define custom themes from scratch, it’s usually more efficient to extend one of the Android platform’s predefined themes using inheritance. By setting a “parent” theme, you implement all of the attributes of the predefined theme, but with the option of re-defining and adding attributes to quickly create a tailor-made theme.

  1. In values/themes.xml, set the unique identifier as normal, but specify a “parent” theme to inherit from.
  2.  <style name="PinkTheme" parent="android:style/Theme">
         </style>

    Tip. Check platforms/android/data/res/values/themes for parent themes to extend.

  3. Define each attribute that’s being added or modified. In this example we’re implementing the default ‘Theme’ but with a new font colour:
  4.  <style name="PinkTheme" parent="android:style/Theme">
            <item name="android:textColorPrimary">#FF69B4</item>  
        </style>
  5. Open the Android Manifest and locate either the application or activity tag.
  6. Apply your theme:
  7. <application android:theme="@style/PinkTheme">
  8. As always, check your work in the emulator:
  9. custom theme

    Conclusion

    In this tutorial, we covered using the Android platform’s predefined styles and themes as well as creating your own. If you want to learn more about what’s possible with themes and styles, the easiest way is to spend some time browsing through the corresponding files in the platforms/android/data/res/values folder. Not only will this give you an idea of the different effects that can be achieved, but it’s also a good way to find parents that can be extended using inheritance.

Related Posts
  • Code
    Android SDK
    Create a Music Player on Android: Project Setup0d63m preview image@2x
    The Android platform provides resources for handling media playback, which your apps can use to create an interface between the user and their music files. In this tutorial series, we will create a basic music player application for Android. The app will present a list of songs on the user device, so that the user can select songs to play. The app will also present controls for interacting with playback and will continue playing when the user moves away from the app, with a notification displayed while playback elapses.Read More…
  • Code
    Android SDK
    Create a Hangman Game: User InterfaceAndroid hangman game preview retina
    In this series, we are creating a Hangman game for the Android platform. In the first tutorial, we set the application up to present two screens to the user and we also made a start with the user interface elements, the images and shape drawables to be precise. In the second tutorial, we will zoom in on the game's layout.Read More…
  • Code
    Android SDK
    Create a Hangman Game: Project SetupAndroid hangman game preview retina
    In this series, I will show you how to create a simple Hangman game for Android. In every tutorial, you'll learn a number of fundamental skills for creating Android applications. The application will consist of two screens, include user interaction involving adapters, contain dialogs and an action bar, and leverage XML for data storage. Let's get started.Read More…
  • Code
    Android SDK
    Android SDK: User Interface DesignAndroid preview@2x
    In this series we're learning about Android SDK development from scratch! In this tutorial, we will build a simple user interface layout with a few visual elements.Read More…
  • Code
    Android SDK
    Android SDK: Create an Arithmetic Game - Setup and Interface CreationMath game preview@2x
    The Android platform provides the ability to facilitate interaction, to carry out computation, and to save data. To explore some of these basic features with a practical focus, this series will create a simple arithmetic game for the Android platform. The series will involve creating user interface elements and layouts, four Activity classes, and one helper class. The gameplay logic will be relatively complex if you do not have much Java experience, but you will learn to use various Java control structures along the way! Read More…
  • Code
    Android SDK
    Android UI Workshop: Build an Interactive Quiz App Sharon chalk ui preview
    Get a hand’s on, crash course in building an effective and attractive UI for your Android app, and design an interactive quiz app along the way!Read More…