MDC-103 Android: 색상, 고도, 유형을 사용한 Material Theming (Kotlin)

1. 소개

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

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

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

빌드할 항목

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

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

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

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

• 테마
• 서체
• 고도

필요한 항목

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

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

<ph type="x-smartling-placeholder"></ph> 초보자 중급 숙련도

2. 개발 환경 설정

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 (또는 컴퓨터에서 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 수준 권장)을 선택합니다. 설치되어 있지 않은 경우 표시되는 다운로드 링크를 클릭하고 다운로드를 완료합니다. Next를 클릭합니다. Android Virtual Device (AVD) 화면에서 설정을 그대로 두고 Finish를 클릭합니다. 배포 대상 대화상자에서 Android 기기를 선택합니다. 확인을 클릭합니다. Android 스튜디오가 앱을 빌드하고 배포한 후 자동으로 대상 기기에서 앱을 엽니다.

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

빌드할 때 INSTALL_FAILED_INVALID_APK 오류가 발생하면 ‘빌드'를 시도해 보세요. -&gt; ‘프로젝트 정리' 를 실행합니다.

완료되었습니다. 기기나 에뮬레이터에서 실행 중인 Shrine의 로그인 페이지가 표시됩니다. Next를 누르면 Shrine 홈페이지가 상단에 앱 바가 표시되고 하단에 제품 이미지 그리드가 표시됩니다.

색상, 고도, 서체를 변경하여 상단 앱 바가 Shrine 브랜드와 일치하도록 만들어 보겠습니다.

3. 색상 변경

이 색상 테마는 디자이너가 맞춤 색상으로 만든 것입니다(아래 그림 참고). 색상 테마는 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>

상태 표시줄에서 어두운 아이콘을 사용하려면 Shrine의 앱 테마인 Theme.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 스타일에서 확장되며 텍스트 색상만 변경합니다.

다음과 같이 Next 버튼에 Widget.Shrine.Button 스타일을, Cancel 버튼에서 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)이 되도록 하세요.

4. 서체 및 라벨 스타일 수정

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

상단 앱 바 스타일 지정

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

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" />

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

서체 관련 참고사항:

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

5. 고도 조정

지금까지 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">

한번 살펴보세요! 제품 그리드 페이지에 있는 모든 카드의 고도를 조정했습니다.

Next 버튼의 고도 변경

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

styles.xml

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

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

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

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

고도 관련 참고사항:

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

6. 레이아웃 변경

각 카드가 서로 다르게 표시되도록 레이아웃을 변경해 다양한 가로세로 비율과 크기로 카드를 표시해 보겠습니다.

시차를 둔 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))

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

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
}

빌드하고 실행합니다. 이제 제품 그리드 항목이 시차를 두고 배치됩니다.

7. 다른 테마 사용

색상은 브랜드를 표현하는 강력한 방법이므로, 작은 색상 변화도 사용자 경험에 큰 영향을 미칠 수 있습니다. 이를 테스트하기 위해 브랜드의 색 구성표가 완전히 다르다면 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로 이동하기 전에 이 섹션에서 변경된 코드를 되돌립니다.

8. 요약

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

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

완성된 앱 버전과 비교하여 자신의 앱 버전을 테스트할 수 있습니다.

다음 단계

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

계획된 앱 디자인에 MDC 라이브러리에 구성요소가 없는 요소가 포함되어 있다면 어떻게 해야 할까요? MDC-104: 머티리얼 디자인 고급 구성요소에서는 MDC 라이브러리를 사용하여 맞춤 구성요소를 만들어 특정 디자인을 구현하는 방법을 알아봅니다.

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

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

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

<ph type="x-smartling-placeholder"></ph> 매우 동의함 동의함 보통 동의하지 않음 전혀 동의하지 않음