How To Change App Theme And Background In Java Android

Modify the app theme

1. Before you begin

Textile is a pattern organization created past 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 colour theme for your Android app.

The codelab uses the Empty Activity app template, simply you can use whatever Android app you're working on. If you're taking this as part of the Android Nuts grade, 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 college.
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 prepare colors as part of your app theme
The RGB components of a color
How to use a style to a View
Change the look of an app using a Theme
Understand the importance of colour dissimilarity

What you demand

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

2. Blueprint and color

Material Design

Material Blueprint is inspired by the physical globe and its textures, including how objects reverberate light and cast shadows. It provides guidelines on how to build your app UI in a readable, bonny, and consistent manner. Material Theming allows you to arrange Material Blueprint for your app, with guidance on customizing colors, typography, and shapes. Material Pattern comes with a congenital-in, baseline theme that tin can be used as-is. You can then customize it every bit little, or every bit much, as yous like to make Material work for your app.

A bit near color

Color is all around us, both in the real world and the digital realm. The get-go matter to know is non anybody sees color the aforementioned way, then information technology is of import to choose colors for your app and so users tin effectively apply your app. Choosing colors with enough colour contrast is but one part of building more attainable apps.

A Color can exist represented as 3 hexadecimal numbers, #00-#FF (0-255), representing the carmine, dark-green, and blueish (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 blastoff value #00-#FF, which represents the transparency (#00 = 0% = fully transparent, #FF = 100% = fully opaque). When included, the blastoff value is the first of four hexadecimal numbers (ARGB). If an alpha value is not included, it is causeless to be #FF = 100% opaque.

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

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

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

3. Themes

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

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

Create an Empty Action project

If you're using your own app, yous tin can skip this section. If you demand an app to piece of work with, follow these steps to create an Empty Action app.

Open Android Studio.
Create a new Kotlin projection using the Empty Activeness template.
Use the name "TipTime". You can alternatively go on the default proper noun, "My Application" if yous 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="ane.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-car"     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" />      <Push button         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center_horizontal"         android:text="@string/push 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.fabric.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 proper name="app_name">TipTime</string>     <string proper noun="primary_color">Primary color</string>     <string name="button">Button</string>     <cord name="secondary_color">Secondary color</string>     <string name="email_icon">e-mail icon</string> </resources>

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

The app includes a TextView and Button to let yous see what your colour choices await like in an bodily Android app. We will modify the push's color to the colour of the theme's primary color in future steps.

Acquire about theme colors

Unlike parts of the UI for Android apps use different colors. To help y'all utilize color in a meaningful way in your app, and apply information technology 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; yous will be choosing the primary and secondary colors, likewise as the colors for text and icons fatigued on those colors.

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

#	Name	Theme Attribute
one	Primary	`colorPrimary`
2	Primary Variant	`colorPrimaryVariant`
3	Secondary	`colorSecondary`
four	Secondary Variant	`colorSecondaryVariant`
v	Background	`colorBackground`
half dozen	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 divers 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 proper name.

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

Note that line of XML besides 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 night color. Only 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 proper noun="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">         <!-- Main make colour. -->         <item proper noun="colorPrimary">@color/purple_500</item>         <particular proper name="colorPrimaryVariant">@color/purple_700</item>         <particular proper name="colorOnPrimary">@color/white</detail>         <!-- Secondary brand colour. -->         <detail name="colorSecondary">@color/teal_200</item>         <item name="colorSecondaryVariant">@color/teal_700</particular>         <detail proper noun="colorOnSecondary">@colour/blackness</item>         <!-- Status bar colour. -->         <detail proper noun="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</particular>         <!-- Customize your theme hither. -->     </style> </resources>

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

Also find that Android Studio draws a small sample of the color in the left margin.
Finally, notation that the colors are specified as color resources, for example, @color/purple_500, rather than using an RGB value directly.
Open up colors.xml (app > res > values > colors.xml), and you will come across 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</colour>     <color name="purple_700">#FF3700B3</color>     <color name="teal_200">#FF03DAC5</color>     <color proper noun="teal_700">#FF018786</colour>     <color name="black">#FF000000</colour>     <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 manner to practise 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 run into how they look when used by unlike UI elements.

Selection some colors

Showtime by selecting a Primary color (colorPrimary), for example, Dark-green 900. The color tool shows what that volition look like in an app mockup, and also selects Calorie-free and Dark variants.
Tap on the Secondary department and choose a secondary color (colorSecondary) that you like, for example, Lite Blue 700. The colour shows what that will expect like in the app mockup, and over again selects Lite and Dark variants.
Annotation that the app mockup includes 6 dissimilar mock "screens". Await at what your color choices look similar on the unlike screens past tapping the arrows above the mockup.
The color tool as well has an Accessibility tab to let you lot 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: four.v:1 or higher for modest text, and three.0:i or higher for larger text. Read more about color contrast.
For primaryColorVariant and secondaryColorVariant, you can pick either the lite or nighttime variant suggested.

Add the colors to your app

Defining resources for colors makes information technology easier to consistently reuse the aforementioned colors in different parts of your app.

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

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

