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

MDC-101 Android: マテリアルコンポーネント（MDC）の基本（Kotlin）

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

material.io/develop

マテリアルデザインと Android 用マテリアルコンポーネントとは

マテリアルデザインは、人の目に留まる美しいデジタルプロダクトを作成するためのシステムです。一貫した一連の基本原則とコンポーネントに基づいてスタイル、ブランディング、インタラクション、モーションの統一を行うことにより、プロダクトチームは、デザインの可能性を最大限に発揮できます。

Android アプリケーションの場合、Android 用マテリアルコンポーネント（MDC Android）は、アプリ全体で一貫性を実現するためのコンポーネントのライブラリを使用して、設計とエンジニアリングを統合します。マテリアルデザインシステムが進化するにつれ、これらのコンポーネントは、Google のフロントエンド開発標準に沿った一貫性のあるピクセルパーフェクト実装となるように更新されます。MDC はウェブ、iOS、Flutter でも利用できます。

この Codelab では、MDC Android のコンポーネントを複数使用してログインページを作成します。

作成するアプリの概要

この Codelab は、衣類や生活雑貨を販売する e コマース Android アプリ Shrine の作成手順を説明する 4 つの Codelab のうちの最初の Codelab です。MDC Android を使用して、ブランドやスタイルを反映するようにコンポーネントをカスタマイズする方法について説明します。

この Codelab では、次のもの含む Shrine 用ログインページを作成します。

テキストフィールド 2 つ（ユーザー名用とパスワード用）
[キャンセル] と [次へ] の 2 つのボタン
アプリ名「Shrine」
Shrine のロゴ画像

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

テキストフィールド
ボタン

必要なもの

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

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

初心者

中級者

上級者

Android Studio を起動する

Android Studio を開くと、「Welcome to Android Studio」というタイトルのウィンドウが表示されます。ただし、Android Studio を初めて起動している場合は、Android Studio 設定ウィザードの各手順を、デフォルト値を設定しながら進めていきます。このステップでは、必要なファイルのダウンロードとインストールに数分間かかる場合があります。バックグラウンドで実行させたまま、次のセクションに取り組んでもかまいません。

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

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

スターターアプリは material-components-android-codelabs-101-starter/kotlin ディレクトリ内にあります。

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

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

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 101-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 の指示に従って、それをインストール/更新して、プロジェクトを同期させます。

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

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

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

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'
}

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

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

完了しました。Shrine のログインページのスターターコードがエミュレータで動作するはずです。「Shrine」という名前と、その真下に Shrine ロゴが表示されます。

次に、コードを見てみましょう。フラグメントを表示してフラグメント間を移動するために、サンプルコードにシンプルな Fragment ナビゲーションフレームワークを用意しました。

shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.kotlin.shrine ディレクトリの MainActivity.kt を開きます。以下が含まれているはずです。

MainActivity.kt

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

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment

class MainActivity : AppCompatActivity(), NavigationHost {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.shr_main_activity)

       if (savedInstanceState == null) {
           supportFragmentManager
                   .beginTransaction()
                   .add(R.id.container, LoginFragment())
                   .commit()
       }
   }

   override fun navigateTo(fragment: Fragment, addToBackstack: Boolean) {
       val transaction = supportFragmentManager
               .beginTransaction()
               .replace(R.id.container, fragment)

       if (addToBackstack) {
           transaction.addToBackStack(null)
       }

       transaction.commit()
   }
}

このアクティビティは、shr_main_activity.xml で定義された R.layout.shr_main_activity レイアウトファイルを表示します。

onCreate(), では、MainActivity.kt が LoginFragment を表示するために Fragment トランザクションを開始していることがわかります。この Codelab では、LoginFragment を変更します。アクティビティは、NavigationHost で定義された navigateTo(Fragment) メソッドも実装します。これにより、任意のフラグメントが別のフラグメントに移動できます。

アクティビティファイルで Command + クリック（または Control + クリック）shr_main_activity してレイアウトファイルを開くか、app -> res -> layout -> shr_main_activity.xml でレイアウトファイルに移動します。

shr_main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"/>

ここでは、アクティビティが表示するフラグメントのコンテナとして機能するシンプルな <FrameLayout> を確認できます。

