このページは Cloud Translation API によって翻訳されました。

MDC-102 Android: マテリアルの構造とレイアウト（Kotlin）

1. はじめに

マテリアルコンポーネント（MDC）は、デベロッパーがマテリアルデザインを実装する際に役立ちます。Google のエンジニアと UX デザイナーのチームが作成した MDC には、美しく機能的な UI コンポーネントが多数含まれており、Android、iOS、ウェブ、Flutter.material.io/develop に利用可能です。

Codelab MDC-101 では、テキストフィールドとインクのさざ波が付いたボタンという 2 つのマテリアルコンポーネント（MDC）を使用して、ログインページを作成しました。今度は、この基礎にナビゲーション、構造、データを追加していきましょう。

作成するアプリの概要

この Codelab では、衣類と生活雑貨を販売する e コマースアプリ Shrine のホーム画面を作成します。これには次のものが含まれます。

トップアプリバー
商品が並んだグリッドリスト

この Codelab の MDC-Android コンポーネント

AppBarLayout
MaterialCardView

必要なもの

Android 開発に関する基本的な知識
Android Studio（まだお持ちでない場合はこちらからダウンロードしてください）
Android Emulator または Android デバイス（Android Studio から入手可能）
サンプルコード（次の手順を参照）

Android アプリ作成経験についてお答えください。

初心者

中級者

上級者

2. 開発環境を設定する

MDC-101 から続行する場合

MDC-101 を完了していれば、コードはこの Codelab 用に準備されています。ステップ 3: トップアプリバーを追加するに進んでください。

ゼロから始める

Codelab のスターターアプリをダウンロードする

スターターアプリは material-components-android-codelabs-102-starter/kotlin ディレクトリにあります。開始する前に、そのディレクトリに cd で移動してください。

GitHub からクローンを作成する

GitHub からこの Codelab のクローンを作成するには、次のコマンドを実行します。

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 102-starter

Android Studio にスターターコードを読み込む

設定ウィザードが完了し、[Welcome to Android Studio] ウィンドウが表示されたら、[Open an existing Android Studio project] をクリックします。サンプルコードをインストールしたディレクトリに移動し、kotlin -> Shrine を選択（またはパソコンで shrine を検索）して、Shipping プロジェクトを開きます。
Android Studio がプロジェクトをビルドして同期するまで待ちます。進捗状況は、Android Studio ウィンドウ下部のアクティビティインジケーターに表示されます。
この時点では、Android SDK やビルドツール（以下に示すものなど）が不足しているため、Android Studio でビルドエラーが発生する場合があります。Android Studio の指示に従って、それをインストール / 更新して、プロジェクトを同期させます。

KzoYWC1S7Se7yL8igi1vXF_mbVxAdl2lg5kb7RODrsVpEng0G6U3NK1Qnn0faBBZd2u71yMXioy9tD-7fv3NXvVO4N3EtMMeWDTmqBMMl6egd9R5uXX0T_SKmahbmRor3wZZHX0ByA

プロジェクトの依存関係を追加する

プロジェクトには、MDC Android サポートライブラリへの依存関係が必要です。ダウンロードしたサンプルコードには、すでにこの依存関係がリストされているはずですが、次の手順で確認することをおすすめします。

app モジュールの build.gradle ファイルに移動し、dependencies ブロックに MDC Android への依存関係が含まれていることを確認します。

api 'com.google.android.material:material:1.1.0-alpha06'

（省略可）必要に応じて build.gradle ファイルを編集して次の依存関係を追加し、プロジェクトを同期します。

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

スターターアプリを実行する

[Run / Play] ボタンの左側にあるビルド構成が app であることを確認します。
緑色の [Run / Play] ボタンを押して、アプリをビルドし実行します。
[Select Deployment Target] ウィンドウで、利用可能なデバイスのリストの中にすでにAndroid デバイスがある場合は、ステップ 8 に進みます。それ以外の場合は、[Create New Virtual Device] をクリックします。
[Select Hardware] 画面で [Pixel 2] などのスマートフォンデバイスを選択し、[Next] をクリックします。
[System Image] 画面で、最新の Android バージョン（可能であれば API レベルが最も高いもの）を選択します。インストールされていない場合は、表示される [Download] をクリックして、ダウンロードを完了します。
[Next] をクリックします。
[Android Virtual Device (AVD)] 画面で、設定をそのままにして [Finish] をクリックします。
デプロイターゲットダイアログで [Android デバイス] を選択します。
[OK] をクリックします。
Android Studio によってアプリがビルドおよびデプロイされ、対象デバイスでそのアプリが自動的に開きます。

