[android] CardView와 플로팅 액션 버튼(FAB)의 함께 사용하는 방법

15 Dec 2023

android

안녕하세요! 안드로이드 앱 개발에 관심이 있는 분들을 위해, 오늘은 CardView와 플로팅 액션 버튼(FAB)을 함께 사용하는 방법에 대해 살펴보겠습니다. CardView는 머티리얼 디자인의 일부로 추가된 컴포넌트로, 음영 효과를 갖는 카드 형태의 UI를 만들 수 있습니다. FAB는 사용자가 특정 작업을 쉽게 수행할 수 있도록 하는 버튼입니다.

1. CardView와 FAB 추가하기

먼저, 안드로이드 프로젝트에서 CardView와 FAB를 사용할 수 있도록 의존성을 추가해야 합니다. build.gradle 파일에 아래 의존성을 추가합니다.

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

그 다음, XML 레이아웃 파일에서 CardView와 FAB를 추가합니다.

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

    <!-- Card content here -->

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

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_marginBottom="16dp"
    android:layout_marginEnd="16dp"
    app:srcCompat="@drawable/ic_add"
    app:backgroundTint="@color/colorPrimary" />

2. CardView와 FAB 조합하기

CardView 내부에 FAB를 배치하여 함께 사용할 수 있습니다. 이를 통해 카드 형태의 UI 안에 FAB를 나란히 표시할 수 있습니다. 또한, FAB의 위치를 조정하여 디자인에 맞게 배치할 수 있습니다.

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

    <!-- Card content here -->

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        app:srcCompat="@drawable/ic_add"
        app:backgroundTint="@color/colorPrimary" />

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

CardView와 FAB을 함께 사용하여 머티리얼 디자인에 맞는 멋진 UI를 만들어보세요. 이를 통해 사용자 경험을 향상시키고 앱의 외관을 개선할 수 있습니다. 이상적인 디자인 팁을 공유했으면, 더 많은 분들이 새로운 UI를 구현하는 데 도움이 될 것입니다.

참조

이로서 CardView와 FAB의 함께 사용하는 방법에 대해 알아보았습니다. 부족한 부분이 있거나 더 궁금한 점이 있다면 언제든지 물어봐 주세요. 기쁜 마음으로 도와드리겠습니다!