Change the app theme

1. Before you begin

Material is a design system created by Google to help developers build high-quality digital experiences for Android and other platforms. The full Material system includes design guidelines on visual, motion, and interaction design for your app, but this codelab will focus on changing the color theme for your Android app.

The codelab uses the Empty Activity app template, but you can use whatever Android app you're working on. If you're taking this as part of the Android Basics course, you can use the Tip Time app.

Prerequisites

How to create an Android app from a template in Android Studio.
How to run an Android app on the emulator or a device in Android Studio.
An Android device or emulator running API 28 (Android 9), or API 29 (Android 10) or higher.
How to edit an XML file.

What you'll learn

How to select effective colors for your app according to Material Design principles
How to set colors as part of your app theme
The RGB components of a color
How to apply a style to a View
Change the look of an app using a Theme
Understand the importance of color contrast

What you need

A computer with the latest stable version of Android Studio installed
A web browser and and internet connection to access the Material color tools

2. Design and color

Material Design

Material Design is inspired by the physical world and its textures, including how objects reflect light and cast shadows. It provides guidelines on how to build your app UI in a readable, attractive, and consistent manner. Material Theming allows you to adapt Material Design for your app, with guidance on customizing colors, typography, and shapes. Material Design comes with a built-in, baseline theme that can be used as-is. You can then customize it as little, or as much, as you like to make Material work for your app.

A bit about color

Color is all around us, both in the real world and the digital realm. The first thing to know is not everyone sees color the same way, so it is important to choose colors for your app so users can effectively use your app. Choosing colors with enough color contrast is just one part of building more accessible apps.

A Color can be represented as 3 hexadecimal numbers, #00-#FF (0-255), representing the red, green, and blue (RGB) components of that color. The higher the number, the more of that component there is.

Note that a color can also be defined including an alpha value #00-#FF, which represents the transparency (#00 = 0% = fully transparent, #FF = 100% = fully opaque). When included, the alpha value is the first of 4 hexadecimal numbers (ARGB). If an alpha value is not included, it is assumed to be #FF = 100% opaque.

You don't need to generate the hexadecimal numbers yourself, though. There are tools available to help you pick colors which will generate the numbers for you.

