1. 시작하기 전에
이 Codelab에서는 Material Design 3의 새로운 기능을 사용하여 애플리케이션의 사용자 인터페이스가 사용자의 배경화면에 따라 동적으로 테마를 지정할 수 있도록 스타터 앱인 팁 계산기 앱을 업데이트합니다. 다음은 동적 색상이 적용된 애플리케이션의 스크린샷입니다. 색상이 적용되는 방식을 제어할 수 있는 몇 가지 추가 시나리오도 살펴봅니다.
기본 요건
개발자는
- Android의 기본 테마 개념에 익숙함
- 앱 테마 수정에 익숙함
학습할 내용
- 기존 Material 구성요소와 Material 3 테마를 구분하는 방법
- 테마를 Material 3로 업데이트하는 방법
- Google 도구를 사용하여 테마를 만들고 적용하는 방법
- 테마 속성이 서로 관련되는 방식
필요한 항목
- Android 스튜디오가 설치된 컴퓨터
- Tip Time 애플리케이션의 코드 https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution
2. 시작 앱 개요
Tip Time 앱은 팁을 맞춤설정하는 옵션이 포함된 팁 계산기 앱입니다. Kotlin으로 배우는 Android 기본사항 교육 과정의 샘플 앱 중 하나입니다.
3. Gradle 종속 항목 업데이트
실제 테마를 업데이트하고 동적 색상을 적용하기 전에 애플리케이션의 build.gradle 파일에서 몇 가지 변경사항을 적용해야 합니다.
종속 항목 섹션에서 Material 라이브러리가 1.5.0-alpha04 이상인지 확인합니다.
dependencies {
// ...
implementation 'com.google.android.material:material:<version>'
}
android 섹션에서 compileSdkVersion 및 targetSdkVersion 변경
31 이상:
android {
compileSdkVersion 31
// ...
defaultConfig {
// ...
targetSdkVersion 31
}
}
이 안내에서는 비교적 최신 종속 항목이 있는 앱을 가정합니다. 아직 Material을 사용하지 않거나 최신 버전이 아닌 앱의 경우 Android용 Material Design 구성요소의 시작 문서에 나온 안내를 확인하세요.
테마를 만든 위치에서 Theme.MaterialComponents.*의 참조를 Theme.Material3.*로 변경합니다. 일부 스타일에는 아직 Material3 네임스페이스의 새 스타일이 없지만 상위 테마가 Theme.Material3.*로 업데이트되면 대부분의 구성요소가 새 스타일을 상속합니다. 아래에서 버튼이 새로운 라운드 테마를 적용한 것을 확인할 수 있습니다.
아래 테마 파일에서는 상위 테마만 변경되었습니다. 잠시 후 이 테마를 완전히 대체할 예정입니다. 일부 색상 속성이 지원 중단되었으며, Google에서 만든 일부 맞춤 스타일이 이제 Material3에서 표준이 되었지만
themes.xml
<style name="Theme.TipTime" parent="Theme.Material3.Light">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/green</item>
<item name="colorPrimaryVariant">@color/green_dark</item>
<item 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>
<!-- For text input fields -->
<item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
<!-- For radio buttons -->
<item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
<!-- For switches -->
<item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>
4. 색상 테마 및 색상 역할 이해
Material 3 색상 시스템은 체계적인 접근 방식을 사용하여 UI에 색상을 적용합니다. Theme.AppCompat의 여러 속성이 여전히 사용되고 있습니다. 하지만 Theme.MaterialComponents.*에 더 많은 속성이 추가되었고 Theme.Material3.*에는 훨씬 더 많은 속성이 추가되었으므로 앱의 모든 화면을 검사하여 구현되지 않은 속성이 기본 테마에서 누출되지 않는지 확인하는 것이 중요합니다.
색상 역할 이해
Material 3 테마에는 색상과 관련된 속성이 20개가 넘습니다. 처음에는 어려워 보일 수 있지만, 동일한 4~5개의 색상 역할과 결합하여 파생 색상을 만드는 핵심 색상은 몇 개에 불과합니다.
이러한 색상 그룹은 다음과 같습니다.
- Primary: 앱의 기본 색상
- Secondary: 앱의 보조 색상
- 3차: 기본 및 보조 색상을 보완하는 세 번째 색상
- 오류, 오류 텍스트 및 대화상자에 사용됨
- 배경
- Surface, SurfaceVariant, Surface Inverse
기본, 보조, 3차, 오류의 역할은 다음과 같습니다.
<기본 색상> | 기본 색상 |
on<base color> | 기본 색상에 표시되는 아이콘과 텍스트의 색상 |
<기본 색상> 컨테이너 | 기본 색상에서 파생되며 버튼, 대화상자 등에 사용됩니다. |
on<base color>Container | 컨테이너의 아이콘 및 텍스트 색상 |
예를 들어 Material 3의 기본 스타일이 적용된 플로팅 작업 버튼은 Primary를 기본 색상으로 사용하므로 버튼의 배경색에는 primaryContainer을 사용하고 콘텐츠에는 onPrimaryContainer를 사용합니다.
테마를 직접 맞춤설정할 때는 변경하는 모든 기본 색상의 on<base color> 속성이 여전히 읽을 수 있는지 최소한 확인해야 합니다.
기본 색상부터 앱까지 아티팩트가 없도록 색상 그룹의 모든 역할을 동시에 조정하는 것이 좋습니다.
배경과 표면 기본 색상에는 일반적으로 기본 색상 자체와 그 위에 표시되는 아이콘이나 텍스트의 on<base color>라는 두 가지 역할이 있습니다.
5. Material Theme Builder로 Material 3 테마 만들기
Material Theme 빌더를 사용하면 맞춤 색 구성표를 쉽게 빌드하고, 내장된 코드 내보내기를 사용하여 M3 색상 시스템으로 이전하고 동적 색상을 활용할 수 있습니다. 자세히 알아보기: material.io/material-theme-builder
Tip Time 앱 테마에는 구성요소의 스타일이 여러 개 포함되어 있지만 대부분의 스타일은 Material 3 테마의 기본값입니다. 기본 색상과 보조 색상만 신경 쓰면 됩니다.
이는 녹색 기본 색상 (#1B5E20)과 파란색 보조 색상 (#0288D1)에 해당합니다.
이러한 색상을 Material 테마 빌더에 입력하고 전체 테마를 내보낼 수 있습니다 (다른 곳에 전체 개요로 연결되는 링크가 있다고 가정).
입력한 색상은 색상 생성 알고리즘에 맞게 톤이 변경되어 보색을 이루고 읽기 쉬운 색상이 될 수 있습니다.
아래는 맞춤 색상을 입력할 때 생성되는 값의 하위 집합입니다.
6. Material Theme 빌더 내보내기 파일 작업
내보내기 보관 파일에는 밝은 테마와 어두운 테마에 해당하는 자체 themes.xml 파일이 있는 values 및 values-night 디렉터리가 포함되어 있습니다. 모든 색상은 values/colors.xml에 정의되어 있습니다.
파일은 그대로 복사할 수 있지만 AndroidManifest.xml 또는 테마 파일에서 테마 이름을 서로 일치하도록 변경해야 합니다. 도구의 기본 이름은 AppTheme입니다.
앱을 다시 시작하면 거의 똑같이 표시됩니다. 주목할 만한 변경사항 중 하나는 선택된 상태가 이제 2차 색상이 아닌 기본 색상의 톤으로 테마가 지정된 스위치와 라디오 버튼입니다. 대규모 애플리케이션에서는 일부 설계를 다시 검토해야 할 수 있습니다.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tiptime">
<application ...>
<activity android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
7. 동적 색상 추가
Material 3 테마를 적절히 사용하면 몇 가지 작은 추가사항으로 UI를 동적으로 만들 수 있습니다.
동적 색상 API를 사용하면 모든 활동에 동적 색상을 적용할 수 있습니다.
앱, 개별 활동 또는 개별 뷰나 프래그먼트에 적용할 수 있습니다. 대상:
이 앱에서는 동적 색상을 전역으로 적용합니다.
Application 클래스 파일 만들기
class TipTimeApplication: Application() {
override fun onCreate() {
// Apply dynamic color
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Android 매니페스트에서 새로 만든 파일을 참조해야 합니다.
AndroidManifest.xml
< application android name=".TipTimeApplication
<!--- Other existing attributes –>
</application >
Android 12 이상 시스템에서는 기본 스킴의 사용자 배경화면을 검사하여 여러 톤 팔레트를 생성합니다. 이러한 팔레트의 값은 ThemeOverlay를 만드는 데 사용됩니다.
DynamicColors 클래스는 ActivityPreCreated에서 가로채 시스템 생성 동적 테마 오버레이 또는 사용자가 제공한 오버레이를 적용하는 ActivityLifecycleCallbacks를 등록합니다.
8. 맞춤 테마 오버레이 적용
Google 도구는 테마 오버레이를 내보낼 수 있지만, 소수의 속성을 재정의하는 경우 수동으로 만들 수도 있습니다.
테마 오버레이는 다른 테마와 함께 사용하기 위한 것으로, 기본 테마 위에 변경될 값만 제공합니다.
브랜딩과 같은 이유로 기본 색상 톤이 빨간색 음영이어야 한다고 가정해 보겠습니다. 다음 파일과 속성을 사용하면 됩니다.
colors.xml
<resources>
<color name="overlay_light_primary">#9C4146</color>
<color name="overlay_light_onPrimary">#FFFFFF</color>
<color name= "overlay_light_primaryContainer">#FFDADB</color>
<color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >
themes_overlays.xml
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
<item name="colorPrimary">@color/overlay_light_primary</item>
<item name="colorOnPrimary">@color/overlay_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>
위 코드의 경우 Android 12는 동적 밝은 테마를 적용하고 그 위에 변경사항을 오버레이합니다. 또는 다음을 비롯한 유효한 ThemeOverlay를 상위 항목으로 사용할 수 있습니다.
ThemeOverlay.Material3.Light
ThemeOverlay.Material3.Dark
ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark
ThemeOverlay.Material3.DynamicColors.DayNight
Material 기본값 대신 이 테마 오버레이를 사용하려면 DynamicColors.applyToActivitiesIfAvailable 호출을 다음과 같이 변경하세요.
DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)
9. 맞춤 속성에 동적 색상 추가
지금까지 Material 3 테마에 이미 있는 속성을 재정의했습니다. 할당해야 하는 맞춤 속성이 하나 이상 있을 수 있는 동적 색상의 또 다른 가능한 사례가 있습니다.
앱이 동적 색상을 선택하면 다음과 같은 대략적인 역할을 하는 5개의 색조 팔레트(강조 팔레트 3개, 중립 팔레트 2개)에 액세스할 수 있습니다.
system_accent1 | 기본 색상 톤 |
system_accent2 | 보조 색조 |
system_accent3 | 3차 색상 톤 |
system_neutral1 | 중립적인 배경과 표면 |
system_neutral2 | 중립적인 표면과 윤곽선 |
각 팔레트에는 흰색에서
검은색: 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000
동적 색상의 UI를 디자인할 때는 특정 색상보다는 디자인 시스템의 다른 색상과의 관계를 고려해야 합니다.
보조 강조 색상 팔레트를 사용하여 아이콘에 테마를 적용하고 attrs.xml에 다음 항목을 사용하여 아이콘을 색조 처리하는 속성을 추가한다고 가정해 보겠습니다.
attrs.xml
<resources>
<attr name="iconColor" format="color" />
</resources>
테마 오버레이는 다음과 같을 수 있습니다.
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight">
<item name="iconColor">@android:color/system_accent2_600</item>
</style>
앱을 재설치하고 배경화면을 변경하면 앱이 보조 팔레트를 선택합니다.
이러한 팔레트는 Android 12 (API 31)에만 적용되므로 앱의 최소 SDK가 31 이상으로 설정되어 있지 않은 경우 -v31 접미사가 있는 폴더에 관련 파일을 배치해야 합니다.
10. 요약
이 Codelab에서 다음 작업을 수행했습니다.
- 종속 항목을 추가하여 테마를 Material 3로 업그레이드합니다.
- 새 색상 그룹과 역할을 이해합니다.
- 정적 테마에서 동적 색상으로 마이그레이션하는 방법을 알아봅니다.
- 테마 오버레이를 사용하고 맞춤 테마 속성에 동적 색상을 사용하는 방법을 이해합니다.