MDC-103 Android: 색상, 고도, 활자를 사용한 머티리얼 테마 설정 (Kotlin)

머티리얼 구성요소(MDC)를 통해 개발자는 머티리얼 디자인을 구현할 수 있습니다. Google의 엔지니어와 UX 디자이너로 구성된 팀에서 만든 MDC는 아름답고 기능적인 수십 가지의 UI 구성요소가 특징이며 Android, iOS, 웹, Flutter용으로 제공됩니다. material.io/develop

Codelab CMD-101과 MDB-102에서는 머티리얼 구성요소(MDC)를 사용하여 의류와 가정용품을 판매하는 전자상거래 앱인 Shine이라는 앱의 기본사항을 빌드했습니다. 이 앱에는 로그인 화면에서 시작하여 제품을 표시하는 홈 화면으로 이동하는 사용자 흐름이 포함되어 있습니다.

머티리얼 디자인이 최근 확장됨에 따라 디자이너와 개발자는 제품 브랜드를 더욱 유연하게 표현할 수 있습니다. 이제 MDC를 사용하여 Shrine을 맞춤설정하고 고유한 스타일을 반영할 수 있습니다.

빌드할 항목

이 Codelab에서는 다음을 사용하여 브랜드를 반영하도록 Shrine을 맞춤설정합니다.

• 색상
• 서체
• 고도
• 레이아웃

이 Codelab은 의류 및 가정용품을 판매하는 전자상거래 앱인 Shrine을 빌드하는 방법을 설명하는 Codelab 네 개 중 세 번째 Codelab입니다. 관련 Codelab은 아래에서 확인할 수 있습니다. MDC-101: 머티리얼 구성요소(MDC) 기본사항 MDC-102: 머티리얼 디자인 구조 및 레이아웃 MDC-104: 머티리얼 디자인 고급 구성요소 MDC 104가 끝나면 다음과 같은 앱이 빌드됩니다.

이 Codelab에 사용되는 MDC Android 구성요소 및 하위 시스템:

• 테마
• 서체
• 고도

필요한 항목

• Android 개발 관련 기본 지식
• Android 스튜디오(아직 다운로드하지 않은 경우 여기에서 다운로드)
• Android Emulator 또는 기기(Android 스튜디오를 통해 사용 가능)
• 샘플 코드(다음 단계 참고)

Android 앱 빌드 경험 수준을 평가해주세요.

초급 중급 고급

MDC-102에서 계속 진행하시겠어요?

MDC-102를 완료했으면 이 Codelab을 위한 코드가 준비된 것입니다. 3단계: 색상 변경으로 건너뜁니다.

시작 Codelab 앱 다운로드

시작 앱 다운로드

시작 앱은 material-components-android-codelabs-103-starter/kotlin 디렉터리에 있습니다. 시작하기 전에 이 디렉터리로 cd 이동하세요.

...또는 GitHub에서 클론

이 Codelab을 GitHub에서 클론하려면 다음 명령어를 실행하세요.

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 103-starter

자세한 내용은 GitHub에서 저장소 클론을 참고하세요.

Android 스튜디오에서 시작 코드 로드

1. 설정 마법사가 완료되고 Welcome to Android Studio 창이 표시되면 Open an existing Android Studio project를 클릭합니다. 샘플 코드를 설치한 디렉터리로 이동하고 kotlin -> 신사(또는 컴퓨터에서 shrine 검색)를 선택하여 배송 프로젝트를 엽니다.
2. Android 스튜디오 창 하단의 활동 표시기에 나타나는 것처럼 Android 스튜디오가 프로젝트를 빌드하고 동기화할 때까지 잠시 기다립니다.
3. 이 시점에서 Android 스튜디오에 아래와 같은 빌드 오류가 발생할 수 있습니다. Android SDK나 빌드 도구가 누락되었기 때문입니다. Android 스튜디오의 안내를 따라 이러한 항목을 설치/업데이트하고 프로젝트를 동기화합니다.

프로젝트 종속 항목 추가하기

프로젝트에는 MDC Android 지원 라이브러리에 대한 종속 항목이 필요합니다. 다운로드한 샘플 코드에는 이 종속 항목이 이미 나열되어 있지만 다음 단계를 따라 실행하는 것이 좋습니다.

1. app 모듈의 build.gradle 파일로 이동하여 dependencies 블록에 MDC Android 종속 항목이 포함되어 있는지 확인합니다.

api 'com.google.android.material:material:1.1.0-alpha06'

2. (선택사항) 필요한 경우 build.gradle 파일을 수정하여 다음 종속 항목을 추가하고 프로젝트를 동기화합니다.

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

