[kotlin] 버튼 아이콘 및 커스텀 위젯 구성을 위한 Material Components 활용 방법

20 Dec 2023

kotlin

안녕하세요! 이번 포스팅에서는 Kotlin에서 Material Components를 활용하여 버튼 아이콘 및 커스텀 위젯을 구성하는 방법에 대해 소개하겠습니다.

Material Components란?

Material Components는 구글에서 제공하는 디자인 시스템으로, 사용자 인터페이스의 시각적 요소 및 효과를 구현하는 데 이상적인 라이브러리입니다.

버튼 아이콘 추가하기

Material Components를 사용하여 버튼 아이콘을 추가하려면 먼저 필요한 종속성을 gradle에 추가해야 합니다:

implementation 'com.google.android.material:material:1.4.0'

그런 다음, XML 레이아웃 파일에서 버튼을 다음과 같이 정의할 수 있습니다:

<com.google.android.material.button.MaterialButton
    android:id="@+id/icon_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:icon="@drawable/ic_baseline_add_24"
    android:text="Add"
    style="@style/Widget.MaterialComponents.Button.Icon"
    />

위의 코드에서 icon 속성을 사용하여 버튼에 아이콘을 추가할 수 있습니다. 또한 style 속성을 사용하여 Material Design의 버튼 아이콘 스타일을 적용할 수 있습니다.

커스텀 위젯 구성하기

Material Components를 사용하여 커스텀 위젯을 구성하는 방법은 다음과 같습니다:

새로운 XML 레이아웃 파일을 만듭니다. (예: custom_widget.xml)
원하는 디자인 및 구성 요소를 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="@color/white"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Custom Widget"
        android:textSize="18sp"
        android:textColor="@color/black"
        android:padding="16dp"/>

</com.google.android.material.card.MaterialCardView>

위의 코드에서는 Material Components의 MaterialCardView를 사용하여 새로운 커스텀 위젯을 정의하였습니다.

결론

Material Components를 사용하여 버튼 아이콘 및 커스텀 위젯을 구성하는 방법에 대해 알아보았습니다. Material Components는 Android 앱을 더욱 시각적으로 아름답게 만들어주는 강력한 도구입니다. 여러분의 앱에서 Material Components를 활용하여 사용자 경험을 향상시켜보세요!