次に、LoginFragment.kt を開きます。

LoginFragment.kt

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

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class LoginFragment : Fragment() {

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

       return view
   }
}

LoginFragment は shr_login_fragment レイアウトファイルを拡張し、onCreateView() に表示します。

次に、shr_login_fragment.xml レイアウトファイルを見て、ログインページがどのようなものかを確認しましょう。

shr_login_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
   android:background="@color/loginPageBackgroundColor"
   tools:context=".LoginFragment">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:clipChildren="false"
       android:clipToPadding="false"
       android:orientation="vertical"
       android:padding="24dp"
       android:paddingTop="16dp">

       <ImageView
           android:layout_width="64dp"
           android:layout_height="64dp"
           android:layout_gravity="center_horizontal"
           android:layout_marginTop="48dp"
           android:layout_marginBottom="16dp"
           app:srcCompat="@drawable/shr_logo" />

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center_horizontal"
           android:layout_marginBottom="132dp"
           android:text="@string/shr_app_name"
           android:textAllCaps="true"
           android:textSize="16sp" />
   </LinearLayout>
</ScrollView>

ここでは、上部に <ImageView> がある <LinearLayout> が表示されています。これは Shrine のロゴを表しています。

その後に、ロゴの下にある Shrine ラベルを表す <TextView> タグがあります。このラベルのテキストは、@string/shr_app_name という名前の文字列リソースです。文字列リソース名を Command + クリック（または Control + クリック）するか、app -> res -> values -> strings.xml を開くと、文字列リソースが定義されている strings.xml ファイルが表示されます。今後文字列リソースが追加された場合は、ここで定義されます。このファイル内のすべてのリソースには、Shrine アプリの一部であることを示す shr_ 接頭辞が必要です。

スターターコードに慣れてきたところで、最初のコンポーネントを実装してみましょう。

まず、ログインページにテキストフィールドを 2 つ追加して、ユーザーがユーザー名とパスワードを入力できるようにします。フローティングラベルとエラーメッセージを表示する機能が組み込まれている MDC テキストフィールドコンポーネントを使用します。

XML を追加する

shr_login_fragment.xml で、<LinearLayout> 内の「SHRINE」ラベル <TextView> の下に、子 TextInputEditText を持つ 2 つの TextInputLayout 要素を追加します。

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

上記のスニペットは、それぞれ <TextInputLayout> 要素と <TextInputEditText> 子で構成される 2 つのテキストフィールドを表しています。各テキストフィールドのヒントテキストは、android:hint 属性で指定します。

テキストフィールド用に 2 つの新しい文字列リソース（@string/shr_hint_username と @string/shr_hint_password）を追加しました。strings.xml を開いて、これらの文字列リソースを確認します。

strings.xml

<string name="shr_hint_username">Username</string>
<string name="shr_hint_password">Password</string>

入力検証を追加する

TextInputLayout コンポーネントには、エラーフィードバック機能が組み込まれています。

エラーフィードバックを表示するには、shr_login_fragment.xml に次の変更を加えます。

Password TextInputLayout 要素の app:errorEnabled 属性を true に設定します。これにより、テキストフィールドの下のエラーメッセージに余白が追加されます。
パスワード TextInputEditText 要素の android:inputType 属性を「textPassword」に設定します。これにより、パスワードフィールドの入力テキストが非表示になります。

これらの変更を行うと、shr_login_fragment.xml のテキストフィールドは次のようになります。

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

アプリを実行してみましょう。「Username」と「Password」という 2 つのテキストフィールドを備えたページが表示されます。

フローティングラベルのアニメーションを確認します。

次に、ログインページに「Cancel」と「Next」という 2 つのボタンを追加します。ここでは、マテリアルデザインの象徴的なインクリップル効果が組み込まれた MDC ボタンコンポーネントを使用します。

XML を追加する

shr_login_fragment.xml で、TextInputLayout 要素の下の <LinearLayout> に <RelativeLayout> を追加します。次に、2 つの <MaterialButton> 要素を <RelativeLayout> に追加します。

生成される XML ファイルは次のようになります。

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.MaterialComponents.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

これで、アプリを実行すると、各ボタンをタップしたときにインクリップルが表示されます。