시작 앱 실행

Run / Play 버튼 왼쪽에 있는 빌드 구성이 app인지 확인합니다. 녹색 실행/재생 버튼을 눌러 앱을 빌드하고 실행합니다. 사용 가능한 기기에 이미 Android 기기가 나열되어 있다면 Select Deployment Target 창에서 8단계로 건너뜁니다. 나열되어 있지 않으면 Create New Virtual Device를 클릭합니다. Select Hardware 화면에서 Pixel 2와 같은 휴대전화 기기를 선택한 후 Next를 클릭합니다. System Image 화면에서 최신 Android 버전(가장 높은 API 수준 권장)을 선택합니다. 설치되어 있지 않은 경우 표시되는 다운로드 링크를 클릭하고 다운로드를 완료합니다. 다음을 클릭합니다. Android Virtual Device (AVD) 화면에서 설정을 그대로 두고 Finish를 클릭합니다. 배포 대상 대화상자에서 Android 기기를 선택합니다. 확인을 클릭합니다. Android 스튜디오가 앱을 빌드하고 배포한 후 자동으로 대상 기기에서 앱을 엽니다.

종속 항목을 추가하거나 앱을 정상적으로 실행할 수 없으면 개발자 환경을 중지하고 문제를 해결합니다.

빌드할 때 INSTALL_FAILED_INVALID_APK 오류가 발생하면 Android 스튜디오에서 Build' -> ‘Clean Project'를 실행해 보세요.

완료되었습니다. 기기 또는 에뮬레이터에서 Shrines 로그인 페이지가 실행 중인 것을 확인할 수 있습니다. '다음'을 누르면 상단에 Shrine 홈페이지가 표시되고 그 아래에 제품 이미지 그리드가 표시됩니다.

상단 앱 바가 색상, 고도, 서체를 변경하여 Shrine 브랜드와 일치하도록 해 보세요.

이 색상 테마는 디자이너가 맞춤 색상으로 만든 것입니다(아래 그림 참고). 색상 테마는 Shrine 분기에서 선택되어 Material Theme Editor에 적용된 색상을 포함하고 있으며, 더 풍부한 팔레트를 만들기 위해 색상을 확장했습니다. 이러한 색상은 2014 머티리얼 색상 팔레트의 색상이 아닙니다.

Material Theme Editor는 색상을 숫자 라벨(각 색상에 지정된 50, 100, 200에서 900까지의 라벨 포함)이 지정된 셰이드로 구성합니다. Shrine은 분홍색 견본에서 셰이드 50, 100, 300만, 갈색 견본에서 900만 사용합니다.

상단 앱 바의 색상을 변경하여 색 구성표를 반영하도록 합니다.

colorPrimaryDark 및 colorAccent 설정

colors.xml에서 다음 줄을 수정합니다. colorAccent 속성은 무엇보다도 상단 앱 바의 색상을 제어하고 colorPrimaryDark 속성은 상태 표시줄의 색상을 제어합니다.

colors.xml

<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>

상태 표시줄에서 어두운 아이콘을 사용하려면 Theme.Shrine, Shrine 앱 테마에 다음을 추가합니다.

styles.xml

<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

힌트: 아래와 같이 <resource> 태그에서 도구 네임스페이스를 가져와야 합니다.

<resources xmlns:tools="http://schemas.android.com/tools">

colors.xml 및 styles.xml은 다음과 같이 표시됩니다.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="toolbarIconColor">#FFFFFF</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

colors.xml에서 #442C2E로 설정된 새 textColorPrimary 색상 리소스를 추가하고 textColorPrimary 색상을 참조하도록 toolbarIconColor 속성을 업데이트합니다.

styles.xml 파일을 업데이트하여

속성을 방금 정의한 textColorPrimary 색상에 사용합니다.

한 가지 작업이 더 있습니다. Widget.Shrine.Toolbar 스타일의 android:theme 속성을 Theme.Shrine로 설정하세요.

Theme.Shrine의 android:textColorPrimary를 설정하면 상단 앱 바 등 상단 앱 바의 아이콘 등 모든 요소의 텍스트 스타일이 지정됩니다.

colors.xml 및 styles.xml은 다음과 같이 표시됩니다.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

빌드와 실행 이제 제품 그리드가 다음과 같이 표시됩니다.

색 구성표에 맞게 로그인 화면 스타일을 변경해 보겠습니다.

텍스트 입력란 스타일 지정

