[kotlin] 버튼 및 플로팅 액션 버튼 구현을 위한 Material Components 사용 방법

20 Dec 2023

kotlin

안녕하세요! 이번에는 Material Components를 활용하여 Kotlin으로 버튼과 플로팅 액션 버튼을 어떻게 구현하는지 알아보겠습니다.

Material Components란?

Google에서 개발한 Material Components는 Android 앱의 디자인을 표준화하여 일관성 있는 UI를 제공하는 도구입니다. 머티리얼 디자인 기준에 따라 버튼, 텍스트 필드, 아이콘 등 다양한 UI 구성 요소를 포함하고 있습니다.

버튼 구현

Material Components에서 제공하는 버튼은 기존의 버튼과는 다르게 머티리얼 디자인에 맞추어 디자인되어 있습니다.

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

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_button"
    style="@style/Widget.MaterialComponents.Button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Material 버튼" />

위 코드에서는 Material 버튼을 추가하기 위해 MaterialButton을 XML 레이아웃에 추가하고 있습니다.

플로팅 액션 버튼 구현

플로팅 액션 버튼은 일반적으로 메인 액티비티나 Fragment에서 사용되며, 주요 동작을 표현하는 데 사용됩니다.

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintMarginBottom="16dp"
    app:layout_constraintMarginEnd="16dp"
    app:layout_constraintMarginRight="16dp"
    app:backgroundTint="@color/colorPrimary" />

위 코드는 FloatingActionButton을 XML 레이아웃에 추가하는 예시입니다.

Material Components를 사용하여 Kotlin으로 버튼과 플로팅 액션 버튼을 구현했습니다. 이제 여러분들도 Material Components를 활용하여 머티리얼 디자인에 맞는 다양한 UI를 쉽게 구현할 수 있을 것입니다.

더 많은 정보를 원하시면 Material Components 공식 문서를 참고해보세요!