[kotlin] 머터리얼 테마 컬러 및 타입 사용을 위한 Material Components 소개

안녕하세요! 이번에는 안드로이드 앱에서 Material Components를 사용하여 머터리얼 테마 컬러타입을 설정하는 방법에 대해 알아보겠습니다.

Material Components는 구글에서 제공하는 머터리얼 디자인 시스템을 안드로이드 앱에 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 이를 통해 앱의 UI를 표준화하고, 사용자 경험을 향상시킬 수 있습니다.

머터리얼 테마 컬러 설정하기

Material Components를 사용하여 머터리얼 테마의 기본 컬러를 설정하려면, styles.xml 파일에서 다음과 같이 테마를 정의합니다.

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    <!-- Primary 테마 컬러 설정 -->
    <item name="colorPrimary">@color/primaryColor</item>
    <!-- Primary Dark 테마 컬러 설정 -->
    <item name="colorPrimaryDark">@color/primaryDarkColor</item>
    <!-- Accent 테마 컬러 설정 -->
    <item name="colorAccent">@color/accentColor</item>
</style>

여기서 @color/primaryColor, @color/primaryDarkColor, @color/accentColor는 앱에서 사용할 실제 컬러 리소스들을 가리킵니다.

머터리얼 테마 타입 설정하기

Material Components를 사용하여 머터리얼 테마의 기본 타입을 설정하고 싶다면, 다음과 같이 styles.xml 파일에서 테마를 정의합니다.

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    <!-- 기본 폰트 패밀리 설정 -->
    <item name="fontFamily">@font/myFont</item>
    <!-- 헤드라인, 타이틀, 본문, 버튼 등 다양한 텍스트 스타일 지정 -->
    <item name="textAppearanceHeadline1">@style/TextAppearance.App.CustomHeadline1</item>
    <item name="textAppearanceHeadline2">@style/TextAppearance.App.CustomHeadline2</item>
    <item name="textAppearanceHeadline3">@style/TextAppearance.App.CustomHeadline3</item>
    <!-- ... -->
</style>

위의 예시에서 @font/myFont는 사용할 폰트 리소스를 가리키며, @style/TextAppearance.App.CustomHeadline1, @style/TextAppearance.App.CustomHeadline2, @style/TextAppearance.App.CustomHeadline3은 필요한 헤드라인 스타일을 지정하는 예시입니다.

Material Components를 사용하여 머터리얼 테마의 컬러와 타입을 설정함으로써, 높은 수준의 사용자 경험을 제공하는 멋진 Android 앱을 만들 수 있습니다.

더 많은 자세한 내용은 Material Design 문서를 참고하시기 바랍니다.