完了しました。MDC-101 Codelab で作成した Shrine のログインページが表示されます。

ログイン画面が正常に表示されたので、アプリに商品を追加してみましょう。

3. トップアプリバーを追加する

ログインページが閉じられると、ホーム画面が表示され、「You did it!」という画面が表示されます。ここまでは問題ないのですが、今のところユーザーは何もできず、アプリ内のどこにいるのかわからない状態です。そこで、ナビゲーションを追加します。

マテリアルデザインには、高度なユーザビリティを実現するナビゲーションパターンがあります。特に目立つコンポーネントの 1 つが、トップアプリバーです。

ナビゲーションを提供し、ユーザーが他のアクションにすばやくアクセスできるように、トップアプリバーを追加しましょう。

shr_product_grid_fragment.xml で、「You did it!」を含む <LinearLayout> ブロックを削除します。TextView を次のように置き換えます。

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

shr_product_grid_fragment.xml は次のようになります。

shr_product_grid_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".ProductGridFragment">

   <com.google.android.material.appbar.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <androidx.appcompat.widget.Toolbar
           android:id="@+id/app_bar"
           style="@style/Widget.Shrine.Toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:title="@string/shr_app_name" />
   </com.google.android.material.appbar.AppBarLayout>
  
</FrameLayout>

アプリバーは多くの場合、タイトルの横にボタンがあります。メニューアイコンを追加しましょう。

引き続き shr_product_grid_fragment.xml で、レイアウトに追加した Toolbar XML コンポーネントに以下を追加します。

shr_product_grid_fragment.xml

app:navigationIcon="@drawable/shr_menu"

shr_product_grid_fragment.xml は次のようになります。

shr_product_grid_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".ProductGridFragment">
  
   <com.google.android.material.appbar.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <androidx.appcompat.widget.Toolbar
           android:id="@+id/app_bar"
           style="@style/Widget.Shrine.Toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:navigationIcon="@drawable/shr_menu"
           app:title="@string/shr_app_name" />
   </com.google.android.material.appbar.AppBarLayout>
  
</FrameLayout>

アクションボタンを追加し、トップアプリバーのスタイルを設定する

アプリバーの端にボタンを追加することもできます。Android では、これらはアクションボタンと呼ばれます。トップアプリバーのスタイルを設定し、プログラムでそのメニューにアクションボタンを追加します。

ProductGridFragment.kt の onCreateView 関数で、setSupportActionBar を使用して、ActionBar として使用されるように activity の Toolbar を設定します。これは、inflater を使用してビューを作成した後に行えます。

ProductGridFragment.kt

override fun onCreateView(
       inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
   // Inflate the layout for this fragment with the ProductGrid theme
   val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

   // Set up the toolbar.
   (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

   return view;
}

次に、先ほどツールバーを設定するために変更したメソッドの直下で、onCreateOptionsMenu をオーバーライドして shr_toolbar_menu.xml のコンテンツをツールバーにインフレートします。

ProductGridFragment.kt

override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
   menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
   super.onCreateOptionsMenu(menu, menuInflater)
}

最後に、ProductGridFragment.kt で onCreate() をオーバーライドし、super() を呼び出した後に、true で setHasOptionMenu を呼び出します。

ProductGridFragment.kt

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setHasOptionsMenu(true)
}

上記のコードスニペットは、XML レイアウトのアプリバーをこのアクティビティのアクションバーとして設定します。コールバック onCreateOptionsMenu は、メニューとして何を使用するかをアクティビティに指示します。この場合、R.menu.shr_toolbar_menu のメニュー項目がアプリバーに配置されます。メニューファイルには、「検索」と「フィルタ」の 2 つの項目が含まれています。

shr_toolbar_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item
       android:id="@+id/search"
       android:icon="@drawable/shr_search"
       android:title="@string/shr_search_title"
       app:showAsAction="always" />
   <item
       android:id="@+id/filter"
       android:icon="@drawable/shr_filter"
       android:title="@string/shr_filter_title"
       app:showAsAction="always" />
</menu>