Some examples you may have seen in the colors.xml file of your Android app include 100% black (R=#00, G=#00, B=#00) and 100% white (R=#FF, G=#FF, B=#FF):

<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>

3. Themes

A style can specify attributes for a View, such as font color, font size, background color, and much more.

A theme is a collection of styles that's applied to an entire app, activity, or view hierarchy—not just an individual View. When you apply a theme to an app, activity, view, or view group, the theme is applied to that element and all of its children. Themes can also apply styles to non-view elements, such as the status bar and window background.

Create an Empty Activity project

If you're using your own app, you can skip this section. If you need an app to work with, follow these steps to create an Empty Activity app.

Open Android Studio.
Create a new Kotlin project using the Empty Activity template.
Use the name "TipTime". You can alternatively keep the default name, "My Application" if you are not doing any other codelabs.
Select a minimum API level of 19 (KitKat).
After Android Studio finishes creating the app, open activity_main.xml (app > res > layout > activity_main.xml).
If necessary switch to Code view.
Replace all of the text with this XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:gravity="center_vertical"
        android:text="@string/primary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="8dp"
        android:gravity="center_vertical"
        android:text="@string/secondary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:contentDescription="@string/email_icon"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</LinearLayout>

Open strings.xml (app > res > values > strings.xml).
Replace all of the text with this XML:

<resources>
    <string name="app_name">TipTime</string>
    <string name="primary_color">Primary color</string>
    <string name="button">Button</string>
    <string name="secondary_color">Secondary color</string>
    <string name="email_icon">email icon</string>
</resources>

Run your app. The app should look like the screenshot below.

The app includes a TextView and Button to let you see what your color choices look like in an actual Android app. We will change the button's color to the color of the theme's primary color in future steps.

Learn about theme colors

Different parts of the UI for Android apps use different colors. To help you use color in a meaningful way in your app, and apply it consistently throughout, the theme system groups colors into 12 named attributes related to color to be used by text, icons, and more. Your theme doesn't need to specify all of them; you will be choosing the primary and secondary colors, as well as the colors for text and icons drawn on those colors.

The "On" colors are used for text and icons drawn on the different surfaces.

#	Name	Theme Attribute
1	Primary	`colorPrimary`
2	Primary Variant	`colorPrimaryVariant`
3	Secondary	`colorSecondary`
4	Secondary Variant	`colorSecondaryVariant`
5	Background	`colorBackground`
6	Surface	`colorSurface`
7	Error	`colorError`
8	On Primary	`colorOnPrimary`
9	On Secondary	`colorOnSecondary`
10	On Background	`colorOnBackground`
11	On Surface	`colorOnSurface`
12	On Error	`colorOnError`

Take a look at the colors defined in the default theme.

In Android Studio, open themes.xml (app > res > values > themes > themes.xml).
Notice the theme name, Theme.TipTime, which is based on your app name.

<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

Note that line of XML also specifies a parent theme, Theme.MaterialComponents.DayNight.DarkActionBar. DayNight is a predefined theme in the Material Components library. DarkActionBar means that the action bar uses a dark color. Just as a class inherits attributes from its parent class, a theme inherits attributes from its parent theme.

Look through the items in the file, and note that the names are similar to those in the diagram above: colorPrimary, colorSecondary, and so on.

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Not all color theme attributes are defined. Colors that are not defined will inherit the color from the parent theme.

Also notice that Android Studio draws a small sample of the color in the left margin.
Finally, note that the colors are specified as color resources, for example, @color/purple_500, rather than using an RGB value directly.
Open colors.xml (app > res > values > colors.xml), and you will see the hex values for each color resource. Recall that the leading #FF is the alpha value, and means the color is 100% opaque.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

4. Pick app theme colors

Now that you have some idea of the theme attributes, it's time to pick some colors! The easiest way to do this is with the Color Tool, a web-based app provided by the Material team. The tool provides a palette of predefined colors, and lets you easily see how they look when used by different UI elements.

Pick some colors

Start by selecting a Primary color (colorPrimary), for example, Green 900. The color tool shows what that will look like in an app mockup, and also selects Light and Dark variants.
Tap on the Secondary section and choose a secondary color (colorSecondary) that you like, for example, Light Blue 700. The color shows what that will look like in the app mockup, and again selects Light and Dark variants.
Note that the app mockup includes 6 different mock "screens". Look at what your color choices look like on the different screens by tapping the arrows above the mockup.
The color tool also has an Accessibility tab to let you know if your colors are clear enough to read when used with black or white text. Part of making your app more accessible is ensuring the color contrast is high enough: 4.5:1 or higher for small text, and 3.0:1 or higher for larger text. Read more about color contrast.
For primaryColorVariant and secondaryColorVariant, you can pick either the light or dark variant suggested.

Add the colors to your app

Defining resources for colors makes it easier to consistently reuse the same colors in different parts of your app.

In Android Studio, open colors.xml (app > res > values > colors.xml).
After the existing colors, define a color resource named green using the value selected above, #1B5E20.

<color name="green">#1B5E20</color>

Continue defining resources for the other colors. Most of these are from the color tool. Note that the values for green_light and blue_light are different from what the tool shows; you'll use them in a later step.

`green`	`#1B5E20`
`green_dark`	`#003300`
`green_light`	`#A5D6A7`
`blue`	`#0288D1`
`blue_dark`	`#005B9F`
`blue_light`	`#81D4FA`

There are already color resources defined for black and white, so you don't need to define those.

The colors.xml file for your app should now look like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

Use the colors in your theme

Now that you have names for the colors you selected, it's time to use them in your theme.

Open themes.xml (app > res > values > themes > themes.xml).
Change colorPrimary to the primary color you selected, @color/green.
Change colorPrimaryVariant to @color/green_dark.
Change colorSecondary to @color/blue.
Change colorSecondaryVariant to @color/blue_dark.
Check that Text on P and Text on S are still white (#FFFFFF) and black (#000000). If you're using the color tool on your own and select other colors, you may need to define additional color resources.

When you're done, the theme should look like this:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue</item>
        <item name="colorSecondaryVariant">@color/blue_dark</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Run your app in the emulator or on a device and see what your app looks like with the new theme.

5. Dark theme

The app template included a default light theme, and also included a dark theme variant. A dark theme uses darker, more subdued colors, and:

Can reduce power usage by a significant amount (depending on the device's screen technology).
Improves visibility for users with low vision and those who are sensitive to bright light.
Makes it easier for anyone to use a device in a low-light environment.

Choosing colors for dark theme

Colors for a dark theme still need to be readable. Dark themes use a dark surface color, with limited color accents. To help ensure readability, the primary colors are usually less saturated versions of the primary colors for the light theme.

To provide more flexibility and usability in a dark theme, it's recommended to use lighter tones (200-50) in a dark theme, rather than your default color theme (saturated tones ranging from 900-500). Earlier you picked green 200 and light blue 200 as light colors. For your app, you'll use the light colors as the main colors, and the primary colors as the variants.

Update the dark version of your theme

Open themes.xml (night). In the Project pane select Android, go to app > res > values > themes > themes.xml (night).

Change colorPrimary to the light variant of the primary color you selected, @color/green_light.
Change colorPrimaryVariant to @color/green.
Change colorSecondary to @color/blue_light.
Change colorSecondaryVariant to @color/blue_light. Note that colorSecondaryVariant could be the same color as colorSecondary.

When you're done, your themes.xml (night) file should look like this:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

At this point, the original colors defined in colors.xml, for example, purple_200, aren't used anymore so you can delete them.

Try dark theme

You can see what your theme looks like in dark mode by enabling dark mode on your device.

For API 28 (Android 9)

Run your app again.
Switch to the Settings app.
In the Battery section, find the Battery Saver.

Press Turn on Now.

Continue with the steps below.

For API 29 (Android 10) or higher

Run your app again.
Switch to the Settings app.
In the Display section, find the Dark theme switch.

Switch the Dark theme to the "on" position, and the device switches to night mode.

For either API

Return to your app, and look at the differences.

The most obvious change is a dark background with light text, instead of a light background with dark text. Also, the colors used for the buttons are less vibrant in the dark theme than in the light theme.

Congratulations! You've successfully made a new app theme, with both a light theme and dark theme.

6. Solution code

This codelab focused on customizing the colors for the theme, but there are many attributes your theme can customize including text, shape, button style, and more. Check out this article to see other ways you can customize an app theme! Android Styling: Common Theme Attributes.

The solution code for this codelab is shown below.

colors.xml (app > res > values > colors.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

values/themes.xml (app > res > values > themes > themes.xml)

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue</item>
        <item name="colorSecondaryVariant">@color/blue_dark</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

values-night/themes.xml (app > res > values > themes > themes.xml (night))

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

7. Summary

Use the Material Color Tool to select colors for your app theme.
Alternatively, you can use the Material palette generator to help select a color palette.
Declare color resources in the colors.xml file to make it easier to reuse them.
Dark theme can reduce power usage and make your app easier to read in low light.