カードベースのレイアウトを作成する

アプリでは、同じようなスタイルのコンテナ内にデータを表示することがよくあります。これらのコンテナは多くの場合、各アイテムの情報を保持するためにリスト内で使用されます。プラットフォーム全体で一貫したデザインのカード内に情報を表示するための簡単な方法として、CardView API が提供されています。これらのカードのデフォルトの高度は、含まれているビューグループより高いため、自動的にカードの下に影が描画されます。カードを使用すると、コンテナのスタイルを維持しながら、簡単にビューグループを追加できます。

図 1. カードの例

依存関係を追加する

CardView ウィジェットは AndroidX の一部です。プロジェクトで使用するには、アプリモジュールの build.gradle ファイルに次の依存関係を追加します。

Groovy

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"
}

Kotlin

dependencies {
    implementation("androidx.cardview:cardview:1.0.0")
}

カードを作成する

CardView を使用するには、レイアウトファイルに追加する必要があります。他のビューを含めるには、ビューグループとして使用します。次の例では、CardView に 1 つの TextView を含めて、なんらかの情報をユーザーに表示します。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    ... >
    <!-- A CardView that contains a TextView -->
    <androidx.cardview.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

カードはデフォルトの高度で画面に描画され、自動的にカードの下に影が描画されます。card_view:cardElevation 属性を使用すると、カードのカスタムの高度を指定できます。高度を上げると影が濃くなり、下げると薄くなります。CardView は、Android 5.0（API レベル 21）以降では実際の高度と動的な影を使用し、それより前のバージョンではプログラムによる影の実装にフォールバックします。

CardView ウィジェットの外観をカスタマイズするには、以下のプロパティを使用します。

レイアウトで角の丸みを設定するには、card_view:cardCornerRadius 属性を使用します。
コードで角の丸みを設定するには、CardView.setRadius メソッドを使用します。
カードの背景色を設定するには、card_view:cardBackgroundColor 属性を使用します。

詳しくは、CardView の API リファレンスをご覧ください。