How To Change Background Of App Android Devlopment

Alter the app theme

1. Earlier yous brainstorm

Material is a design organisation created past Google to help developers build loftier-quality digital experiences for Android and other platforms. The full Material organization includes design guidelines on visual, move, and interaction blueprint for your app, but this codelab will focus on irresolute the colour theme for your Android app.

The codelab uses the Empty Activity app template, but you can use any Android app you're working on. If you're taking this as part of the Android Basics form, you can utilise 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 constructive colors for your app according to Material Design principles
How to set colors as function 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
Sympathise the importance of color contrast

What y'all need

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

2. Design and colour

Textile Design

Textile Design is inspired by the concrete world and its textures, including how objects reverberate calorie-free and cast shadows. Information technology provides guidelines on how to build your app UI in a readable, attractive, and consistent manner. Material Theming allows y'all to adapt Textile Design for your app, with guidance on customizing colors, typography, and shapes. Cloth Design comes with a congenital-in, baseline theme that can be used as-is. You can and so customize it as lilliputian, or as much, as yous similar to make Material piece of work for your app.

A flake about color

Color is all effectually us, both in the existent world and the digital realm. The start matter to know is not anybody sees color the same way, so it is important to choose colors for your app so users tin effectively use your app. Choosing colors with enough color dissimilarity is just ane part of building more accessible apps.

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

Note that a color can likewise exist defined including an blastoff 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 exist #FF = 100% opaque.

You don't demand to generate the hexadecimal numbers yourself, though. There are tools bachelor to help y'all choice colors which volition generate the numbers for you lot.

