Google は、黒人コミュニティに対する人種平等の促進に取り組んでいます。取り組みを見る

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

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

図 1. カードの例

依存関係を追加する

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

    dependencies {
        implementation 'com.android.support:cardview-v7:28.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 -->
        <android.support.v7.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" />
        </android.support.v7.widget.CardView>
    </LinearLayout>
    

カードはデフォルトで高い位置にある画面に描画されます。このため、システムによってカードの下に影が描画されます。card_view:cardElevation 属性を使用すると、カードのカスタムの高さを指定できます。高くすると影が濃くなり、低くすると薄くなります。Android 5.0(API レベル 21)以降では、CardView はリアルな高さと動的な影を使用しており、それより前のバージョンでは、プログラムによる影の実装に戻ります。

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

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

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