로그인 페이지의 텍스트 입력을 간략히 설명하고 레이아웃에 더 나은 색상을 사용하도록 하겠습니다.

colors.xml 파일에 다음 색상 리소스를 추가합니다.

colors.xml

<color name="textInputOutlineColor">#FBB8AC</color>

styles.xml에 두 가지 새로운 스타일을 추가합니다.

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
   <item name="hintTextColor">@color/textColorPrimary</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>

<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

마지막으로 shr_login_fragment.xml의 TextInputLayout XML 구성요소 모두에서 스타일 속성을 새 스타일로 설정합니다.

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="text"
       android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

버튼 색상 스타일 지정

마지막으로 로그인 페이지의 버튼 색상에 스타일을 지정합니다. styles.xml에 다음 스타일을 추가합니다.

styles.xml

<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
   <item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Widget.Shrine.Button 스타일은 기본 MaterialButton 스타일에서 확장되며 버튼의 텍스트 색상과 배경 색조를 변경합니다. Widget.Shrine.Button.TextButton는 기본 텍스트 MaterialButton 스타일에서 확장되며 텍스트 색상만 변경합니다.

다음 버튼에 Widget.Shrine.Button 스타일을 설정하고 취소 버튼에 Widget.Shrine.Button.TextButton 스타일을 설정합니다.

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       style="@style/Widget.Shrine.Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

로그인 페이지에서 Shrine 로고 색상을 업데이트합니다. 벡터 드로어블 shr_logo.xml을 약간 변경해야 합니다. 드로어블 파일을 열고 android:fillAlpha 속성을 1로 변경합니다. 드로어블은 다음과 같이 표시됩니다.

shr_logo.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="149dp"
   android:height="152dp"
   android:tint="?attr/colorControlNormal"
   android:viewportWidth="149"
   android:viewportHeight="152">
   <path
       android:fillAlpha="1"
       android:fillColor="#DADCE0"
       android:fillType="evenOdd"
       android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
       android:strokeWidth="1"
       android:strokeAlpha="0.4"
       android:strokeColor="#00000000" />
</vector>

그런 다음 다음과 같이 shr_login_fragment.xml의 로고 <ImageView>에서 android:tint 속성을 ?android:attr/textColorPrimary로 설정합니다.

shr_login_fragment.xml

<ImageView
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="48dp"
   android:layout_marginBottom="16dp"
   android:tint="?android:attr/textColorPrimary"
   app:srcCompat="@drawable/shr_logo" />

빌드와 실행 이제 로그인 화면이 다음과 같이 표시됩니다.

색상 및 테마 관련 참고사항:

• UI 색상을 맞춤설정하여 브랜드를 더 잘 표현할 수 있습니다.
• 두 가지 색상(기본 색상과 보조 색상)에서 시작되는 색상 팔레트를 만들어 보세요. 두 가지 색상의 밝고 어두운 변형도 포함하세요. 또는 머티리얼 디자인 팔레트 도구를 사용하여 팔레트를 생성하세요.
• 서체 색상을 잊지 마세요.
• 텍스트와 배경 색상 대비가 액세스 가능한 비율(큰 활자는 3:1, 작은 활자는 4.5:1)이 되도록 하세요.

디자이너는 색상 변경 외에도 사이트에서 사용할 수 있는 서체를 제공했습니다. 상단 앱 바에도 추가해 보겠습니다.

상단 앱 바 스타일 지정

상단 앱 바의 스타일과 디자이너가 제공한 디자인에 맞춰 스타일을 지정합니다. 다음 텍스트 모양 스타일을 styles.xml에 추가하고 Widget.Shrine.Toolbar 스타일에서 이 스타일을 참조하도록 titleTextAppearance 속성을 설정합니다.

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">@style/Theme.Shrine</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
   <item name="android:textSize">16sp</item>
</style>

colors.xml 및 styles.xml은 다음과 같이 표시됩니다.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
   <color name="textInputOutlineColor">#FBB8AC</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
       <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
       <item name="hintTextColor">@color/textColorPrimary</item>
       <item name="android:paddingBottom">8dp</item>
       <item name="boxStrokeColor">@color/textInputOutlineColor</item>
   </style>

   <style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
       <item name="backgroundTint">?attr/colorPrimaryDark</item>
   </style>

   <style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
       <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
   </style>

   <style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
       <item name="android:textSize">16sp</item>
   </style>

</resources>

라벨에 스타일 지정하기

올바른 텍스트 디자인을 사용하고 카드 내에서 가로로 가운데 위치하도록 제품 카드 라벨의 스타일을 지정합니다.