最後に、LoginFragment.kt に Kotlin コードを追加して、[次へ] ボタンを別のフラグメントへの移行にフックします。

onCreateView() の下の LoginFragment.kt に、パスワードが有効かどうかを判断するロジックを含むプライベートブール値 isPasswordValid メソッドを追加しましょう。このデモでは、パスワードが 8 文字以上であることを確認するだけです。

LoginFragment.kt

private fun isPasswordValid(text: Editable?): Boolean {
   return text != null && text.length >= 8
}

次に、作成した isPasswordValid() メソッドに基づいてエラーを設定およびクリアするクリックリスナーを [次へ] ボタンに追加します。onCreateView() では、このクリックリスナーはインフレータ行と return view 行の間に配置する必要があります。

次に、パスワード TextInputEditText にキーリスナーを追加して、エラーをクリアするキーイベントをリッスンします。このリスナーは、isPasswordValid() を使用してパスワードが有効かどうかを確認する必要もあります。これは onCreateView() のクリックリスナーの直下に追加できます。

onCreateView() メソッドは次のようになります。

LoginFragment.kt

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

       // Set an error if the password is less than 8 characters.
       view.next_button.setOnClickListener({
           if (!isPasswordValid(password_edit_text.text!!)) {
               password_text_input.error = getString(R.string.shr_error_password)
           } else {
               // Clear the error.
               password_text_input.error = null
           }
       })

       // Clear the error once more than 8 characters are typed.
       view.password_edit_text.setOnKeyListener({ _, _, _ ->
           if (isPasswordValid(password_edit_text.text!!)) {
               // Clear the error.
               password_text_input.error = null
           }
           false
       })

       return view
   }
}

これで、別のフラグメントに移動できます。onCreateView() で、エラー検証が成功したときに別のフラグメントに移動するように OnClickListener を更新します。clickListener コードは次のようになります。

LoginFragment.kt

// Set an error if the password is less than 8 characters.
view.next_button.setOnClickListener({
   if (!isPasswordValid(password_edit_text.text!!)) {
       password_text_input.error = getString(R.string.shr_error_password)
   } else {
       // Clear the error.
       password_text_input.error = null
       // Navigate to the next Fragment.
       (activity as NavigationHost).navigateTo(ProductGridFragment(), false)
   }
})

クリックリスナーの else ケースに (activity as NavigationHost).navigateTo(ProductGridFragment(), false) 行を追加しました。この行は、MainActivity から navigateTo() メソッドを呼び出して、新しいフラグメント（ProductGridFragment）に移動します。現在は空のページですが、MDC-102 で取り組んでいきます。

アプリをビルドします。[次へ] ボタンを押します。

やりました！この画面は、MDC-102 で取り組む次の Codelab の出発点となります。

Android 用マテリアルコンポーネントライブラリは、基本的な XML マークアップと約 30 行の Kotlin を使用して、マテリアルデザインのガイドラインに準拠した美しいログインページを作成する作業を支援します。また、すべてのデバイスで一貫した外観と動作を実現します。

次のステップ

テキストフィールドとボタンは MDC Android ライブラリの 2 つのコアコンポーネントですが、他にもたくさんあります。MDC Android のその他のコンポーネントも確認してください。あるいは、MDC 102: マテリアルデザインの構造とレイアウトで、トップアプリバー、カードビュー、グリッドレイアウトについて学習してください。マテリアルコンポーネントをお試しいただきありがとうございます。この Codelab がお役に立ちましたら幸いです。

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

非常にそう思う

そう思う

どちらとも言えない

そう思わない

まったくそう思わない

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

非常にそう思う

そう思う

どちらとも言えない

そう思わない

まったくそう思わない

MDC-101 Android: マテリアル コンポーネント（MDC）の基本（Kotlin） コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

マテリアル デザインと Android 用マテリアル コンポーネントとは

作成するアプリの概要

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

必要なもの

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

Android Studio を起動する

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

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

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

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

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

XML を追加する

入力検証を追加する

XML を追加する

次のステップ

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

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

MDC-101 Android: マテリアルコンポーネント（MDC）の基本（Kotlin）

マテリアルデザインと Android 用マテリアルコンポーネントとは

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

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

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

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