これらの変更後、ProductGridFragment.kt ファイルは次のようになります。

ProductGridFragment.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.Menu
import android.view.MenuInflater
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.GridLayoutManager
import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry
import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*

class ProductGridFragment : Fragment() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setHasOptionsMenu(true)
   }

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment with the ProductGrid theme
       val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

       // Set up the tool bar
       (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

       return view;
   }

   override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
       menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
       super.onCreateOptionsMenu(menu, menuInflater)
   }
}

ビルドして実行します。ホーム画面は次のようになります。

ツールバーに、ナビゲーションアイコン、タイトル、右側に 2 つのアクションアイコンが表示されます。ツールバーには、コンテンツとは別のレイヤにあることを示す微妙な影を使用して高度も表示されます。

4. カードを追加する

アプリの構造がある程度できたので、コンテンツをカードに入れて整理しましょう。

カードを追加する

まずは、トップアプリバーの下にカードを 1 つ追加しましょう。カードには、画像、タイトル、セカンダリテキストのラベルの領域が必要です。AppBarLayout の下の shr_product_grid_fragment.xml に以下を追加します。

shr_product_grid_fragment.xml

<com.google.android.material.card.MaterialCardView
   android:layout_width="160dp"
   android:layout_height="180dp"
   android:layout_marginBottom="16dp"
   android:layout_marginLeft="16dp"
   android:layout_marginRight="16dp"
   android:layout_marginTop="70dp"
   app:cardBackgroundColor="?attr/colorPrimaryDark"
   app:cardCornerRadius="4dp">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom"
       android:background="#FFFFFF"
       android:orientation="vertical"
       android:padding="8dp">

       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:padding="2dp"
           android:text="@string/shr_product_title"
           android:textAppearance="?attr/textAppearanceHeadline6" />

       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:padding="2dp"
           android:text="@string/shr_product_description"
           android:textAppearance="?attr/textAppearanceBody2" />
   </LinearLayout>
</com.google.android.material.card.MaterialCardView>

ビルドして実行します。

このプレビューでは、カードが左端からインセットされ、角が丸く、影（カードの高度を表現）になっています。要素全体を「コンテナ」といいます。コンテナを除き、コンテナ内の要素はすべてオプションです。

コンテナには、ヘッダーテキスト、サムネイルまたはアバター、小見出し、分割線、さらにはボタンやアイコンといった要素を追加できます。たとえば、先ほど作成したカードでは、LinearLayout 内に 2 つの TextView（タイトル用とセカンダリテキスト用）がカードの下に配置されています。

カードは通常、他のカードと一緒にコレクションで表示されます。この Codelab の次のセクションでは、コレクションとしてグリッド形式でレイアウトします。

5. カードのグリッドを作成する

複数のカードが画面に表示されている場合は、1 つまたは複数のコレクションにグループ化されます。グリッド内のカードは同一平面上にあるため、互いに同じ静止高度を共有します（カードを選択またはドラッグしない限り、この Codelab では扱いません）。

カードのグリッドを設定する

提供された shr_product_card.xml ファイルを確認します。

shr_product_card.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/white"
   app:cardElevation="2dp"
   app:cardPreventCornerOverlap="true">

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

       <com.android.volley.toolbox.NetworkImageView
           android:id="@+id/product_image"
           android:layout_width="match_parent"
           android:layout_height="@dimen/shr_product_card_image_height"
           android:background="?attr/colorPrimaryDark"
           android:scaleType="centerCrop" />

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

           <TextView
               android:id="@+id/product_title"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="@string/shr_product_title"
               android:textAppearance="?attr/textAppearanceHeadline6" />

           <TextView
               android:id="@+id/product_price"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="@string/shr_product_description"
               android:textAppearance="?attr/textAppearanceBody2" />
       </LinearLayout>
   </LinearLayout>
</com.google.android.material.card.MaterialCardView>

このカードレイアウトには、画像を含むカード（この場合は、URL から画像を読み込んで表示できる NetworkImageView）と 2 つの TextViews が含まれています。

次に、提供された ProductCardRecyclerViewAdapter を確認します。これは、ProductGridFragment と同じパッケージにあります。

ProductCardRecyclerViewAdapter.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView

import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry

/**
* Adapter used to show a simple grid of products.
*/
class ProductCardRecyclerViewAdapter(private val productList: List<ProductEntry>) : RecyclerView.Adapter<ProductCardViewHolder>() {