Some examples you may accept seen in the colors.xml file of your Android app include 100% black (R=#00, Yard=#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 every bit font colour, font size, background color, and much more.

A theme is a collection of styles that'due south applied to an entire app, activity, or view hierarchy—non just an private View. When you employ a theme to an app, action, view, or view group, the theme is applied to that element and all of its children. Themes can likewise utilize styles to not-view elements, such as the status bar and window groundwork.

Create an Empty Activity project

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

Open Android Studio.
Create a new Kotlin projection using the Empty Activeness template.
Apply the name "TipTime". You can alternatively go along the default name, "My Application" if you are not doing whatever other codelabs.
Select a minimum API level of xix (KitKat).
Afterward Android Studio finishes creating the app, open up activity_main.xml (app > res > layout > activity_main.xml).
If necessary switch to Code view.
Supercede all of the text with this XML:

                        <?xml version="i.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="truthful"         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 up strings.xml (app > res > values > strings.xml).
Replace all of the text with this XML:

                        <resource>     <string name="app_name">TipTime</string>     <string proper noun="primary_color">Primary colour</cord>     <string name="push">Button</cord>     <cord name="secondary_color">Secondary colour</string>     <cord name="email_icon">electronic mail icon</string> </resources>

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

The app includes a TextView and Push button to let you see what your color choices expect like in an actual Android app. We will change the button's color to the color of the theme'due south chief color in future steps.

Learn nigh theme colors

Different parts of the UI for Android apps use different colors. To aid you utilise color in a meaningful manner 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; you volition be choosing the main 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.

#	Proper noun	Theme Attribute
1	Master	`colorPrimary`
two	Master Variant	`colorPrimaryVariant`
three	Secondary	`colorSecondary`
4	Secondary Variant	`colorSecondaryVariant`
five	Background	`colorBackground`
6	Surface	`colorSurface`
7	Fault	`colorError`
eight	On Main	`colorOnPrimary`
9	On Secondary	`colorOnSecondary`
x	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 up themes.xml (app > res > values > themes > themes.xml).
Notice the theme name, Theme.TipTime, which is based on your app name.

                        <way 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 night color. Just as a class inherits attributes from its parent course, a theme inherits attributes from its parent theme.

Expect through the items in the file, and notation that the names are similar to those in the diagram above: colorPrimary, colorSecondary, and and then on.

themes.xml

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

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

Also notice that Android Studio draws a pocket-size sample of the color in the left margin.
Finally, notation that the colors are specified equally color resources, for case, @color/purple_500, rather than using an RGB value directly.
Open colors.xml (app > res > values > colors.xml), and y'all volition run across the hex values for each color resource. Think that the leading #FF is the alpha value, and means the colour is 100% opaque.

colors.xml

                        <?xml version="i.0" encoding="utf-8"?> <resources>     <color name="purple_200">#FFBB86FC</color>     <color name="purple_500">#FF6200EE</color>     <color name="purple_700">#FF3700B3</colour>     <color name="teal_200">#FF03DAC5</color>     <colour name="teal_700">#FF018786</colour>     <color proper noun="black">#FF000000</color>     <color proper noun="white">#FFFFFFFF</colour> </resource>

four. Pick app theme colors

Now that yous have some thought of the theme attributes, it's time to selection some colors! The easiest manner 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 run across how they expect when used by different UI elements.

Pick some colors

Get-go by selecting a Primary color (colorPrimary), for example, Dark-green 900. The colour tool shows what that will look like in an app mockup, and also selects Light and Night variants.
Tap on the Secondary section and choose a secondary color (colorSecondary) that you like, for case, Lite Blue 700. The color shows what that will look similar in the app mockup, and again selects Low-cal and Dark variants.
Annotation that the app mockup includes 6 different mock "screens". Look at what your color choices await like on the different screens by borer the arrows in a higher place the mockup.
The color tool also has an Accessibility tab to allow yous know if your colors are clear plenty to read when used with black or white text. Part of making your app more attainable is ensuring the color contrast is high plenty: 4.v:1 or college for small text, and 3.0:1 or higher for larger text. Read more about color contrast.
For primaryColorVariant and secondaryColorVariant, you can selection either the light or dark variant suggested.

Add the colors to your app

Defining resource for colors makes information technology easier to consistently reuse the same colors in dissimilar 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 to a higher place, #1B5E20.

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

Go along defining resource for the other colors. Most of these are from the colour tool. Note that the values for green_light and blue_light are different from what the tool shows; y'all'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 colour resources defined for black and white, so you lot don't need to ascertain those.

The colors.xml file for your app should at present wait like this:

                        <?xml version="i.0" encoding="utf-viii"?> <resources>     <color name="purple_200">#FFBB86FC</colour>     <color proper noun="purple_500">#FF6200EE</color>     <colour name="purple_700">#FF3700B3</color>     <color proper name="teal_200">#FF03DAC5</color>     <color proper noun="teal_700">#FF018786</color>     <color name="blackness">#FF000000</colour>     <colour name="white">#FFFFFFFF</colour>      <color proper noun="green">#1B5E20</color>     <color name="green_dark">#003300</color>     <color name="green_light">#A5D6A7</color>     <color name="blue">#0288D1</color>     <color proper 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 y'all selected, information technology's fourth dimension to use them in your theme.

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

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

                        <resources xmlns:tools="http://schemas.android.com/tools">     <!-- Base awarding theme. -->     <mode proper name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">         <!-- Main brand color. -->         <item proper noun="colorPrimary">@color/green</detail>         <item name="colorPrimaryVariant">@color/green_dark</detail>         <item name="colorOnPrimary">@colour/white</particular>         <!-- Secondary brand color. -->         <item name="colorSecondary">@color/blue</item>         <item name="colorSecondaryVariant">@color/blue_dark</detail>         <particular name="colorOnSecondary">@color/black</particular>         <!-- Condition bar colour. -->         <item proper noun="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>         <!-- Customize your theme here. -->     </fashion> </resource>

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

5. Dark theme

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

Can reduce power usage by a meaning amount (depending on the device'south screen technology).
Improves visibility for users with depression vision and those who are sensitive to brilliant calorie-free.
Makes it easier for anyone to use a device in a low-light environs.

Choosing colors for dark theme

Colors for a dark theme yet demand to be readable. Nighttime themes use a night surface color, with express color accents. To assist ensure readability, the principal colors are usually less saturated versions of the primary colors for the light theme.

To provide more flexibility and usability in a dark theme, information technology's recommended to employ lighter tones (200-50) in a dark theme, rather than your default color theme (saturated tones ranging from 900-500). Earlier you picked greenish 200 and light blueish 200 every bit calorie-free colors. For your app, you'll utilize the light colors as the primary colors, and the primary colors as the variants.

Update the dark version of your theme

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

Modify colorPrimary to the lite variant of the principal colour yous selected, @color/green_light.
Change colorPrimaryVariant to @color/green.
Modify colorSecondary to @color/blue_light.
Modify colorSecondaryVariant to @color/blue_light. Note that colorSecondaryVariant could be the same color every bit colorSecondary.

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

                        <resources xmlns:tools="http://schemas.android.com/tools">     <!-- Application theme for night theme. -->     <style proper noun="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">         <!-- Primary make colour. -->         <item name="colorPrimary">@color/green_light</particular>         <item name="colorPrimaryVariant">@color/green</detail>         <particular name="colorOnPrimary">@color/black</item>         <!-- Secondary make colour. -->         <item name="colorSecondary">@color/blue_light</particular>         <item proper name="colorSecondaryVariant">@color/blue_light</item>         <item name="colorOnSecondary">@color/black</item>         <!-- Status bar color. -->         <item proper name="android:statusBarColor" tools:targetApi="50">?attr/colorPrimaryVariant</item>         <!-- Customize your theme hither. -->     </style> </resources>

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

Try nighttime theme

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

For API 28 (Android ix)

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

Press Plough on At present.

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

Switch the Night theme to the "on" position, and the device switches to night manner.

For either API

Return to your app, and wait at the differences.

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

Congratulations! You've successfully fabricated a new app theme, with both a calorie-free 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, push button style, and more than. Cheque out this article to see other ways you can customize an app theme! Android Styling: Mutual 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 proper noun="white">#FFFFFFFF</color>     <colour name="green">#1B5E20</color>     <colour proper noun="green_dark">#003300</color>     <color name="green_light">#A5D6A7</colour>     <color proper noun="blue">#0288D1</colour>     <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 of operations awarding theme. -->     <way proper name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">         <!-- Chief brand color. -->         <item proper name="colorPrimary">@color/dark-green</item>         <detail name="colorPrimaryVariant">@color/green_dark</item>         <item proper name="colorOnPrimary">@color/white</item>         <!-- Secondary make colour. -->         <item name="colorSecondary">@color/blue</particular>         <item proper name="colorSecondaryVariant">@colour/blue_dark</item>         <item name="colorOnSecondary">@color/black</item>         <!-- Status bar color. -->         <item name="android:statusBarColor" tools:targetApi="fifty">?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">     <!-- Application theme for dark theme. -->     <manner name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">         <!-- Primary make color. -->         <item name="colorPrimary">@color/green_light</item>         <item name="colorPrimaryVariant">@color/dark-green</detail>         <item proper noun="colorOnPrimary">@color/blackness</detail>         <!-- Secondary brand colour. -->         <item name="colorSecondary">@color/blue_light</item>         <item name="colorSecondaryVariant">@color/blue_light</particular>         <item proper name="colorOnSecondary">@color/black</detail>         <!-- Status bar color. -->         <item proper name="android:statusBarColor" tools:targetApi="fifty">?attr/colorPrimaryVariant</item>         <!-- Customize your theme hither. -->     </style> </resources>

vii. Summary

Utilise the Material Color Tool to select colors for your app theme.
Alternatively, you can utilize 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 tin can reduce ability usage and make your app easier to read in low light.

8. Learn more

The colour organisation
Nighttime theme
Android Styling: Themes vs Styles
Android Styling: Common Theme Attributes
Setting up a Material Components theme for Android
Tip on dark theme
WebAIM Contrast Checker
Material Component Themes (see pace four)
Fabric Theming with MDC
Night Theme with MDC
Android Styling: Common Theme Attributes

Except as otherwise noted, the content of this page is licensed under the Creative Eatables Attribution 4.0 License, and lawmaking samples are licensed under the Apache ii.0 License. For details, see the Google Developers Site Policies. Coffee is a registered trademark of Oracle and/or its affiliates.