스타일 및 테마

Compose 사용해 보기
Jetpack Compose는 Android에 권장되는 UI 도구 키트입니다. Compose에서 테마 설정을 사용하는 방법을 알아보세요.
<ph type="x-smartling-placeholder"></ph> Compose의 디자인 시스템 → 를 통해 개인정보처리방침을 정의할 수 있습니다.

Android의 스타일과 테마를 사용하면 UI 디자인의 세부사항을 구분할 수 있습니다. 웹 디자인의 스타일시트와 유사하게 작동합니다.

스타일은 단일 View의 모양을 지정하는 속성의 모음입니다. 스타일은 속성을 지정할 수 있음 여러 가지를 설정할 수 있습니다.

테마는 개별 뷰뿐만 아니라 앱, 활동 또는 뷰 계층 구조 전체에 적용되는 속성 모음입니다. 테마를 적용하면 앱 또는 활동의 모든 뷰에 테마에서 지원하는 각 테마 속성이 적용됩니다. 또한 테마를 통해 뷰 외 요소(예: 상태 표시줄 및 창 배경)를 사용합니다.

스타일 및 테마는 res/values/의 스타일 리소스 파일(일반적으로 이름은 styles.xml임)에서 선언됩니다.

그림 1. 동일한 활동에 적용되는 두 가지 테마: Theme.AppCompat (왼쪽) 및 Theme.AppCompat.Light (오른쪽)

테마와 스타일

테마와 스타일은 유사점이 많지만 용도가 서로 다릅니다. 테마와 스타일은 속성을 리소스에 매핑하는 키-값 쌍이라는 동일한 기본 구조를 갖습니다.

스타일은 특정 뷰 유형의 속성을 지정합니다. 예를 들어 한 가지 스타일은 버튼의 속성을 지정할 수 있습니다. 스타일에 지정하는 모든 속성은 레이아웃 파일에서 설정할 수 있는 속성입니다. 모든 속성을 스타일로 추출하면 사용 및 유지보수가 쉬워집니다. 여러 위젯에서 사용할 수 있습니다.

테마는 스타일, 레이아웃, 리소스별로 참조할 수 있는 이름이 지정된 리소스의 컬렉션을 정의합니다. 사용할 수 있습니다. 테마는 colorPrimary와 같은 시맨틱 이름을 Android 리소스에 할당합니다.

스타일 및 테마는 함께 작동하도록 설계되었습니다. 예를 들어 버튼의 한 부분은 colorPrimary이고 다른 부분은 colorSecondary이도록 지정하는 스타일을 만들 수 있습니다. 색상에 관한 실제 정의는 테마에서 제공됩니다. 기기가 야간 모드로 전환되면 앱이 '밝은' 테마에서 '어두운' 테마로 전환하고 모든 리소스 이름의 값을 변경할 수 있습니다. 스타일은 시맨틱 이름을 사용하고 특정 색상 정의가 아니기 때문에 변경할 필요가 없습니다.

테마와 스타일이 함께 작동하는 방법에 대한 자세한 내용은 블로그 게시물을 참조하세요. Android 스타일 지정: 테마와 스타일 비교

스타일 만들기 및 적용

새 스타일을 만들려면 프로젝트의 res/values/styles.xml 파일을 엽니다. 대상 다음 단계를 따르세요.

  1. 스타일을 고유하게 식별하는 이름을 사용하여 <style> 요소를 추가합니다.
  2. 정의하려는 각 스타일 속성에 <item> 요소를 추가합니다. 이 각 상품의 name는 있습니다. <item> 요소의 값은 이 속성의 값입니다.

예를 들어 다음 스타일을 정의한다고 가정해 보겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

다음과 같이 스타일을 뷰에 적용할 수 있습니다.

<TextView
    style="@style/GreenText"
    ... />

스타일에 지정된 각 속성은 뷰가 이를 허용하는 경우 해당 뷰에 적용됩니다. 뷰에서 허용하지 않는 모든 속성은 무시됩니다.

<ph type="x-smartling-placeholder">

그러나 개별 뷰에 스타일을 적용하는 대신 일반적으로 이 가이드의 다른 섹션에 설명된 대로 전체 앱, 활동 또는 뷰 모음에 스타일을 테마로 적용합니다.

