1. はじめに
マテリアル デザインは、人の目に留まる美しいデジタル プロダクトを作成するためのシステムです。一貫した一連の基本原則とコンポーネントに基づいてスタイル、ブランディング、インタラクション、モーションの統一を行うことにより、プロダクト チームは、デザインの可能性を最大限に発揮できます。
マテリアル コンポーネント（MDC）は、デベロッパーがマテリアル デザインを実装する際に役立ちます。Google のエンジニアと UX デザイナーのチームが作成した MDC には、美しく機能的な UI コンポーネントが多数含まれており、Android、iOS、ウェブ、Flutter.material.io/develop に利用可能です。 |
Android 用マテリアル モーション システムとは何ですか？
マテリアル デザイン ガイドラインに記載されているとおり、Android のマテリアル モーション システムは、MDC-Android ライブラリ内の一連の遷移パターンです。これにより、ユーザーがアプリを理解して操作できるようになります。
主なマテリアル移行パターンには次の 4 つの種類があります。
- コンテナ変換: コンテナを含む UI 要素間の移行。ある要素から別の要素にシームレスな変換を行うことで、2 つの異なる UI 要素の間に視覚的なつながりを作成します。
- 共有軸: 空間関係またはナビゲーション関係がある UI 要素間の移行。x 軸、y 軸、z 軸で共有変換を使用して要素間の関係を強化します。
- フェードスルー: 相互に強力な関係を持たない UI 要素間の移行。受信する要素の規模に応じて、フェードアウトとフェードインを連続的に使用します。
- フェード: 画面の境界内で出入りする UI 要素に使用します。
MDC-Android ライブラリには、AndroidX Transition ライブラリ（androidx.transition）と Android Transition Framework（android.transition）の両方をベースに作成された、これらのパターン用の遷移クラスが用意されています。
AndroidX
com.google.android.material.transitionパッケージで利用可能- API レベル 14 以降をサポート
- フラグメントとビューはサポートしているが、アクティビティとウィンドウはサポートしていない
- バックポートされたバグの修正と API レベル全体での一貫した動作を含む
フレームワーク
com.google.android.material.transition.platformパッケージで利用可能- API レベル 21 以降をサポート
- フラグメント、ビュー、アクティビティ、ウィンドウをサポート
- バグの修正はバックポートされていません。また、API レベルによって動作が異なる場合があります。
この Codelab では、AndroidX ライブラリをベースに構築されたマテリアル遷移を使用します。つまり、主に Fragment とビューに焦点を当てます。
作成するアプリの概要
この Codelab では、Kotlin を使用して Reply という Android メールアプリのサンプルへと移行をいくつか作成し、MDC-Android ライブラリからの移行を利用してアプリのデザインをカスタマイズする方法を紹介します。
Reply アプリのスターター コードが提供されます。そして、次のマテリアル移行をアプリに組み込みます。これは次のように、完成した Codelab の GIF に表示されます。
- メール一覧からメール詳細ページへのコンテナ変換移行
- FAB からメール作成ページへのコンテナ変換移行
- 検索アイコンから検索ビューページへの z 軸共有移行
- メールボックス ページ間のフェードスルー移行
- メールアドレス チップからカードビューへのコンテナ変換移行
必要なもの
- Android 開発と Kotlin に関する基本的な知識
- Android Studio（まだお持ちでない場合はこちらからダウンロードしてください）
- Android Emulator または Android デバイス（Android Studio から入手可能）
- サンプルコード（次の手順を参照）
Android アプリ作成経験についてお答えください。
2. 開発環境を設定する
Android Studio を起動する
Android Studio を開くと、「Welcome to Android Studio」というタイトルのウィンドウが表示されます。ただし、Android Studio を初めて起動している場合は、Android Studio 設定ウィザードの各手順を、デフォルト値を設定しながら進めていきます。このステップでは、必要なファイルのダウンロードとインストールに数分間かかる場合があります。バックグラウンドで実行させたまま、次のセクションに取り組んでもかまいません。
オプション 1: GitHub からスターター Codelab アプリのクローンを作成する
GitHub からこの Codelab のクローンを作成するには、次のコマンドを実行します。
git clone https://github.com/material-components/material-components-android-motion-codelab.git cd material-components-android-motion-codelab
オプション 2: スターター Codelab アプリの zip ファイルをダウンロードする
スターター アプリは material-components-android-motion-codelab-develop ディレクトリ内にあります。
Android Studio にスターター コードを読み込む
- 設定ウィザードが終了し、[Welcome to Android Studio] ウィンドウが表示されたら、[Open an existing Android Studio project] をクリックします。
- サンプルコードをインストールしたディレクトリに移動し、サンプル ディレクトリを選択してプロジェクトを開きます。
- Android Studio がプロジェクトをビルドして同期するまで待ちます。進捗状況は、Android Studio ウィンドウ下部のアクティビティ インジケーターに表示されます。
- この時点では、Android SDK やビルドツール（以下に示すものなど）が不足しているため、Android Studio でビルドエラーが発生する場合があります。Android Studio の指示に従って、それをインストール / 更新して、プロジェクトを同期させます。引き続き問題が発生する場合は、SDK Manager でのツールの更新に関するガイドを参照してください。
プロジェクトの依存関係を確認する
プロジェクトに MDC-Android ライブラリへの依存関係が必要です。ダウンロードしたサンプルコードにはこの依存関係がすでにリストされているはずですが、設定を見て確認しましょう。
app モジュールの build.gradle ファイルに移動し、dependencies ブロックに MDC-Android への依存関係が含まれていることを確認します。
implementation 'com.google.android.material:material:1.2.0'
スターター アプリを実行する
- デバイス選択の左側にあるビルド構成が
appであることを確認します。 - 緑色の [Run / Play] ボタンを押して、アプリをビルドし実行します。
- [Select Deployment Target] ウィンドウで、利用可能なデバイスのリストの中にすでにAndroid デバイスがある場合は、ステップ 8 に進みます。それ以外の場合は、[Create New Virtual Device] をクリックします。
- [Select Hardware] 画面で Pixel 3 などのスマートフォンを選択し、[Next] をクリックします。
- [System Image] 画面で、最新の Android バージョン（可能であれば API レベルが最も高いもの）を選択します。インストールされていない場合は、表示される [Download] をクリックして、ダウンロードを完了します。
- [Next] をクリックします。
- [Android Virtual Device (AVD)] 画面で、設定をそのまま変更せずに、[Finish] をクリックします。
- デプロイ ターゲット ダイアログで [Android デバイス] を選択します。
- [OK] をクリックします。
- Android Studio によってアプリがビルドおよびデプロイされ、対象デバイスでそのアプリが自動的に開きます。
完了しました。Reply のホームページのスターター コードがエミュレータで動作しているはずです。メール一覧を含む受信トレイが表示されます。
省略可: デバイスのアニメーションの速度を下げる
この Codelab には、簡単でありながら洗練された移行が含まれており、実装中の移行の詳細をより細かく確認する目的でデバイスのアニメーションの速度を下げる際に、便利に利用できます。これは、adb シェルコマンドまたはクイック設定タイルで行うことができます。なお、これらの方法でデバイスのアニメーションの速度を下げると、Reply アプリ外のデバイスのアニメーションにも影響します。
方法 1: ADB シェルコマンド
デバイスのアニメーションを 10 倍に遅くするには、コマンドラインから次のコマンドを実行します。
adb shell settings put global window_animation_scale 10
adb shell settings put global transition_animation_scale 10
adb shell settings put global animator_duration_scale 10
デバイスのアニメーション速度を通常に戻すには、次のコマンドを実行します。
adb shell settings put global window_animation_scale 1
adb shell settings put global transition_animation_scale 1
adb shell settings put global animator_duration_scale 1
方法 2: クイック設定タイル
または、クイック設定タイルをセットアップするには、まずデバイスで開発者向け設定を有効にします（まだ有効にしていない場合）。
- デバイスの [設定] アプリを開きます。
- 一番下までスクロールし、[エミュレートされたデバイスについて] をクリックします。
- 一番下までスクロールし、デベロッパー設定が有効になるまで [ビルド番号] をすばやくクリックします。
次に、デバイスの [設定] アプリで次の手順に沿ってクイック設定タイルを有効にします。
- 画面上部の検索アイコンまたは検索バーをクリックします
- 検索フィールドに「タイル」と入力します。
- [クイック設定開発者タイル] 行をクリックします
- [ウィンドウ アニメ スケール] スイッチをクリックします。
最後に、Codelab 全体を通して、画面上部からシステム通知シェードをプルダウンし、
アイコンを使用してアニメーションの速度を遅くしたり、通常に戻したりします。
3. サンプルアプリのコードを習得する
次に、コードを見てみましょう。Jetpack Navigation コンポーネント ライブラリを使用して、1 つのアクティビティ MainActivity 内で複数のフラグメント間を移動するアプリを用意しています。
- HomeFragment: メールの一覧を表示します。
- EmailFragment: 単一の完全なメールを表示します。
- ComposeFragment: 新しいメールの作成を可能にします。
- SearchFragment: 検索ビューが表示されます。
navigation_graph.xml
まず、アプリのナビゲーション グラフがどのように設定されているかを理解するために、app -> src -> main -> res -> navigation ディレクトリの navigation_graph.xml を開きます。
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/navigation_graph"
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name="com.materialstudies.reply.ui.home.HomeFragment"
android:label="HomeFragment">
<argument...>
<action
android:id="@+id/action_homeFragment_to_emailFragment"
app:destination="@id/emailFragment" />
</fragment>
<fragment
android:id="@+id/emailFragment"
android:name="com.materialstudies.reply.ui.email.EmailFragment"
android:label="EmailFragment">
<argument...>
</fragment>
<fragment
android:id="@+id/composeFragment"
android:name="com.materialstudies.reply.ui.compose.ComposeFragment"
android:label="ComposeFragment">
<argument...>
</fragment>
<fragment
android:id="@+id/searchFragment"
android:name="com.materialstudies.reply.ui.search.SearchFragment"
android:label="SearchFragment" />
<action
android:id="@+id/action_global_homeFragment"
app:destination="@+id/homeFragment"
app:launchSingleTop="true"
app:popUpTo="@+id/navigation_graph"
app:popUpToInclusive="true"/>
<action
android:id="@+id/action_global_composeFragment"
app:destination="@+id/composeFragment" />
<action
android:id="@+id/action_global_searchFragment"
app:destination="@+id/searchFragment" />
</navigation>
上記のすべてのフラグメントが存在する点に注意してください。デフォルトの起動フラグメントは app:startDestination="@id/homeFragment" で HomeFragment に設定されています。このフラグメント デスティネーション グラフの XML 定義とアクションは、遷移をフックするときに生成される Kotlin ナビゲーション コードに通知されます。
activity_main.xml
次に、app -> src -> main -> res -> layout ディレクトリにある activity_main.xml レイアウトを確認します。上記のナビゲーション グラフで構成された NavHostFragment が表示されます。
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="@navigation/navigation_graph"/>
この NavHostFragment は画面全体に表示され、アプリの全画面フラグメント ナビゲーションの変更をすべて処理します。BottomAppBar とそのアンカー FloatingActionButton（同じ activity_main.xml）は、NavHostFragment によって表示されている現在のフラグメントの上に配置されるため、提供されたサンプルアプリコードによってフラグメントのデスティネーションに応じて表示または非表示になります。
また、activity_main.xml の BottomNavDrawerFragment は、さまざまなメールボックス間を移動するためのメニューを含む下部ドロワーです。このドロワーは、BottomAppBar 返信ロゴボタンを介して条件付きで表示されます。
MainActivity.kt
最後に、使用されているナビゲーション アクションの例を確認するために、app -> src -> main -> java -> com.materialstudies.reply.ui ディレクトリの MainActivity.kt を開きます。次のように navigateToSearch() 関数を見つけます。
private fun navigateToSearch() {
val directions = SearchFragmentDirections.actionGlobalSearchFragment()
findNavController(R.id.nav_host_fragment).navigate(directions)
}
カスタム遷移なしで検索ビューページに移動する方法を示しています。この Codelab では、アプリ中のさまざまなナビゲーション アクションと連動するマテリアル移行を設定するための Reply の MainActivity と 4 つのメイン フラグメントについて、詳しく説明します。
スターター コードに慣れてきたところで、最初の移行を実装してみましょう。
4. メール一覧からメール詳細ページへのコンテナ変換移行を追加する
まず、メールをクリックしたときの移行を追加します。このナビゲーション変更には、コンテナを含む UI 要素間の移行を考慮して設計されたコンテナ変換パターンが適しています。このパターンでは、2 つの UI 要素間に視覚的なつながりが作成されます。
コードを追加する前に、Reply アプリを実行してメールをクリックしてみましょう。単純なジャンプカットが実行されます。つまり、移行なしで画面が切り替わります。
まず、次のスニペットに示すように、email_item_layout.xml の MaterialCardView に transitionName 属性を追加します。
email_item_layout.xml
android:transitionName="@{@string/email_card_transition_name(email.id)}"
遷移名は、パラメータ付きの文字列リソースを取ります。各メールの ID を使用して、EmailFragment の各 transitionName が一意になるようにする必要があります。
メーリング リストの項目の移行名を設定できたので、メールの詳細レイアウトでも同様にします。fragment_email.xml で、MaterialCardView の transitionName を次の文字列リソースに設定します。
fragment_email.xml
android:transitionName="@string/email_card_detail_transition_name"
HomeFragment.kt で、onEmailClicked のコードを以下のスニペットに置き換えて、開始ビュー（メーリング リストのアイテム）と終了ビュー（メールの詳細画面）からマッピングを作成します。
HomeFragment.kt
val emailCardDetailTransitionName = getString(R.string.email_card_detail_transition_name)
val extras = FragmentNavigatorExtras(cardView to emailCardDetailTransitionName)
val directions = HomeFragmentDirections.actionHomeFragmentToEmailFragment(email.id)
findNavController().navigate(directions, extras)
プラミングの構成が完了したため、コンテナ変換を作成できます。EmailFragment onCreate メソッドで、次のスニペットを追加して、sharedElementEnterTransition を MaterialContainerTransform の新しいインスタンスに設定します（com.google.android.material.transition.platform バージョンではなく com.google.android.material.transition バージョンをインポートします）。
EmailFragment.kt
sharedElementEnterTransition = MaterialContainerTransform().apply {
drawingViewId = R.id.nav_host_fragment
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
scrimColor = Color.TRANSPARENT
setAllContainerColors(requireContext().themeColor(R.attr.colorSurface))
}
アプリを再実行してみてください。
視覚的な効果が向上しています。メーリング リストでメールをクリックすると、コンテナ変換によってリストアイテムが全画面表示の詳細ページに展開されます。ただし、[戻る] を押してもメールがリストに閉じません。また、遷移の開始時にメールリストがすぐに消えて、ウィンドウの背景がグレーになります。つまり、まだ完了していません。
戻り遷移を修正するには、HomeFragment.kt の onViewCreated メソッドに次の 2 行を追加します。
HomeFragment.kt
postponeEnterTransition()
view.doOnPreDraw { startPostponedEnterTransition() }
アプリを再起動してみてください。メールを開いた後に [戻る] を押すと、メールがリストに閉じられます。良い傾向です。アニメーションの改善を続けましょう。
メールリストが消える問題は、Navigation コンポーネントを使用して新しい Fragment に移動すると、現在の Fragment がすぐに削除され、新しい受信 Fragment に置き換えられることが原因です。メーリング リストを置換後も引き続き表示するには、HomeFragment への終了遷移を追加します。
以下のスニペットを HomeFragment onEmailClicked メソッドに追加して、終了時にメールのリストを少しずつスケールアウトし、再入力時に再度開くようにします。
HomeFragment.kt
exitTransition = MaterialElevationScale(false).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
reenterTransition = MaterialElevationScale(true).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
次に、MaterialElevationScale 遷移が階層内の個々のビューではなく、ホーム画面全体に適用されるように、fragment_home.xml の RecyclerView を遷移グループとしてマークします。
fragment_home.xml
android:transitionGroup="true"
この段階で、コンテナ変換は完全に機能しているはずです。メールをクリックすると、リスト項目が展開されて詳細画面になり、メール一覧が後退します。[戻る] を押すと、メール詳細画面がたたまれてリスト項目に戻り、メール一覧が拡大します。
5. FAB からメール作成ページへのコンテナ変換移行を追加する
引き続きコンテナ変換を行い、フローティング操作ボタンから ComposeFragment への移行を追加して、ユーザーが作成する新しいメールに FAB を展開します。まずアプリを再実行して FAB をクリックし、メール作成画面を開いても移行が行われないことを確認します。
同じ遷移クラスを使用しますが、FAB は MainActivity にあり、ComposeFragment は MainActivity ナビゲーション ホスト コンテナ内にあるため、このインスタンスの設定方法は異なります。
ComposeFragment.kt で、次のスニペットを onViewCreated メソッドに追加し、必ず androidx.transition バージョンの Slide をインポートします。
ComposeFragment.kt
enterTransition = MaterialContainerTransform().apply {
startView = requireActivity().findViewById(R.id.fab)
endView = emailCardView
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
scrimColor = Color.TRANSPARENT
containerColor = requireContext().themeColor(R.attr.colorSurface)
startContainerColor = requireContext().themeColor(R.attr.colorSecondary)
endContainerColor = requireContext().themeColor(R.attr.colorSurface)
}
returnTransition = Slide().apply {
duration = resources.getInteger(R.integer.reply_motion_duration_medium).toLong()
addTarget(R.id.email_card_view)
}
以前のコンテナ変換の構成に使用したパラメータに加えて、ここでは startView と endView を手動で設定しています。transitionName 属性を使用して、変換するビューを Android Transition システムに伝える代わりに、必要に応じて手動で指定できます。
アプリを再実行します。FAB が作成画面に変換されているはずです（このステップの最後にある GIF をご覧ください）。
前の手順と同様に、HomeFragment に遷移を追加して、削除されて ComposeFragment に置き換えられた後に消えないようにする必要があります。
以下のスニペットを、MainActivity の navigateToCompose メソッドにコピーしてから、NavController navigate を呼び出します。
MainActivity.kt
currentNavigationFragment?.apply {
exitTransition = MaterialElevationScale(false).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
reenterTransition = MaterialElevationScale(true).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
}
これで完了です。FAB から作成画面への移行は次のようになるはずです。
6. 検索アイコンから検索ビューページへの z 軸共有移行を追加する
このステップでは、検索アイコンから全画面検索ビューへの移行を追加します。このナビゲーション変更には永続的なコンテナが関わってないため、z 軸共有移行を使用して、2 つの画面間の空間関係を強化し、アプリの階層内での 1 段階上昇を示すことができます。
コードを追加する前に、アプリを実行し、画面右下隅の検索アイコンをタップしてみましょう。移行なしで検索ビュー画面が表示されるはずです。
まず、MainActivity で navigateToSearch メソッドを探し、NavController navigate メソッド呼び出しの前に次のコード スニペットを追加します。これにより、現在のフラグメントの終了をセットアップして、MaterialSharedAxis の Z 軸遷移が再表示されます。
MainActivity.kt
currentNavigationFragment?.apply {
exitTransition = MaterialSharedAxis(MaterialSharedAxis.Z, true).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
reenterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, false).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
}
次に、SearchFragment の onCreate メソッドに次のコード スニペットを追加します。これにより、開始と戻りの MaterialSharedAxis 遷移が構成されます。
SearchFragment.kt
enterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, true).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
returnTransition = MaterialSharedAxis(MaterialSharedAxis.Z, false).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
最後に、MaterialSharedAxis 遷移が階層内の個々のビューではなく、検索画面全体に適用されるように、fragment_search.xml の LinearLayout を遷移グループとしてマークします。
fragment_search.xml
android:transitionGroup="true"
これで、アプリをもう一度実行し、検索アイコンをタップしてみてください。ホーム画面と検索ビュー画面は、Z 軸に沿って深さを同時にフェードまたはスケーリングさせ、2 つの画面の間にシームレスな効果をもたらします。
7. メールボックス ページ間のフェードスルー移行を追加する
このステップでは、異なるメールボックス間の移行を追加します。空間的または階層的な関係は強調したくないため、フェードスルーを使用してメール一覧間の単純な「スワップ」を行います。
コードを追加する前に、アプリを実行し、ボトム アプリバーの Reply ロゴをタップして、メールボックスの切り替えを行ってみましょう。移行なしでメール一覧が切り替わるはずです。
まず、MainActivity で navigateToHome メソッドを見つけ、NavController navigate メソッド呼び出しの前に次のコード スニペットを追加して、現在のフラグメントの終了 MaterialFadeThrough 遷移を設定します。
MainActivity.kt
currentNavigationFragment?.apply {
exitTransition = MaterialFadeThrough().apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
}
次に、HomeFragment を開きます。onCreate で、フラグメントの enterTransition を MaterialFadeThrough の新しいインスタンスに設定します。
HomeFragment.kt
enterTransition = MaterialFadeThrough().apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
アプリを再実行します。ボトム ナビゲーション ドロワーを開いてメールボックスを変更すると、現在のメール一覧がフェードしてスケールアウトする一方で、新しい一覧がフェードしてスケールインします。すばらしいですね！
8. メールアドレスチップからカードビューへのコンテナ変換移行を追加する
このステップでは、チップをポップアップ カードに変換する遷移を追加します。ここでは、コンテナ変換を使用して、ポップアップで実行されたアクションが、ポップアップの元となったチップに影響することをユーザーに伝えます。
コードを追加する前に、Reply アプリを実行してメールをクリックし、[返信] FAB をクリックしてから、受信者の連絡先チップをクリックしてみます。チップはすぐに消え、その連絡先のメールアドレスが記載されたカードがアニメーションなしでポップアップ表示されます。
このステップでは ComposeFragment で作業します。ComposeFragment レイアウトにすでに追加されているのは、受信者チップ（デフォルトで表示）と受信者カード（デフォルトで非表示）です。受信者チップとこのカードの 2 つのビューが、コンテナ変換を作成する 2 つのビューです。
まず、ComposeFragment を開き、expandChip メソッドを見つけます。このメソッドは、指定された chip がクリックされると呼び出されます。recipientCardView と chip の可視性を切り替える行の上に次のコード スニペットを追加します。これにより、beginDelayedTransition を介して登録されたコンテナ変換がトリガーされます。
ComposeFragment.kt
val transform = MaterialContainerTransform().apply {
startView = chip
endView = binding.recipientCardView
scrimColor = Color.TRANSPARENT
endElevation = requireContext().resources.getDimension(
R.dimen.email_recipient_card_popup_elevation_compat
)
addTarget(binding.recipientCardView)
}
TransitionManager.beginDelayedTransition(binding.composeConstraintLayout, transform)
アプリを実行すると、チップが受信者のメールアドレスのカードに変換されます。次に、カードをチップ内に折りたたむようにリターン トランジションを構成します。
ComposeFragment の collapseChip メソッドに、以下のコード スニペットを追加して、カードをチップ内に折りたたむようにします。
ComposeFragment.kt
val transform = MaterialContainerTransform().apply {
startView = binding.recipientCardView
endView = chip
scrimColor = Color.TRANSPARENT
startElevation = requireContext().resources.getDimension(
R.dimen.email_recipient_card_popup_elevation_compat
)
addTarget(chip)
}
TransitionManager.beginDelayedTransition(binding.composeConstraintLayout, transform)
アプリを再実行します。チップをクリックするとチップがカードに展開され、カードをクリックするとカードが折りたたまれてチップに戻ります。すばらしいですね！
9. すべて完了
100 行未満の Kotlin コードと基本的な XML マークアップを使用する MDC-Android ライブラリは、マテリアル デザイン ガイドラインに準拠し、すべての Android デバイスで一貫した外観と動作をする既存のアプリに美しい遷移を作成するのに役立っています。
次の手順
マテリアル モーション システムの詳細については、仕様とデベロッパー向けドキュメント全文を確認し、いくつかのマテリアル移行をアプリに追加してみてください。
マテリアル モーションをお試しいただきありがとうございます。この Codelab がお役に立ちましたら幸いです。