테마 편집기로 app 테마 디자인하기 Design App Themes with Theme Editor (14)

테마 편집기로 app 테마 디자인 하기   Design App Themes with Theme Editor

In this document

1. Theme Editor Basics
2. Themes and Colors
3. Device-Specific Configurations

Dependencies and Prerequisites

• Android Studio 1.4.1 or higher

Android Studio에는 개발자를 도와주는 Theme Editor라는 비주얼 도움자가 포함되어 있습니다:
Android Studio includes a visual assistant called Theme Editor that helps you:

app에 적용할 테마를 만들고 수정하기
Create and modify themes for your app.

여러 리소스 분류기 별로 테마를 조정하기
Adjust themes for different resource classifiers.

공통의 UI 엘리먼트에서의 색깔 변경의 효과를 시각화 하기
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 file, click Open editor near the top-right of the file window.

From the Tools menu, select 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 specific 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 settings for the color resources, such as Theme parent and colorPrimary, that comprise the current theme. 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. Select Create New Theme. The New Theme dialog appears.
3. Enter a name for the new theme.
4. In the Parent theme name: field, select 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. Select Rename AppTheme. The Rename dialog appears.
3. 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, containing a color picker, material-color palette, and other settings and information.
2. Change the color, opacity, and name of a theme's resources as desired.

3. To ensure that your theme uses a color from the material palette, click CLOSEST MATERIAL COLOR, located next to Custom color. Android Studio changes 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.

You can also directly select colors from the material palette, which the editor displays as two rows of colored squares beneath the color picker.

Viewing State Lists and Colors

The Theme Editor allows you to preview colors associated with different states. To do so, open the Resource dialog, and click the State List tab that appears at the top of the dialog.

To more fully control the states themselves, you can directly view and edit their properties in the XML file, such as colors.xml, that defines them. For more information, see the documentation for the ColorStateList class.

Device-Specific Configurations

---

You can choose device-specific configurations for your app to support. Perform the following steps to do so:

1. Click the triangle next to Location, near the bottom of the Resources dialog. The Location section expands, revealing the name of the XML file containing the resource, as well as a list of configuration-specific directories in which to place that file.
2. If necessary, change the XML file name.
3. Check the boxes next to the directories corresponding to the device-specific configurations you wish to support. Any configuration for which you do not specify a directory defaults to using the values directory.

For more information about the relationship between directory names and configurations, see Supporting Multiple Screens. For more information about supported directory names, see Providing Resources.