Scribd
Upload
181 views4 pages

Design App Themes With Theme Editor

The document summarizes the key features and functionality of the Theme Editor in Android Studio. It allows developers to create and modify app themes, adjust themes for different configurations, and visualize how color changes affect UI elements. The summary describes how to access the Theme Editor, create and rename themes, change color resources, and configure device-specific resource directories.

Uploaded by

senze_shin3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
181 views4 pages

Design App Themes With Theme Editor

The document summarizes the key features and functionality of the Theme Editor in Android Studio. It allows developers to create and modify app themes, adjust themes for different configurations, and visualize how color changes affect UI elements. The summary describes how to access the Theme Editor, create and rename themes, change color resources, and configure device-specific resource directories.

Uploaded by

senze_shin3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Android Developers

Design App Themes with Theme


Editor
Android Studio includes a visual assistant
called Theme Editor that helps you:
Create and modify themes
(https://developer.android.com/guide/topics/ui/themes.html)

for your app.


Adjust themes for different resource

In this document
Theme Editor Basics
Themes and Colors
Device-Specic
Congurations

classiers.
Visualize the effect of color changes on
common UI elements.
This page introduces the fundamental tasks that you can perform with the Theme
Editor, and explains how to do so.

Theme Editor Basics


This section describes how to access the Theme Editor, and how it is laid out.

Accessing the Theme Editor


There are two ways to open the Theme Editor:
From an open styles XML le, such as styles.xml, click Open editor near the
top-right of the le window.
From the Tools menu, click Android > Theme Editor.

Navigating the Theme Editor


The Theme Editor's main screen is divided into two sections. The left side of the
editor shows what specic UI elements, such as the app bar or a raised button, look
like when you apply the current theme to them. The right side of the editor displays
the name of the current theme being previewed, the module where the theme is

dened, and the settings for theme resources, such as Theme parent and
colorPrimary. You can modify design themes by changing these resource settings.

Themes and Colors


The Theme Editor allows you to create new themes, modify existing ones, and
manage the colors that make up the themes.

Creating New Themes


To create a theme, follow these steps:
1. Open the Theme dropdown menu near the top of the right side of the Theme
Editor.
2. Click Create New Theme.
3. In the New Theme dialog, enter a name for the new theme.
4. In the Parent theme name list, click on the parent from which the theme inherits
initial resources.

Renaming Themes
To rename a theme, perform the following steps:
1. Open the Theme dropdown menu near the top of the right side of the Theme
Editor.
2. Click Rename

3. In the Rename dialog, enter a new name for the theme.


4. (optional) To see how the changes will look, click Preview.
5. To apply the changes, click Refactor.

Changing Color Resources


To change an existing color resource, such as colorPrimary, follow these steps:
1. Click the colored square next to the name of the resource you want to change.
The Resources dialog appears, which displays a list of colors on the left side,
and settings and information for the currently selected resource color on the
right.

2. Set a color for the theme resource by doing one of the following:
Select a material palette color from the list of colors.
Select a color dened in your project from the list of colors, and optionally
modify the color value, opacity, and name as desired.
Dene a new color in your project by clicking New Resource > New color
Value from the drop-down menu in the lower left of the Resources dialog, and
specify the color value, opacity, and name.
3. If you've created or modied a custom project color, you can ensure that the
color matches the closest material palette color by clicking CLOSEST MATERIAL
COLOR, located next to Custom color. Android Studio changes the color and
opacity values of the color you picked to the material color most like it, and
replaces Custom color with the name of the color from the material palette.

Viewing State Lists and Colors


The Theme Editor allows you to preview colors associated with different states.
(https://developer.android.com/guide/topics/resources/color-list-resource.html)

To do so, open the

Resources dialog by clicking on the color set square next to the name of an editable
state list resource. The Resources dialog displays a list of states, such as Selected,
and the color value associated with the state. Click the color for a state to choose a
different color value.
To more fully control the states themselves, you can directly view and edit their
properties in the XML le that denes them. For more information, see the
documentation for the ColorStateList

(https://developer.android.com/reference

/android/content/res/ColorStateList.html)

class.

Device-Specic Congurations
You can choose device-specic (https://developer.android.com/guide/topics/resources/providingresources.html#Compatibility)

congurations for your app to support. Perform the following

steps to do so:
1. Click the triangle next to Device Conguration, near the bottom of the Resources
(#changing)

dialog. The Device Conguration section expands, revealing the source

set and name of the XML le containing the resource, as well as a list of
conguration-specic directories in which to place that le.
2. If necessary, change the XML le name.

3. Check the boxes next to the directories corresponding to the device-specic


congurations you wish to support. Any conguration for which you do not
specify a directory defaults to using the values directory.
For more information about the relationship between directory names and
congurations, see Supporting Multiple Screens (https://developer.android.com/guide/practices
/screens_support.html#CongurationExamples).

For more information about supported

directory names, see Providing Resources (https://developer.android.com/guide/topics/resources


/providing-resources.html#ResourceTypes).

You might also like