Android From Scratch: Creating Styles and Themes

by:

Web Development

As Android developers, we tend to focus primarily on the functionality of our apps. Functionality alone, however, is rarely enough. On Google Play, which hosts well over a million apps today, looks are just as important as functionality, if not more. If you find that hard to believe, I suggest you take a quick look at the apps in the Top Charts section of Google Play.

There are two approaches to modifying the look of Android apps. The first approach involves directly modifying the properties of views in layout XML files. This approach is feasible only if you are working on a simple app that has a small number of views and activities. The second approach involves creating and using custom styles and themes. If you are familiar with web development, the first approach is akin to using inline CSS styles, and the second approach is akin to using style sheets.

In this tutorial, you’ll learn how to create custom styles and themes for your Android apps. You’ll also learn how styles and themes are different from each other and how to use them properly.

1. Creating Styles

Styles are obviously applied to UI components. Therefore, let’s start by creating a new empty activity and adding two TextView elements to its layout XML file.

As you can see in the above code, properties such as layout_width, layout_height, and layout_marginStart etc. are explicitly included in the definition of each view and they have the exact same value. Lets say you wanted to change the layout_marginStart value for these TextView elements. You will have to make changes in two different places for it to work. The situation would get worse if there were more such elements.

One way to avoid the duplication and make the styling of these Views easier is to define a separate style that holds the values of all these common attributes. You can do so by right clicking on the TextView and selecting Refactor > Extract > Style.

Style Refactoring Context MenuStyle Refactoring Context MenuStyle Refactoring Context Menu

You will now see a dialog where you can give a name to the style and also select the attributes that should be included in it. Let the name be LeftAlignedView and select all the attributes except layout_marginTop.

Style Refactor PopupStyle Refactor PopupStyle Refactor Popup

When you press OK, you’ll see that the code for the first view has changed.

The TextView now has a style attribute that points to the LeftAlignedView style. You can take a look at the definition of the style by opening res/values/styles.xml.

Once a style has been created, you can apply it to any view. For example, here’s how you would apply LeftAlignedView to the second TextView:

Now, lets say you want to change the layout_marginStart value for both the TextView elements to 20dp. You could simply make the change in a single place and the layout would update accordingly as shown below:

TextView Styles marginStart ValuesTextView Styles marginStart ValuesTextView Styles marginStart Values

2. Extending Styles

Android allows you to create styles that use other styles as a foundation. In other words, it allows you to extend existing styles. There are two different syntaxes you can follow while extending a style.

The first syntax is often called the implicit syntax and uses a dot notation. For example, here’s how you create two derived styles, called PrimaryText and SecondaryText, using LeftAlignedView as the parent style:

As you might have guessed, both LeftAlignedView.PrimaryText and LeftAlignedView.SecondaryText have all the properties of LeftAlignedText. In addition to those, they have the android:textColor property.

The second syntax for creating a derived style is usually referred to as the explicit syntax. It involves using a parent attribute whose value is set to the name of the parent style. Here’s a code snippet that defines a style called PrimaryText and SecondaryText.

You should note that we have not supplied any hardcoded colors or direct resource references when specifying the value of textColor attribute. This makes it easier to switch the styling of the whole app at once by switching themes. We will learn how to do that in the next section.

Applying derived styles is no different from applying normal ones.

Most developers use the implicit syntax while extending their own styles, and the explicit syntax while extending platform styles.

You can also use a lot of other predefined styles with your views. For example, you can use the textAppearance attribute and set its value to @style/TextAppearance.AppCompat.Display2 in order to apply a bunch of predefined typography styles. Take a look at the source file to see the rules applied when different styles are used.

Inherited TextView StylesInherited TextView StylesInherited TextView Styles

3. Creating Themes

All this while, we’ve only been applying styles to views that are inside an activity. Android allows you to apply styles to entire activities and applications too. When a style is applied to an activity or application, it becomes a theme.

You can find the theme file for your app by navigating to app > res > values > themes > themes.xml. Here are the default contents of the themes.xml file:

All apps created using the latest version of Android Studio use a theme called Theme.MaterialComponents.DayNight.DarkActionBar. This theme along with many others is part of the Material Design Components library. There are other possible values that you can specify for the parent theme like Theme.MaterialComponents.Light.DarkActionBar etc.

The theme file also contains a list of items which specify values for different attributes such as colorPrimary, colorSecondary, colorOnPrimary etc. They determine the primary and secondary brand colors for your app. The attributes which include the word “On” determine the color of text and icons drawn on different surfaces. For example, the value of colorPrimary attribute in the above theme is purple_500 which translates to #6200EE and the colorOnPrimary has the value white which translates to #FFFFFF. This means that a regular button created using this theme will have a purple background and white text.

We can define another theme that uses a different color scheme by using the following code:

The color resources are defined in the another file called colors.xml. You can find it by navigating to res > values > colors.xml. Here are its contents:

You don’t have to necessarily specify a value for all the color attributes in your file. The value for any color attributes that are missing from your theme file will be inherited from the parent theme. Your theme file could also have the following content:

4. Applying Themes

Before we apply the theme we created, let us add a few commonly used views to the activity. Doing so will make it easier for us to notice the effects of the theme.

The following code creates some very large, large and normal sized TextView elements. It also adds EditText, Button and CheckBox elements to the UI.

With all the newly added views, the layout will look like this:

Default Activity ThemeDefault Activity ThemeDefault Activity Theme

As you can see, the activity currently uses the default theme where the primary color shades are derived from purple  and secondary color shades are derived from teal.

To apply Theme.StyleRedBlue, the theme we created in the previous section, to your activity, open your project’s manifest file and add an android:theme attribute to the activity’s definition. Set its value to @style/Theme.StyleRedBlue.

Similarly, you can apply the theme to your entire application by setting the value of the android:theme attribute of the application’s definition to @style/Theme.StyleRedBlue.

If you take a look at your activity now, it should look very different.

RedBlue Activity ThemeRedBlue Activity ThemeRedBlue Activity Theme

How are Styles and Themes Different?

The concept of styles and themes can be a bit confusing for beginners because they seem to do very similar things and yet serve different purposes. In this section, I will provide a simple explanation to help clear up all your doubts.

Both themes and styles use the same <style> syntax for their key-value pairs.

A style contains a collection of attribute values for specific views. This means key-value pairs that you define for a style could also be set inside the layout file. Another thing to keep in mind is that the styles that you create will usually target a single type of widget. This is because different widgets will have support for their own set of attributes.

A theme contains a collection of named resources which can be referenced by different styles, layouts and widgets etc. This basically means that a theme is not bound to any specific view or widget. It simply provides you a way of assigning semantic names to different resources. One example of this would be the colorPrimary attribute. It isn’t tied to any particular view but applies to the whole activity or app.

Conclusion

In this tutorial, you learned how to create and apply custom Android styles and themes. Feel free to use this knowledge to give new and better looks to your apps. However, try not to get too carried away—most Android users today are so accustomed to Material Design that deviating from its guidelines can annoy them.

To learn more about styles and themes, I suggest you go through the Styles and Themes Guide.

Leave a Reply

Your email address will not be published. Required fields are marked *