다음과 같이 제목 라벨의 서체를 textAppearanceHeadline6에서 textAppearanceSubtitle2로 업데이트합니다.

shr_product_card.xml

<TextView
   android:id="@+id/product_title"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@string/shr_product_title"
   android:textAppearance="?attr/textAppearanceSubtitle2" />

이미지 라벨을 중앙에 배치하려면 shr_product_card.xml에서 <TextView> 라벨을 수정하여 android:textAlignment="center" 속성을 설정합니다.

shr_product_card.xml

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:padding="16dp">

   <TextView
       android:id="@+id/product_title"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_title"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceSubtitle2" />

   <TextView
       android:id="@+id/product_price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_description"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>

빌드와 실행 이제 제품 그리드 화면이 다음과 같이 표시됩니다.

로그인 화면의 서체가 일치하도록 변경합니다.

로그인 화면의 서체 변경

styles.xml에서 다음 스타일을 추가합니다.

styles.xml

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

shr_login_fragment.xml에서 새 스타일을 "SHRINE" 제목 <TextView>로 설정하고 여기에 있는 textAllCaps 및 textSize 속성을 삭제합니다.

shr_login_fragment.xml

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginBottom="132dp"
   android:text="@string/shr_app_name"
   android:textAppearance="@style/TextAppearance.Shrine.Title" />

빌드와 실행 이제 로그인 화면이 다음과 같이 표시됩니다.

서체 관련 참고사항:

• 작은 활자와 본문 텍스트에 사용되는 텍스트 글꼴을 선택할 때는 특정 스타일의 글꼴이 아닌 또렷한 글꼴을 선택하세요.
• 큰 활자와 제목에 사용되는 표시 글꼴은 브랜드를 표현하거나 강조하는 데 사용해야 합니다.

지금까지 Shrine에 어울리는 특정 색상과 서체로 페이지의 스타일을 지정했습니다. 이제 Shrine의 제품을 보여주는 카드를 살펴보겠습니다. 현재 이러한 메뉴는 앱의 탐색 분석이 있는 흰색 표면에 배치되어 있습니다. 제품에 대한 관심을 유도하기 위해 보다 강조하겠습니다.

제품 그리드 고도 변경

콘텐츠가 상단 앱 바 위에 있는 시트에 있는 것처럼 보이도록 하려면 상단 앱 바의 고도를 변경합니다. 다음과 같이 app:elevation 속성을 AppBarLayout에 추가하고 android:elevation 속성을 shr_product_grid_fragment.xml의 NestedScrollView XML 구성요소에 추가합니다.

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:elevation="0dp">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:navigationIcon="@drawable/shr_menu"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   android:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

카드 고도 변경 (색상)

shr_product_card.xml의 app:cardElevation을 2dp에서 0dp로 변경하여 모든 카드의 고도를 조정합니다. app:cardBackgroundColor도 @android:color/transparent로 변경합니다.

shr_product_card.xml

<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/transparent"
   app:cardElevation="0dp"
   app:cardPreventCornerOverlap="true">

이것 좀 보세요! 제품 그리드 페이지에서 모든 카드의 고도를 조정했습니다.

다음 버튼의 고도 변경

styles.xml에서 다음 속성을 Widget.Shrine.Button 스타일에 추가합니다.

styles.xml

<item name="android:stateListAnimator" tools:ignore="NewApi">
    @animator/shr_next_button_state_list_anim
</item>

참고: 이 코드를 작성할 때 Android 스튜디오에 Cannot resolve 기호 오류가 발생하면 Alt + Enter(Mac의 경우 Option + Return)를 눌러 누락된 기호를 가져옵니다.

Button의 스타일에서 android:stateListAnimator를 설정하면 제공된 애니메이터를 사용하도록 다음 버튼이 설정됩니다.

빌드와 실행 이제 로그인 화면이 다음과 같이 표시됩니다.

고도 관련 참고사항:

• 모든 머티리얼 디자인 노출 영역과 구성요소에는 고도 값이 있습니다.
• 한 노출 영역이 끝나고 다른 노출 영역이 시작하는 경계는 노출 영역 가장자리로 구분됩니다.
• 노출 영역 간의 고도 차이는 흐린 배경, 밝은 배경 또는 그림자를 사용하여 표현할 수 있습니다.
• 다른 노출 영역 앞에 있는 노출 영역은 일반적으로 더 중요한 콘텐츠를 담고 있습니다.

각 카드가 서로 독특하게 표시되도록 레이아웃을 변경해 다양한 가로세로 비율과 크기로 카드를 표시하세요.

