MaterialCardViewでカードUIを作成する

MaterialCardViewを使用してカードUIを簡単に実装する方法をメモします。通常の CardView よりも多機能で、角丸・枠線・リップル効果などを簡単に扱えます。

まず、Gradle に Material Components を追加します。

dependencies {
    implementation "com.google.android.material:material:x.x.x"
}

次にMaterialCardViewを配置します。

<com.google.android.material.card.MaterialCardView
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    app:cardCornerRadius="16dp"
    app:cardElevation="8dp"
    app:strokeColor="#2196F3"
    app:strokeWidth="2dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="タイトル"
            android:textSize="20sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="これは MaterialCardView のサンプルです。" />

    </LinearLayout>

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

MaterialCardViewから設定できるオプションをまとめます

角丸

カードの角を丸くします。

app:cardCornerRadius="16dp"

影の高さ

カードの浮き上がりを表現します。

app:cardElevation="8dp"

枠線

カードに枠線を表示できます。

app:strokeColor="#2196F3"
app:strokeWidth="2dp"

背景色

カード背景色を設定します。

app:cardBackgroundColor="#FFFFFF"

チェック可能なカード

MaterialCardView はチェック状態を持たせることができます。

app:checkable="true"
app:checkedIconTint="@color/purple_500"

Ripple エフェクト

タップ時の Ripple エフェクトも簡単に利用できます。

app:rippleColor="@color/purple_200"

CardViewより便利なライブラリなので MaterialCardView をどんどん使っていきましょう。