   override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ProductCardViewHolder {
       val layoutView = LayoutInflater.from(parent.context).inflate(R.layout.shr_product_card, parent, false)
       return ProductCardViewHolder(layoutView)
   }

   override fun onBindViewHolder(holder: ProductCardViewHolder, position: Int) {
       // TODO: Put ViewHolder binding code here in MDC-102
   }

   override fun getItemCount(): Int {
       return productList.size
   }
}

上のアダプタークラスは、グリッドのコンテンツを管理します。各ビューが特定のコンテンツに対して行うべき処理を決定するため、次に onBindViewHolder() のコードを書きます。

同じパッケージで ProductCardViewHolder も確認できます。このクラスはカードレイアウトに影響を与えるビューを格納しているため、後で変更できます。

ProductCardViewHolder.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.view.View
import androidx.recyclerview.widget.RecyclerView

class ProductCardViewHolder(itemView: View) //TODO: Find and store views from itemView
   : RecyclerView.ViewHolder(itemView)

グリッドをセットアップするには、まず shr_product_grid_fragment.xml からプレースホルダ MaterialCardView を削除します。次に、カードのグリッドを表すコンポーネントを追加します。ここでは、RecyclerView を使用します。RecyclerView コンポーネントを、AppBarLayout XML コンポーネントの下の shr_product_grid_fragment.xml に追加します。

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

shr_product_grid_fragment.xml は次のようになります。

shr_product_grid_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".ProductGridFragment">

   <com.google.android.material.appbar.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <androidx.appcompat.widget.Toolbar
           android:id="@+id/app_bar"
           style="@style/Widget.Shrine.Toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:navigationIcon="@drawable/shr_menu"
           app:title="@string/shr_app_name" />
   </com.google.android.material.appbar.AppBarLayout>

   <androidx.core.widget.NestedScrollView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginTop="56dp"
       android:background="@color/productGridBackgroundColor"
       android:paddingStart="@dimen/shr_product_grid_spacing"
       android:paddingEnd="@dimen/shr_product_grid_spacing"
       app:layout_behavior="@string/appbar_scrolling_view_behavior">

       <androidx.recyclerview.widget.RecyclerView
           android:id="@+id/recycler_view"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />

   </androidx.core.widget.NestedScrollView>

</FrameLayout>

最後に、onCreateView() で、setUpToolbar(view) の呼び出しの後に return ステートメントの前に RecyclerView 初期化コードを ProductGridFragment.kt に追加します。

ProductGridFragment.kt

override fun onCreateView(
       inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
   // Inflate the layout for this fragment with the ProductGrid theme
   val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

   // Set up the toolbar.
   (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

   // Set up the RecyclerView
   view.recycler_view.setHasFixedSize(true)
   view.recycler_view.layoutManager = GridLayoutManager(context, 2, RecyclerView.VERTICAL, false)
   val adapter = ProductCardRecyclerViewAdapter(
           ProductEntry.initProductEntryList(resources))
   view.recycler_view.adapter = adapter
   val largePadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing)
   val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small)
   view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

   return view;
}

上記のコードスニペットには、RecyclerView の設定に必要な初期化手順が含まれています。これには、RecyclerView のレイアウトマネージャーの設定、RecyclerView のアダプターの初期化と設定が含まれます。

ProductGridFragment.kt ファイルは次のようになります。

ProductGridFragment .kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.Menu
import android.view.MenuInflater
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.google.codelabs.mdc.kotlin.shrine.network.ProductEntry
import kotlinx.android.synthetic.main.shr_product_grid_fragment.view.*

class ProductGridFragment : Fragment() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setHasOptionsMenu(true)
   }

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment with the ProductGrid theme
       val view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false)

       // Set up the toolbar.
       (activity as AppCompatActivity).setSupportActionBar(view.app_bar)

       // Set up the RecyclerView
       view.recycler_view.setHasFixedSize(true)
       view.recycler_view.layoutManager = GridLayoutManager(context, 2, RecyclerView.VERTICAL, false)
       val adapter = ProductCardRecyclerViewAdapter(
               ProductEntry.initProductEntryList(resources))
       view.recycler_view.adapter = adapter
       val largePadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing)
       val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small)
       view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

       return view;
   }

   override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
       menuInflater.inflate(R.menu.shr_toolbar_menu, menu)
       super.onCreateOptionsMenu(menu, menuInflater)
   }
}