시차가 있는 RecyclerView 어댑터 사용

staggeredgridlayout 패키지에 새로운 RecyclerView 어댑터를 제공하여 가로로 스크롤하기 위한 비대칭 카드 레이아웃을 표시합니다. 코드를 직접 살펴보면 되지만, 이 코드가 어떻게 구현되는지는 자세히 살펴보지 않겠습니다.

이 새 어댑터를 사용하려면 ProductGridFragment.kt에서 onCreateView() 메서드를 수정합니다. RecyclerView&; 주석 설정을 설정한 후 코드 블록을 다음과 같이 바꿉니다.

ProductGridFragment.kt

// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
val gridLayoutManager = GridLayoutManager(context, 2, RecyclerView.HORIZONTAL, false)
gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
   override fun getSpanSize(position: Int): Int {
       return if (position % 3 == 2) 2 else 1
   }
}
view.recycler_view.layoutManager = gridLayoutManager
val adapter = StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

다음과 같이 shr_product_grid_fragment.xml를 약간 변경하여 NestedScrollView에서 패딩을 삭제해야 합니다.

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

마지막으로 ProductGridItemDecoration.kt를 수정하여 RecyclerView 내에서 카드 패딩도 조정합니다. ProductGridItemDecoration.kt의 getItemOffsets() 메서드를 다음과 같이 수정합니다.

ProductGridItemDecoration.kt

override fun getItemOffsets(outRect: Rect, view: View,
                           parent: RecyclerView, state: RecyclerView.State?) {
   outRect.left = smallPadding
   outRect.right = largePadding
}

빌드와 실행 이제 제품 그리드 항목이 시차를 두어야 합니다.

색상은 브랜드를 표현하는 강력한 방법이므로, 작은 색상 변화도 사용자 경험에 큰 영향을 미칠 수 있습니다. 이 사항을 테스트하기 위해 브랜드의 색 구성표가 완전히 달라지면 Shrine이 어떻게 표시되는지 살펴보겠습니다.

스타일 및 색상 수정

styles.xml에서 다음과 같은 새 테마를 추가합니다.

styles.xml

<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
   <item name="colorPrimary">#FFCF44</item>
   <item name="colorPrimaryDark">#FD9725</item>
   <item name="colorAccent">#FD9725</item>
   <item name="colorOnPrimary">#FFFFFF</item>
   <item name="colorError">#FD9725</item>
</style>

AndroidManifest.xml의 애플리케이션에서 이 새 테마를 사용합니다.

AndroidManifest.xml

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
  android:name="com.google.codelabs.mdc.kotlin.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Autumn">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
</application>

아래와 같이 colors.xml의 툴바 아이콘 색상을 수정합니다.

colors.xml

<color name="toolbarIconColor">#FFFFFF</color>

그런 다음, 하드코딩하는 대신 "?theme" 속성을 사용하여 현재 테마를 참조하도록 툴바 스타일의 android:theme 속성을 설정합니다.

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">?theme</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

그런 다음 로그인 화면의 힌트 텍스트 색상을 밝게 합니다. 텍스트 필드' 스타일에 android:textColorHint 속성을 추가합니다.

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>

빌드와 실행 이제 미리 볼 수 있는 새 테마가 표시됩니다.

MDC-104로 이동하기 전에 이 섹션에서 변경한 코드를 되돌립니다.

지금까지 디자이너의 디자인 사양과 유사한 앱을 만들어 보았습니다.

완료된 MDC 103 앱은 완료된 Codelab을 다운로드하거나 git: git checkout 103-complete로 이 Codelab의 완료된 버전을 확인할 수 있습니다.

완성된 버전의 앱을 기준으로 앱 버전을 테스트할 수 있습니다.

다음 단계

테마, 서체, 고도와 같은 MDC 구성요소를 사용했습니다. [MDC 웹 라이브러리]에서 더 많은 구성요소와 하위 시스템을 탐색할 수 있습니다.

계획된 앱 디자인에서 MDC 라이브러리의 구성요소를 사용하지 않는 요소는 무엇인가요? MDC 라이브러리로 맞춤 구성요소를 만들어 특별한 모습을 구현하는 방법에 관해 MDC-104: 머티리얼 디자인 고급 구성요소를 참고하세요.

적절한 시간과 노력을 들여 이 Codelab을 완료할 수 있었습니다.

매우 동의함 동의함 보통 동의하지 않음 전혀 동의하지 않음

앞으로 머티리얼 구성요소를 계속 사용하고 싶습니다.

매우 동의함 동의함 보통 동의하지 않음 전혀 동의하지 않음