스타일 확장 및 맞춤설정

나만의 스타일을 만들 때는 항상 프레임워크 또는 지원의 기존 스타일을 확장하세요. 라이브러리를 추가하여 플랫폼 UI 스타일과의 호환성을 유지할 수 있습니다. 스타일을 확장하려면 parent 속성을 사용하여 확장하려는 스타일을 지정하세요. 그런 다음 상속받은 스타일 속성을 재정의하고 새 스타일 속성을 추가할 수 있습니다.

예를 들어 Android 플랫폼의 기본 텍스트 모양을 상속받아 다음과 같이 수정할 수 있습니다.

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

그러나 항상 Android 지원 라이브러리에서 핵심 앱 스타일을 상속해야 합니다. 지원 라이브러리의 스타일은 각 버전에서 사용 가능한 UI 속성에 맞춰 각 스타일을 최적화함으로써 호환성을 제공합니다. 지원 라이브러리 스타일의 이름은 흔히 플랫폼의 스타일과 비슷하며 AppCompat 포함

라이브러리 또는 자체 프로젝트에서 스타일을 상속받으려면 상위 스타일 이름을 선언합니다. 이전 예에 표시된 @android:style/ 부분이 없는 경우 예를 들어 다음 예는 지원 라이브러리에서 텍스트 모양 스타일을 상속받습니다.

<style name="GreenText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#00FF00</item>
</style>

또한 parent 속성을 사용하는 대신 점 표기법을 통해 스타일 이름을 확장하여 스타일을 상속받을 수 있습니다(플랫폼의 스타일 제외). 즉, 상속받으려는 스타일 이름을 마침표로 구분하여 스타일 이름 앞에 붙입니다. 일반적으로 다른 라이브러리의 스타일이 아닌 자체의 고유한 스타일을 확장할 때만 이렇게 합니다. 예를 들어 다음 스타일은 앞의 예에서 GreenText의 모든 스타일을 상속합니다. 그런 다음 텍스트 크기를 늘립니다.

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

더 많은 이름을 체이닝하면 원하는 만큼 여러 번 이와 같은 방식으로 스타일을 계속 상속받을 수 있습니다.

<ph type="x-smartling-placeholder">