Proceed 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 utilise them in a later step.

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

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

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

                        <?xml version="i.0" encoding="utf-8"?> <resources>     <color proper noun="purple_200">#FFBB86FC</color>     <color name="purple_500">#FF6200EE</color>     <color proper noun="purple_700">#FF3700B3</colour>     <colour proper name="teal_200">#FF03DAC5</color>     <color name="teal_700">#FF018786</color>     <color name="blackness">#FF000000</color>     <color proper noun="white">#FFFFFFFF</color>      <color proper noun="green">#1B5E20</color>     <color name="green_dark">#003300</color>     <colour proper name="green_light">#A5D6A7</color>     <color proper name="blue">#0288D1</color>     <color proper noun="blue_dark">#005B9F</color>     <color name="blue_light">#81D4FA</color> </resources>

Utilise 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).
Modify colorPrimary to the master color you selected, @color/green.
Alter colorPrimaryVariant to @color/green_dark.
Change colorSecondary to @color/blue.
Change colorSecondaryVariant to @color/blue_dark.
Check that Text on P and Text on Southward are still white (#FFFFFF) and blackness (#000000). If you're using the color tool on your own and select other colors, you may need to ascertain additional color resource.

When you're washed, the theme should look similar this:

                        <resources xmlns:tools="http://schemas.android.com/tools">     <!-- Base application theme. -->     <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">         <!-- Primary brand color. -->         <detail name="colorPrimary">@colour/green</item>         <particular proper noun="colorPrimaryVariant">@color/green_dark</item>         <detail 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> </resource>

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

5. Nighttime theme

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

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

Choosing colors for nighttime theme

Colors for a dark theme still need to be readable. Night themes use a dark surface color, with limited color accents. To assist ensure readability, the principal colors are usually less saturated versions of the main 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 light-green 200 and light blue 200 as light colors. For your app, you'll use the lite 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 master color you selected, @color/green_light.
Change colorPrimaryVariant to @color/dark-green.
Modify colorSecondary to @color/blue_light.
Change colorSecondaryVariant to @color/blue_light. Note that colorSecondaryVariant could be the same color as colorSecondary.

When you lot're done, your themes.xml (dark) file should wait 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 proper name="colorPrimary">@color/green_light</item>         <item name="colorPrimaryVariant">@color/green</particular>         <detail name="colorOnPrimary">@color/black</item>         <!-- Secondary brand color. -->         <detail name="colorSecondary">@colour/blue_light</item>         <item name="colorSecondaryVariant">@colour/blue_light</item>         <item name="colorOnSecondary">@color/black</item>         <!-- Status bar color. -->         <item name="android:statusBarColor" tools:targetApi="50">?attr/colorPrimaryVariant</detail>         <!-- Customize your theme hither. -->     </fashion> </resources>

At this betoken, the original colors divers in colors.xml, for example, purple_200, aren't used anymore so you tin delete them.

Try dark theme

You tin see what your theme looks like in night style by enabling dark style on your device.

For API 28 (Android 9)

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

Press Turn on At present.

Go along 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 Night theme switch.

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

For either API

Return to your app, and look at the differences.

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

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

6. Solution lawmaking

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. Cheque out this commodity to see other means you lot can customize an app theme! Android Styling: Common Theme Attributes.

The solution lawmaking for this codelab is shown below.

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

                        <?xml version="ane.0" encoding="utf-viii"?> <resources>     <colour name="black">#FF000000</color>     <colour name="white">#FFFFFFFF</color>     <colour proper noun="dark-green">#1B5E20</colour>     <color proper name="green_dark">#003300</color>     <color name="green_light">#A5D6A7</colour>     <color name="blueish">#0288D1</colour>     <color proper noun="blue_dark">#005B9F</color>     <colour name="blue_light">#81D4FA</colour> </resources>

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

                        <resources xmlns:tools="http://schemas.android.com/tools">     <!-- Base of operations application theme. -->     <style proper name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">         <!-- Primary make colour. -->         <item proper name="colorPrimary">@colour/green</particular>         <particular name="colorPrimaryVariant">@color/green_dark</item>         <detail name="colorOnPrimary">@colour/white</particular>         <!-- Secondary brand color. -->         <item name="colorSecondary">@color/blueish</particular>         <detail name="colorSecondaryVariant">@color/blue_dark</item>         <item proper name="colorOnSecondary">@color/black</particular>         <!-- Condition bar colour. -->         <particular name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</particular>         <!-- Customize your theme hither. -->     </style> </resource>

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

                        <resources xmlns:tools="http://schemas.android.com/tools">     <!-- Awarding 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/dark-green</detail>         <detail name="colorOnPrimary">@color/black</item>         <!-- Secondary brand color. -->         <detail name="colorSecondary">@color/blue_light</item>         <particular name="colorSecondaryVariant">@colour/blue_light</item>         <item name="colorOnSecondary">@color/black</item>         <!-- Status bar colour. -->         <item proper name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</particular>         <!-- Customize your theme here. -->     </style> </resources>

7. Summary

Use the Fabric Colour Tool to select colors for your app theme.
Alternatively, you lot tin use the Cloth palette generator to assistance select a color palette.
Declare colour resources in the colors.xml file to make it easier to reuse them.
Dark theme tin reduce power usage and brand your app easier to read in low low-cal.

8. Learn more than

The color system
Nighttime theme
Android Styling: Themes vs Styles
Android Styling: Common Theme Attributes
Setting up a Material Components theme for Android
Tip on night theme
WebAIM Dissimilarity Checker
Material Component Themes (see step 4)
Textile Theming with MDC
Dark Theme with MDC
Android Styling: Common Theme Attributes

Except every bit otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.