ビルドして実行します。

カードが追加されました。まだ何も表示されないので、商品データを追加しましょう。

画像とテキストを追加する

カードごとに、画像、商品名、価格を追加します。ViewHolder 抽象化には、各カードのビューが保持されます。ViewHolder に、次のように 3 つのビューを追加します。

ProductCardViewHolder.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.view.View
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

import com.android.volley.toolbox.NetworkImageView

class ProductCardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

   var productImage: NetworkImageView = itemView.findViewById(R.id.product_image)
   var productTitle: TextView = itemView.findViewById(R.id.product_title)
   var productPrice: TextView = itemView.findViewById(R.id.product_price)
}

以下のように、ProductCardRecyclerViewAdapter の onBindViewHolder() メソッドを更新して、各商品ビューのタイトル、価格、商品画像を設定します。

ProductCardRecyclerViewAdapter.kt

override fun onBindViewHolder(holder: ProductCardViewHolder, position: Int) {
   if (position < productList.size) {
       val product = productList[position]
       holder.productTitle.text = product.title
       holder.productPrice.text = product.price
       ImageRequester.setImageFromUrl(holder.productImage, product.url)
   }
}

上記のコードは、ViewHolder を使用して、各カードに対して RecyclerView のアダプタに何をすべきかを指示します。

ここでは、各 ViewHolder の TextView にテキストデータを設定し、ImageRequester を呼び出して URL から画像を取得します。ImageRequester は、便宜上 Google が提供しているクラスであり、Volley ライブラリを使用します（この Codelab の範囲外ですが、ご自身でコードを見てもかまいません）。

ビルドして実行する:

当社の製品がアプリに表示されるようになりました！

6. まとめ

アプリに、ログイン画面からホーム画面に移動して商品を表示する基本的なフローができました。わずか数行のコードで、タイトルと 3 つのボタンを含むトップアプリバーと、アプリのコンテンツを表示するカードのグリッドを追加しました。ホーム画面は、基本的な構造と実用的なコンテンツを備えた、シンプルかつ機能的なものになりました。

次のステップ

トップアプリバー、カード、テキストフィールド、ボタンにより、MDC-Android ライブラリの 4 つのコアマテリアルデザインコンポーネントを使用しました。その他のコンポーネントについては、MDC-Android カタログをご覧ください。

アプリは完全に機能しますが、特定のブランドやスタイルはまだ表現されていません。MDC-103: 色、形状、高度、タイプによるマテリアルデザインのテーマ設定では、これらのコンポーネントのスタイルをカスタマイズして、鮮やかでモダンなブランドを表現します。

この Codelab を完了するためにそれなりの時間と労力を必要とした

非常にそう思う

そう思う

どちらとも言えない

そう思わない

まったくそう思わない

今後もマテリアルコンポーネントを使用したい

非常にそう思う

そう思う

どちらとも言えない

そう思わない

まったくそう思わない

MDC-102 Android: マテリアルの構造とレイアウト（Kotlin）

1. はじめに

作成するアプリの概要

この Codelab の MDC-Android コンポーネント

必要なもの

Android アプリ作成経験についてお答えください。

2. 開発環境を設定する

MDC-101 から続行する場合

ゼロから始める

Codelab のスターター アプリをダウンロードする

GitHub からクローンを作成する

Android Studio にスターター コードを読み込む

プロジェクトの依存関係を追加する

スターター アプリを実行する

3. トップ アプリバーを追加する

AppBar ウィジェットを追加する

ナビゲーション アイコンを追加する

アクション ボタンを追加し、トップ アプリバーのスタイルを設定する

4. カードを追加する

カードを追加する

5. カードのグリッドを作成する

カードのグリッドを設定する

画像とテキストを追加する

6. まとめ

次のステップ

この Codelab を完了するためにそれなりの時間と労力を必要とした

今後もマテリアル コンポーネントを使用したい

Codelab のスターターアプリをダウンロードする

Android Studio にスターターコードを読み込む

スターターアプリを実行する

3. トップアプリバーを追加する

ナビゲーションアイコンを追加する

アクションボタンを追加し、トップアプリバーのスタイルを設定する

今後もマテリアルコンポーネントを使用したい