<item> 태그를 통해 선언할 수 있는 속성을 찾아보려면 다양한 클래스 참조의 'XML 속성' 표를 참고하세요. 모든 뷰 지원 기본의 XML 속성 View 클래스와 여러 뷰는 고유한 특수 속성을 추가합니다. 예를 들어 TextView XML 속성 포함 android:inputType 속성(예: EditText 위젯

스타일을 테마로 적용

스타일을 만들 때와 동일한 방식으로 테마를 만들 수 있습니다. 적용 방법에 차이가 있습니다. 뷰에서 style 속성으로 스타일을 적용하는 대신 android:theme 속성 또는 <application> 태그 <activity> 태그AndroidManifest.xml

예를 들어 다음은 Android 지원 라이브러리의 Material Design '어두운' 테마를 앱 전체에 적용하는 방법입니다.

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

다음은 하나의 활동에만 '밝은' 테마를 적용하는 방법입니다.

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

앱 또는 활동의 모든 뷰는 표시됩니다. 뷰가 스타일에 선언된 속성의 일부만 지원하면 뷰에는 지원되는 속성만 적용되고 지원되지 않는 속성은 무시됩니다.

Android 5.0(API 수준 21) 및 Android 지원 라이브러리 v22.1부터는 레이아웃 파일의 뷰에 android:theme 속성도 지정할 수 있습니다. 이렇게 하면 레이아웃 파일의 뷰 및 모든 하위 뷰의 테마가 수정되며 이 작업은 인터페이스의 특정 부분에서 테마 색상 팔레트를 변경하는 데 유용합니다.

앞의 예는 Android 지원 라이브러리에서 제공하는 Theme.AppCompat과 같은 테마를 적용하는 방법을 보여줍니다. 하지만 일반적으로 배경에 맞도록 테마를 맞춤설정하려고 합니다. 파악할 수 있습니다. 이를 위한 가장 좋은 방법은 지원 라이브러리에서 이러한 스타일을 확장하고 다음 섹션에 설명된 대로 일부 속성을 재정의합니다.

스타일 계층 구조

Android에서는 Android 앱 전체에 속성을 설정하는 다양한 방법을 제공합니다. 예를 들어 레이아웃에서 직접 속성을 설정하고, 뷰에 스타일을 적용하고, 레이아웃에 테마를 적용하고, 프로그래매틱 방식으로 속성을 설정할 수도 있습니다.

앱 스타일 지정 방법을 선택할 때 Android의 스타일 계층 구조에 유의해야 합니다. 일반적으로 테마 및 스타일을 최대한 일관되게 사용합니다. 여러 위치에 동일한 속성을 지정했다면 최종적으로 적용되는 속성은 다음 목록에 따라 결정됩니다. 목록은 가장 높은 우선순위에서 가장 낮은 순서로 정렬되어 있습니다.

  1. 텍스트 범위를 사용하여 문자 또는 단락 수준의 스타일 지정을 TextView 파생에 적용 있습니다.
  2. 프로그래매틱 방식으로 속성 적용
  3. 뷰에 개별 속성을 직접 적용합니다.
  4. 뷰에 스타일 적용
  5. 기본 스타일 지정
  6. 뷰 모음, 활동 또는 앱 전체에 테마 적용
  7. TextView의 TextAppearance 설정과 같이 특정 뷰에 고유한 스타일 지정 적용

그림 2. span의 스타일 지정은 textAppearance의 스타일 지정을 재정의합니다.

<ph type="x-smartling-placeholder">

TextAppearance

스타일의 한 가지 제한사항은 하나의 스타일만 View에 적용할 수 있다는 점입니다. TextView를 사용할 수 있지만, TextAppearance 속성 스타일과 유사하게 작동합니다.

<TextView
    ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

TextAppearance를 사용하면 텍스트의 스타일을 유지하면서 텍스트별 스타일을 정의할 수 있습니다. 다른 용도로 View를 사용할 수 있습니다. 그러나 View 또는 스타일에서 직접 텍스트 속성을 정의하면 정의된 값이 TextAppearance 값보다 우선 적용됩니다.

TextAppearance는 TextView 스타일 지정 속성의 하위 집합을 지원합니다. 제공합니다 전체 속성 목록은 TextAppearance

포함되지 않는 일반적인 TextView 속성은 lineHeight[Multiplier|Extra], lines, breakStrategy 및 hyphenationFrequency입니다. TextAppearance는 단락 수준이 아닌 문자 수준에서 작동하므로 전체 레이아웃에 영향을 미치는 속성은 지원되지 않습니다.

기본 테마 맞춤설정

Android 스튜디오를 사용하여 프로젝트를 만들 때 프로젝트의 styles.xml 파일에 정의된 대로 기본적으로 머티리얼 디자인 테마가 앱에 적용됩니다. 이 AppTheme 스타일은 지원 라이브러리의 테마를 확장하며 앱 바 및 플로팅 작업 버튼(사용된 경우)과 같은 주요 UI 요소에서 사용되는 색상 속성의 재정의를 포함하고 있습니다. 여러분은 은 제공된 색상을 업데이트하여 앱의 색상 디자인을 빠르게 맞춤설정할 수 있습니다.

예를 들어 styles.xml 파일은 다음과 유사합니다.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

스타일 값은 실제로 색상 리소스는 프로젝트의 res/values/colors.xml 파일 이 파일에서 색상을 변경합니다. 자세한 내용은 Material Design 색상 개요 를 사용하여 동적 색상 및 추가 맞춤 색상으로 사용자 환경을 개선합니다.

색상을 알게 되면 다음과 같이 res/values/colors.xml의 값을 업데이트합니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   Color for the app bar and other primary UI elements. -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   A darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars. -->
    <color name="colorPrimaryDark">#303F9F</color>

    <!--   a secondary color for controls like checkboxes and text fields. -->
    <color name="colorAccent">#FF4081</color>
</resources>

그런 다음 원하는 다른 스타일을 재정의할 수 있습니다. 예를 들어 다음과 같이 활동 배경 색상을 변경할 수 있습니다.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:windowBackground">@color/activityBackground</item>
</style>

테마에 사용할 수 있는 속성 목록은 R.styleable.Theme의 속성 표를 참고하세요. 추가 시 스타일을 적용할 때 'XML 속성' 뷰 클래스 참조의 테이블입니다. 예를 들어 모든 뷰는 기본 View의 XML 속성 클래스를 참조하세요.

대부분의 속성은 특정 유형의 뷰에 적용되며 일부 속성은 모든 뷰에 적용됩니다. 하지만 일부 테마 속성은 R.styleable.Theme 적용 대상 레이아웃의 뷰가 아니라 활동 창에 표시됩니다. 예를 들어 windowBackground는 창 배경을 변경하고 windowEnterTransition은 활동이 시작될 때 사용할 전환 애니메이션을 정의합니다. 자세한 내용은 시작하기 활동을 수동으로 구현할 수 있습니다.

Android 지원 라이브러리는 테마를 맞춤설정하는 데 사용할 수 있는 다른 속성도 제공합니다. Theme.AppCompat에서 확장됨(예:colorPrimary 이전 예에서 볼 수 있습니다 이러한 주제는 라이브러리의 attrs.xml 파일을 참조하세요.

<ph type="x-smartling-placeholder">

지원 라이브러리에서 확장할 수 있는 다양한 테마도 제공됩니다. 기존 예에 표시된 항목 대신 사용 가능한 테마는 라이브러리의 themes.xml 파일을 참조하세요.

버전별 스타일 추가

새 버전의 Android에 사용하려는 테마 속성을 추가할 때 기존 테마에 이 속성을 추가할 수 있으며 이는 이전 버전과 계속 호환됩니다. 리소스 버전 한정자를 포함하는 values 디렉터리에 저장된 또 다른 styles.xml 파일만 있으면 됩니다.

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

values/styles.xml 파일의 스타일을 모든 버전에서 사용할 수 있으므로 values-v21/styles.xml의 테마는 스타일을 상속할 수 있습니다. 즉, GCP의 'base'로 시작하여 스타일 복제 버전별 코드로 확장하여 스타일입니다.

예를 들어, Android 5.0 (API 수준 21) 이상에서 창 전환을 선언하려면 새 속성을 사용할 수 있습니다. 따라서 res/values/styles.xml의 기본 테마는 다음과 같을 수 있습니다.

<resources>
    <!-- Base set of styles that apply to all versions. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryTextColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <!-- Declare the theme name that's actually applied in the manifest file. -->
    <style name="AppTheme" parent="BaseAppTheme" />
</resources>

그런 다음 다음과 같이 res/values-v21/styles.xml에서 버전별 스타일을 추가합니다.

<resources>
    <!-- extend the base theme to add styles available only with API level 21+ -->
    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowActivityTransitions">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
    </style>
</resources>

이제 매니페스트 파일에서 AppTheme을 적용할 수 있으며 시스템은 각 시스템 버전에서 사용할 수 있는 스타일을 선택합니다.

다양한 기기에 대체 리소스를 사용하는 방법을 자세히 알아보려면 다음을 참고하세요. 대체 리소스 제공.

위젯 스타일 맞춤설정

프레임워크 및 지원 라이브러리의 모든 위젯에는 기본 스타일이 있습니다. 예를 들어 지원 라이브러리의 테마를 사용하여 앱의 스타일을 지정할 때 Button 인스턴스의 스타일은 Widget.AppCompat.Button 스타일을 사용하여 지정됩니다. 다른 위젯 스타일을 지정하고 레이아웃 파일의 style 속성을 사용하면 됩니다. 예를 들어 다음은 라이브러리의 테두리 없는 버튼 스타일을 적용합니다.

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

이 스타일을 모든 버튼에 적용하려면 다음과 같이 테마의 buttonStyle에서 선언하면 됩니다.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
    ...
</style>

또한 다른 모든 스타일을 확장하는 것처럼 위젯 스타일도 확장할 수 있습니다. 그런 다음 레이아웃 또는 테마에 맞춤 위젯 스타일을 적용할 수 있습니다.

추가 리소스

테마와 스타일에 관해 자세히 알아보려면 다음 추가 리소스를 참고하세요.

블로그 게시물