Google is committed to advancing racial equity for Black communities. See how.

Change the app theme

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 Android Studio installed
  • An internet connection to access the Material color tools

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>

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.

  1. Open Android Studio.
  2. Create a new Kotlin project using the Empty Activity template.
  3. Use the name "TipTime". You can alternatively keep the default name, "My Application" if you are not doing any other codelabs.
  4. Select a minimum API level of 19 (KitKat).
  5. After Android Studio finishes creating the app, open activity_main.xml (app > res > layout > activity_main.xml).
  6. If necessary switch to Code view.
  7. 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>
  1. Open strings.xml (app > res > values > strings.xml).
  2. 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>
  1. 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.

Add Material dependencies to your project

This app uses Material Components and themes from the Material Design Components library. Older versions of Android Studio (prior to version 4.1) do not have the required dependency included by default for projects created from the templates. Add this Material library dependency to your project, if it's not already present.

  1. In the Project window, open Gradle Scripts > build.gradle (Module: app). There are two build.gradle files, one for the project and one for the app. Make sure you select the correct one in the app module.
  2. In build.gradle, locate the dependencies block near the bottom of the file.
  3. Locate the line that reads

implementation 'androidx.appcompat:appcompat:1.2.0'

and change it to

implementation 'com.google.android.material:material:1.2.0'

  1. Re-sync the project by clicking the Sync Now prompt that appears when you edit the gradle file.

Separate Styles from Themes

In Android Studio 4.0 and earlier, styles and themes are located in the same resources file. You do not need to do the steps in this section if you are using Android 4.1 or later. The updated project template uses a new themes.xml file for application-wide themes and uses styles.xml for widget-level styling.

You will need to create a new file for themes.xml to store themes.

  1. In the Project Window, right-click on the app > res > values directory.
  2. Select New > Values Resource File.
  3. In the popup window that appears, type themes in the File name: field.

  1. Click OK.
  2. Paste the following into the file.
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->

        <!-- Secondary brand color. -->

        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

5. In the Project Window, open your AndroidManifest.xml file by navigating to app > manifest > AndroidManifest.xml.

6. Locate the line that reads android:theme="@style/AppTheme" and change it to android:theme="@style/Theme.TipTime".

7. In the Project Window, open your styles.xml file by navigating to app > res > values > styles.xml.

8. Replace the content in the file with

<resources></resources>

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.

  1. In Android Studio, open themes.xml (app > res > values > themes.xml).
  2. Notice the theme name, Theme.TipTime, which is based on your app name.
<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
  1. 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.
  1. 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. If you are using Android Studio 4.0, copy the following text into your themes.xml file.
    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="colorPrimaryDark">@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.

  1. Also notice that Android Studio draws a small sample of the color in the left margin.
  2. Finally, note that the colors are specified as color resources, for example, @color/purple_500, rather than using an RGB value directly.
  3. 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>

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

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

  1. In Android Studio, open colors.xml (app > res > values > colors.xml)
  2. After the existing colors, define a color resource named green using the value selected above, #1B5E20.
<color name="green">#1B5E20</color>
  1. 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.

  1. Open themes.xml (app > res > values > themes > themes.xml)
  2. Change colorPrimary to the primary color you selected, @color/green.
  3. Change colorPrimaryVariant to @color/green_dark.
  4. Change colorSecondary to @color/blue.
  5. Change colorSecondaryVariant to @color/blue_dark.
  6. 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>
  1. Run your app in the emulator or on a device and see what your app looks like with the new 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.

Add a resource file for dark theme

You will need to create a new file for themes.xml to take advantage of Android 10's (API level 29+) ability to set a dark theme, if it doesn't already exist.

  1. In the Project Window, right-click app > res > values and select New > Values Resource File.
  2. In the popup window that appears, type themes in the File name: field.
  3. Change the text in the Directory name: text field to values-night.

4. Click OK.

5. Copy the following into the themes.xml file.

<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>

Update the dark version of your theme

  1. Open themes.xml (night) (app > res > values > themes > themes.xml (night))
  1. Change colorPrimary to the light variant of the primary color you selected, @color/green_light.
  2. Change colorPrimaryVariant to @color/green.
  3. Change colorSecondary to @color/blue_light.
  4. Change colorSecondaryVariant to @color/blue_light.

    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>
  1. 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)

  1. Run your app again.
  2. Switch to the Settings app.
  3. In the Battery section, find the Battery Saver.
  4. Press Turn on Now.

Continue with the steps below.

For API 29 (Android 10) or higher

  1. Run your app again.
  2. Switch to the Settings app.
  3. In the Display section, find the Dark theme switch.
  4. Switch Dark theme to the "on" position, and the device switches to night mode.

For either API

  1. 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.

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>
  • 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.

For a challenge, customize more attributes of a theme. The Material team has created a sample app called Build a Material Theme which shows you how to customize many attributes of a theme. Use the Material Components Android Examples GitHub repo for the Solution Code URL in the following steps. Also note that the project you want is one level down in the GitHub repo, under MaterialThemeBuilder.

To get the code for this codelab and open it in Android Studio, do the following.

Get the code

  1. Click on the Solution Code URL. This opens the GitHub page for the project in a browser.
  2. On the GitHub page for the project, click the Clone or download button, which brings up a Clone dialog.

  1. In the dialog, click the Download ZIP button to save the project to your computer. Wait for the download to complete.
  2. Locate the file on your computer (likely in the Downloads folder).
  3. Double-click the ZIP file to unpack it. This creates a new folder that contains the project files.

Open the project in Android Studio

  1. Start Android Studio.
  2. In the Welcome to Android Studio window, click Open an existing Android Studio project.

Note: If Android Studio is already open, instead, select the File > New > Import Project menu option.

  1. In the Import Project dialog, navigate to where the unzipped project folder is located (likely in your Downloads folder).
  2. Double-click on that project folder.
  3. Wait for Android Studio to open the project.
  4. Click the Run button to build and run the app. Make sure it works as expected.
  5. Browse the project files in the Project tool window to see how the app was implemented.

Customize the theme

Follow the directions in MaterialThemeBuilder/README.md. It will get you started in customizing attributes like type, shape, and colors.