この記事は Gurupreet Singh, Developer Advocate; Android による Android Developers Blog の記事 " Material Design 3 for Compose hits stable " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
昨年 2022 年 10 月 24 日に、Compose マテリアル 3 (英語) の最初の安定版がリリースされました、このライブラリを使うと、マテリアル デザインの次の進化版であるマテリアル デザイン 3 (英語) を使って Jetpack Compose の UI を構築できます。マテリアル デザイン 3 は、皆さんのアプリに利用できます。
注 : 「マテリアル デザイン 3」、「マテリアル 3」、「M3」という用語はどれも同じものを指しています。
マテリアル 3 には、アップデートされたテーマ設定やコンポーネントのほか、ダイナミック カラーなどの新機能が含まれており、最新の Android のビジュアル スタイルやシステム UI との整合性が取れるようにデザインされています。
build.gradle ファイルに Compose Material 3 への依存関係を追加すると、アプリでマテリアル デザイン 3 を使い始めることができます。
// モジュールの build.gradle に依存関係を追加implementation "androidx.compose.material3:material3:$material3_version"
// モジュールの build.gradle に依存関係を追加
implementation "androidx.compose.material3:material3:$material3_version"
// ダイナミック カラーは Android 12 以降で利用可能val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.Sval colorScheme = when { dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current) dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current) darkTheme -> darkColorScheme(...) else -> lightColorScheme(...)}MaterialTheme( colorScheme = colorScheme, typography = typography, shapes = shapes) { // M3 App のコンテンツ}
Switch( checked = isChecked, onCheckedChange = { /*...*/ }, thumbContent = { Icon( imageVector = Icons.Default.Check, contentDescription = stringResource(id = R.string.switch_check) ) }, )
ModalNavigationDrawer { ModalDrawerSheet( drawerShape = MaterialTheme.shapes.small, drawerContainerColor = MaterialTheme.colorScheme.primaryContainer, drawerContentColor = MaterialTheme.colorScheme.onPrimaryContainer, drawerTonalElevation = 4.dp, ) { DESTINATIONS.forEach { destination -> NavigationDrawerItem( selected = selectedDestination == destination.route, onClick = { ... }, icon = { ... }, label = { ... } ) } }}
CenterAlignedTopAppBar( title = { Text(stringResources(R.string.top_stories)) }, scrollBehavior = scrollBehavior, navigationIcon = { /* ナビゲーション アイコン */}, actions = { /* アプリバーのアクション */} )
val typography = Typography( titleLarge = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = 0.sp ), titleMedium = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp ), ...}
bodyLarge = TextStyle( fontWeight = FontWeight.Normal, fontFamily = FontFamily.SansSerif, fontStyle = FontStyle.Italic, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp, baselineShift = BaselineShift.Subscript)
val shapes = Shapes( extraSmall = RoundedCornerShape(4.dp), small = RoundedCornerShape(8.dp), medium = RoundedCornerShape(12.dp), large = RoundedCornerShape(16.dp), extraLarge = RoundedCornerShape(28.dp))
// モジュールの build.gradle に依存関係を追加implementation "androidx.compose.material3:material3-window-size-class:$material3_version"
Scaffold( contentWindowInsets = WindowInsets(16.dp)) { // Scaffold のコンテンツ}
この記事は Maru Ahues Bouza による Android Developers Blog の記事 " Beta 1 Update for 12L feature drop! " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
昨年 10 月の Android Dev Summit では、タブレット、折りたたみ式、Chromebook などの大画面デバイスが成長を続けていることをお知らせしました。こういったデバイスで、新しい Jetpack API やツール、ガイドを通して優れたアプリ エクスペリエンスを構築しやすくする取り組みについてもお話ししました。さらに、大画面向けに構築された Android 12 のフィーチャー ドロップである 12L のデベロッパー プレビューについても紹介しました。
12L では、大画面向けのシステム UI を最適化して磨きをかけ、マルチタスクをさらに強力で直感的なものにし、何もしなくても見栄えのよいアプリになるように互換性サポートを改善しています。12L には、いくつかのデベロッパー向け新 API が含まれています。たとえば、空間オーディオやドラッグ＆ドロップ関連のユーザー補助の改善などです。
12L の最初のベータ版は昨年 12 月にリリースしました。このフィーチャー ドロップは、今年初めに公開する予定です。皆さんのアプリを対応させるうえで、テストやフィードバックにご利用ください。Android Studio で Android エミュレータを設定すると、新しい大画面機能を試すことができます。12L はスマートフォンにも対応しています。こちらから登録すると、サポート対象の Pixel デバイスに 12L のベータ版 1 をインストールできます。Android 12 ベータ プログラムに引き続き登録している方は、自動的に 12L のアップデートを取得します。Lenovo との連携により、12L は Lenovo Tab P12 Pro タブレットでも試すことができます。利用可能なビルドやサポートに関する詳細は、Lenovo のサイト(英語) をご覧ください。
ベータ版 1 ビルドには、機能やユーザー エクスペリエンスの改善に加え、最新のバグの修正、最適化、2021 年 12 月のセキュリティ パッチが含まれています。デベロッパー向けの機能としては、すでに API は確定しているので、ベータ版 1 には正式版の 12L API（API レベル 32）、アップデートされたビルドツール、テスト用のシステム イメージが含まれています。つまり、アプリで 12L の機能をテストするために必要なものがすべてそろいます。
12L では、通知、クイック設定、ロック画面、概要、ホーム画面など、大画面デバイスの UI を洗練させることに集中的に取り組んでいます。たとえば、600dp 以上の画面では、スペースを有効活用するため、通知シェードやロック画面などのシステム領域で新しい 2 列レイアウトを利用します。
2 列レイアウトでは表示内容が多くなり使いやすさが向上
マルチタスクもさらに強力で直感的なものに進化しています。12L には、大画面用の新しいタスクバーが含まれており、ユーザーは即座にお気に入りのアプリに切り替えたり、ドラッグ＆ドロップして分割画面モードに切り替えたりすることができます。なお、Android 12 以降では、アプリがサイズ変更可能かどうかに関係なく、どんなアプリでも分割画面モードで起動できます。分割画面モードでアプリをテストすることを忘れないようにしましょう。
アプリをドラッグ＆ドロップして分割画面モードに
さらに、互換性モードの外観と安定性を改善し、レターボックス表示の際のユーザー エクスペリエンスを向上させるとともに、デフォルトでアプリの見栄えがよくなるようにしています。アプリで大画面向けの最適化が済んでいない場合でも、新しいレターボックス表示のテストは行うようにしてください。
大画面向けにアプリを最適化する際に、優れたユーザー エクスペリエンスを簡単に実現できる最新の API やツールをいくつか用意します。
以上の機能の詳しい内容や、その他の API やツールについては、大画面デベロッパー リソースをご覧ください。
12L フィーチャー ドロップは今年始めにデバイスに配信される予定なので、今がアプリを大画面向けに最適化する絶好の機会です。デベロッパーの皆さんには、さまざまなサイズのウィンドウの分割画面モードで、アプリの動作を確認しておくことを強くおすすめします。まだアプリを最適化していない方は、さまざまな画面の向きでどのように表示されるかを確認し、必要に応じて新しい互換性モード関連の変更点を試してみてください。
大画面機能を試してみる一番簡単な方法は、折りたたみ式またはタブレットの設定で Android Emulator を使うことです。こちらにすべての設定手順が記載されているので、ご覧ください。
大画面デバイスに 12L を書き込むこともできるようになっています。Lenovo との連携により、Lenovo Tab P12 Pro でも 12L のプレビュー ビルドを試すことができます。現時点で、Lenovo はデベロッパー プレビュー 1 ビルドを提供しています。今後数週間のうちにアップデートが公開される予定です。利用可能なビルドやサポートなど、完全な情報は Lenovo の 12L プレビュー サイト (英語) をご覧ください。
12L はスマートフォンにも適用されます。小さな画面では大画面機能を確認できませんが、ぜひこのフィーチャー ドロップによる最新の改善点をお試しいただければと思います。サポート対象の Pixel デバイスをこちらから登録すると、最新の 12L ベータ版アップデートを OTA (無線)で受け取ることができます。Android 12 ベータ プログラムに引き続き登録している方は、自動的に 12L アップデートを受け取ります。
12L の詳細やリリース スケジュールは、12L デベロッパー サイトをご覧ください。問題点やリクエストはこちらから報告できます。いつものように、皆さんのフィードバックをお待ちしています！
Reviewed by Tamao Imura - Developer Marketing Manager, Google Play
この記事は Dave Burke による Android Developers Blog の記事 " 12L and new Android APIs and tools for large screens " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
タブレット、折りたたみ式デバイス、ChromeOS デバイスを合わせると、2 億 5000 万台を超える大画面デバイスが Android を実行しています。ここ 12 か月だけでも、1 億台近くの新しい Android タブレットがアクティベートされました。これは前年比 20% の増加です。現在最も成長が著しいデスクトップ プラットフォームである ChromeOS は、92% の増加率となっていますが、さらに、折りたたみ式デバイスも急増中で、前年比 265% 以上の成長を遂げています。すべて合わせれば、Android が動作しているアクティブな大画面デバイスは 2 億 5000 万台を超えます。その勢いを受けて、このようなデバイスで動作している Android を、ユーザーにとってもデベロッパーにとってもよりよい OS にするために、私たちは努力を続けています。
そこで 2021 年 10 月 27 日 (日本時間:10 月 28 日) の Android Dev Summit (英語、動画は日本語字幕あり) では、大画面に特化した Android 12 のフィーチャー ドロップについてお知らせしました。私たちはこれを 12L と呼んでいます。併せて、大画面向けの開発を容易にするための新 API や新ツール、ガイダンスも準備しています。さらに、Google Play で行っている変更についてもお話ししました。これにより、ユーザーは大画面に最適化されたアプリをこれまで以上に簡単に見つけられるようになります。ここでは、Android の大画面向け新機能について紹介しますので、ぜひお読みください。
先月、12L のデベロッパー プレビュー を提供しました。これは今後公開する予定のフィーチャー ドロップで、Android 12 を大画面でさらに快適に使えるようにするものです。このプレビューを使って、大画面関連の新機能を試したり、自分のアプリを最適化したり、フィードバックの送信が可能です。
12L では、通知、クイック設定、ロック画面、概要、ホーム画面など、大画面向けの UI 全般を改善しました。たとえば、画面領域を有効活用するため、600dp を超える画面では、通知シェードやロック画面、その他のシステム表示を新しい 2 列レイアウトで表示します。システムアプリも最適化されます。
2 列レイアウトによって表示できる内容が増加し、さらに使いやすいものに
また、マルチタスクをこれまで以上に強力で直感的なものにしました。12L では大画面で新しいタスクバーが搭載されるので、ユーザーはすぐにお気に入りのアプリに切り替えることができます。このタスクバーのおかげで、分割画面モードもこれまで以上にわかりやすくなり、タスクバーからドラッグ＆ドロップするだけで、アプリを分割画面モードで実行できるようになります。また、Android 12 以降で分割画面モードの操作性を向上させるため、アプリがサイズ変更可能かどうかにかかわらず、すべてのアプリを自動的に分割画面モードに対応させます。
アプリをドラッグ＆ドロップして分割画面モードで実行
さらに、互換性モードを改善して見た目と安定性を向上させ、レターボックス表示の快適さを向上させたほか、アプリのデフォルトでの外観も改善しました。レターボックス表示は、デバイス メーカーが簡単にカスタマイズできるようになっているので、カスタムの色や処理を設定したり、はめ込むウィンドウの位置を調整したり、カスタムの角丸を適用したりできるようになっています。
Android 12 のタブレットや折りたたみ式デバイスが次にまとまって登場するタイミングに間に合うように、12L のフィーチャー ドロップは来年の早い時期にリリースする計画です。以上のような機能を大画面デバイスに導入するため、私たちは既に OEM パートナーと協力して作業を進めています。近日中に 12L のデベロッパー プレビューが Lenovo P12 Pro (日本未発表) に搭載される予定なので、ご期待ください。数か月後には、この機能がデバイスに配信されます。今から大画面向けに最適化したアプリの準備を入念にしておきましょう。
デベロッパーの皆さんには、さまざまなサイズのウィンドウの分割画面モードでアプリがどのように動作するかを確かめておくことを強くお勧めします。まだアプリを最適化していない方は、画面の向きを変えたときにどう見えるかを確認し、新しい互換性モードの変更が適用される場合はそれを試してみましょう。12L には、大画面向け機能のほかにも、いくつかのデベロッパー向けの新 API や、新しい API レベルが含まれています。アプリに互換性を破る変更が起こらないように注意しているので、アプリのターゲットを 12L にしなくても Google Play 要件を満たすことができます。
12L を使ってみたい方は、Android Studio の最新プレビュー リリースから、12L Android Emulator のシステム イメージやツールをダウンロードしてください。機能と変更点を確認してアプリをテストする領域を判断し、プレビューの概要でスケジュールやリリースの詳細をご確認ください。問題やリクエストはこちらから報告できます。そしていつものように、フィードバックは大歓迎です。
12L はスマートフォンでも利用できますが、ほとんどの新機能は小さな画面では確認できません。現在、私たちはタブレット、折りたたみ式デバイス、ChromeOS デバイスに重点的に対応しています。今後のプレビューでは、Pixel デバイス向けに Android ベータ版への登録をオープンする予定です。詳しくは、developer.android.com/12L をご覧ください。
どんな画面にも適応する完全にアダプティブなアプリを作り始める時です。そして、それを今まで以上に簡単に実現できるようにしています。OS や Play でアプリの変更に対応できるように、デベロッパー プレビューと併せて API やツール、ガイダンスのアップデートを公開します。
アダプティブ UI をサポートするための第一歩は、小さな画面と大きな画面の両方でうまく動作するアプリを設計することです。私たちは、アプリの UI をあらゆる画面サイズに対応させる際に役立ててもらうため、新しいマテリアル デザインのガイダンス (英語) の作成を進めてきました。このガイダンスは、エコシステムでよく使われている一般的なレイアウト パターンをカバーしているので、さまざまなアイデアが得られるだけでなく、作業を加速することにもつながるはずです。
マテリアル デザインのガイドライン、アダプティブ UI パターン
最高のナビゲーション エクスペリエンスをユーザーに提供するには、ユーザーが使うデバイスのウィンドウ サイズ クラスに合わせたナビゲーション UI を提供する必要があります。私たちが推奨するナビゲーション パターンには、コンパクトな画面（compact）ではナビゲーション バー (英語) を使う、中程度（medium）以上の画面幅（600dp 以上）のデバイスクラスではナビゲーション レール (英語) を使う、などがあります。新たに公開したマテリアル デザインのガイダンス (英語) には、広い画面幅（expanded）のデバイス向けに、いくつかの大画面レイアウトのアイデアが掲載されています。たとえば、SlidingPaneLayout を使って実装できるリスト / 詳細構造などです。ガイダンスを参照して、ビューと Compose でアダプティブ UI 向けのナビゲーションを実装する方法をご確認ください。
フラグメントを使っている既存アプリに大画面に最適なレイアウトを適用する場合、ナビゲーション パターンを更新して SlidingPaneLayout を使うのはすばらしい方法です。しかし、多くの皆さんが複数のアクティビティに基づいたアプリを作っていることは承知しています。そういったアプリでは、Jetpack WindowManager 1.0 ベータ版 03 で新しくリリースしたアクティビティ埋め込み API を使うと、TwoPane ビューなどの新しい UI パラダイムに簡単に対応できます。現在、SlidingPaneLayout をアップデートしてこの API をサポートする作業を進めています。今後数か月間のアップデートに注目してください。
Jetpack Compose を使うと、大画面や多様なレイアウトを対象にした開発が楽になります。Compose の採用を始めているなら、大画面向けの最適化を行う絶好のチャンスです。
Compose は宣言型 UI ツールキットです。すべての UI をコードで記述するので、UI が利用できるサイズにどう適応すべきかを実行時に判断するのは簡単です。Compose がアダプティブ UI の開発に特に向いているのはそのためで、画面サイズやコンポーネントの違いによる UI の変更にとても簡単に対処できます。Compose でアダプティブ レイアウトを構築するためのガイドでは、知っておくべき基本的な事項について説明しています。
Jetpack WindowManager ライブラリを使うと、下位互換性のある形でアプリのウィンドウを操作し、すべてのデバイスを対象としたレスポンシブな UI を開発できます。新機能は以下のとおりです。
アクティビティを埋め込むと、たとえばリスト / 詳細パターンなど、複数のアクティビティを一度に表示することで、大画面で利用できるようになる広い表示領域を有効活用できます。その際、アプリのリファクタリングはほとんど、あるいはまったく必要ありません。並べるか重ねるかなど、アプリにどのようにアクティビティを表示するかは、皆さんが決定します。具体的には、XML 構成ファイルを作成するか、Jetpack WindowManager API を呼び出します。あとはシステムが対応して、作成した構成に基づいて表示方法を決めてくれます。
アクティビティの埋め込みは、折りたたみ式デバイスでもシームレスに動作します。デバイスを折りたたんだり広げたりすると、それに応じてアクティビティが重なったり並んだりします。アプリで複数のアクティビティを使っている方は、アクティビティの埋め込みを使って大画面デバイスでのユーザー エクスペリエンスを向上させることができます。アクティビティ埋め込み API は、Jetpack WindowManager 1.0 ベータ版 03 以降のリリースで試すことができます。詳しくはこちらをご覧ください。
Jetpack WindowManager でアクティビティを埋め込む
ウィンドウ サイズ クラスは、綿密に検討されたビューポートの一連のブレークポイントで、サイズ変更可能なアプリでのレイアウトの設計、開発、テストに利用できます。ウィンドウ サイズ クラスのブレークポイントは、compact（コンパクト）、medium（中程度）、expanded（広い）の 3 つのカテゴリに分かれています。これらは、エコシステムのデバイスの大部分を表しつつ、レイアウトのシンプルさと特異なユースケースにアプリを最適化できる柔軟性との間でバランスをとるように設計されています。WindowSizeClass API は、近日中に Jetpack WindowManager 1.1 で公開される予定です。これにより、レスポンシブ UI の構築がさらに簡単になります。詳しくはこちらをご覧ください。
Jetpack WindowManager のウィンドウ サイズ クラス
WindowManager では、折り目やヒンジなど、さまざまなウィンドウ形状に対応した一般的な API サーフェスも提供されます。折りたたみ対応のアプリでは、折り目やヒンジの部分を避けてウィンドウのコンテンツを表示したり、折り目やヒンジの部分を自然なセパレータとしてうまく活用したりできます。アプリを折りたたみ対応にする方法は、こちらのガイドをご覧ください。
Android アプリは、あらゆるデバイス、そしてあらゆるカテゴリに適応できるように構築すべきです。そこで、Android Studio 全体を対象として、UI やレイアウトの設計、開発、テストを行うたくさんのツールに、リファレンス デバイスを導入します。リファレンス デバイスは 4 つあり、それぞれスマートフォン、大型折りたたみ式デバイスの内側ディスプレイ、タブレット、デスクトップを表します。マーケットのデータを分析して設計したもので、人気のデバイスや急成長中のセグメントを表しています。また、リファレンス デバイスを規定したことで、新しい WindowSizeClass のブレークポイントを使ってアプリがさまざまなよくあるブレークポイントの組み合わせに対応して動作することを確認できるようになります。そのため、アプリができる限り多くのユースケースをカバーすることを保証できます。
リファレンス デバイスの定義
大画面向け UI の対応を始める際に、どこから手を付けてよいかわからない方もいらっしゃるかもしれません。その場合は、まず新しいツールを使って、大画面デバイスで起こりうる問題を確認しましょう。Android Studio Chipmunk では、レイアウト検証によって先回りで UI について警告や提案を行ってくれる新しいビジュアル lint チェックツールを開発しています。どのリファレンス デバイスが影響を受けるかもわかるようになっています。
リファレンス デバイスの各クラスが表示されたレイアウト検証ツール
ランタイムでアプリをテストする場合、Android Studio Chipmunk (英語) に搭載されているサイズ変更可能な新しいエミュレータ構成を使うことができます。サイズ変更可能なエミュレータを使うと、4 つのリファレンス デバイス（スマートフォン、折りたたみ式、タブレット、デスクトップ）をすばやく切り替えることができます。これにより、設計時にレイアウトを検証したり、ランタイムで動作をテストしたりする操作が簡単になります。どちらの作業にも、同じリファレンス デバイスを使うことができます。サイズ変更可能なエミュレータを新規作成するには、Android Studio の Device Manager を使って新しい仮想デバイスを作成し、Resizable デバイス定義と Android 12L（Sv2）システム イメージを選択します。
サイズ変更可能な Android Emulator
タブレット、折りたたみ式、ChromeOS の各デバイスに最適なアプリを簡単に探せるようにするため、ユーザーのデバイスに最も適したアプリを目立たせるように Play を変更します。
現在、それぞれのアプリの品質を大画面アプリ品質ガイドライン (英語) に照らして評価する新たなチェックを追加する作業を行っています。これにより、デバイスに最適なアプリが目立つようになります。Play ストアで大画面のユーザーが大画面に最適化されていないアプリを表示した場合、そのアプリのストア掲載情報ページに通知を表示する予定です。
加えて、既にお知らせしたように、アプリの評価にも大画面専用の評価を導入し、大画面デバイスでアプリがどう動作するかをユーザーが評価できるようにします。以上の変更は来年に実施する予定です。皆さんがアプリの準備を始められるように、あらかじめお知らせいたしました。
また、Google Play で Google のビジネスモデルを進化させてデベロッパーのニーズに応えるための取り組みを紹介した記事も忘れずに確認しておきましょう。
大画面や折りたたみ式デバイス向けの開発を始めるうえで役立てていただけるように、私たちはビューにも Compose にも対応します。新規アプリや既存アプリで異なる画面サイズをサポートする方法、ビューと Compose の両方でナビゲーションを実装する方法、折りたたみ式デバイスのメリットを活用する方法などを紹介したガイダンスの追加や改訂も行っています。ビューのサポートの大画面ガイドのセクション、または Compose ガイドのセクションをご覧ください。
コードほど雄弁なものはありません。以下のサンプルは、レスポンシブ UI に対応するように更新しています。
実践的な演習を行いたい方は、Codelab で、アップデートされた Jetpack WindowManager による折りたたみ式デバイスとデュアル スクリーン デバイスのサポートをご覧ください。
この記事は Nick Rout による Android Developers Blog の記事 "MAD Skills Material Design Components: Wrap-Up" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
Modern Android Development（最先端の Android 開発）について取り上げる連載シリーズ MAD Skills の動画と記事の 3 番目のトピックが完結しました。今回は、マテリアル デザイン コンポーネント（MDC）についてご説明しました。このライブラリは、マテリアル コンポーネントを Android ウィジェットとして提供します。これを使うと、マテリアル テーマ、ダークテーマ、モーションなど、material.io で使われているデザイン パターンを簡単に実装できます。
説明した内容については、下記にまとめた各エピソードからご確認ください。これらの動画では、MDC についての最新の記事や、既存のサンプルアプリ、Codelab を詳しく説明しています。また、MCD チームのエンジニアによる Q&Aセッションも含まれています 。
最初のエピソードは、Nick Butcher が、なぜ私たちが MDC の利用を推奨するのかなど、今回の MAD Skills シリーズ全体の概要を説明しています。その後、マテリアル テーマ、ダークテーマ、モーションについて詳しく掘り下げていきます。また、MDC を Jetpack Compose と合わせて使う方法、MDC やテーマ、スタイルのベスト プラクティスを含むようにアップデートされた Android Studio のテンプレートについてもお話ししています。
エピソード 2 では、Nick Rout がマテリアル テーマについて説明し、Android で MDC を使ってこれを実装するチュートリアルについて解説しています。主な内容は、Theme.MaterialComponents.* アプリのテーマを設定し、material.io のツールを使用して色や種類、形状の属性を選択し、最終的にそれらをテーマに追加して、ウィジェットがどのように自動的に反応して UI を適応させるかを確認します。また、テーマカラー属性を解決する、イメージに図形を適用するなど、MDC が特定のシナリオ向けに提供している便利なユーティリティ クラスについても説明します。
Theme.MaterialComponents.*
Chris Banes が、Android アプリで MDC を使ってダークテーマを実装する方法を紹介しています。説明する内容は、Force Dark を使って短時間で変換しビューを除外する方法、デザインを選んでダークテーマを手動で作成する方法、`.DayNight` MDC アプリテーマ、`.PrimarySurface` MDC ウィジェット スタイル、そしてシステム UI を扱う方法などです。
エピソード 4 では、Nick Rout がマテリアルのモーション システムについて解説しています。また、既存の「Android でマテリアル モーションを使って美しい画面遷移を構築する」Codelab の手順を詳しくフォローしています。この Codelab では、Reply サンプルアプリを使って、コンテナ変換、共有軸、フェードスルー、フェードという遷移パターンを活用してスムーズでわかりやすいユーザー エクスペリエンスを実現する方法を紹介しています。また、Fragment（Navigation コンポーネントを含む）、Activity、View を使うシナリオについて説明しています。
エピソード 5 は、Android コミュニティから Google Developer Expert (GDE) の Zarah Dominguez さんが、MDC カタログアプリをウィジェットの機能や API の例として参考にしながら紹介してくれました。そのほか、異なる画面やフローにまたがる一貫したデザイン言語を確保するために、彼女が取り組んでいるアプリに「テーマショーケース」ページを構築することが、どのように有益であるかを説明しています。
最後のまとめとして、Chet Haase が MDC エンジニアリング チームの Dan Nizri と Connie Shi と一緒に Q&A セッションを行い、Twitter や YouTube で寄せられた皆さんからの質問に回答しました。このセッションでは MDC の起源、AppCompat との関係、今までの改善点について解説したほか、テーマやリソースを整理するためのベストプラクティス、さまざまなフォントやタイポグラフィ スタイルの使用方法、シェイプ テーミングなどについてお話しました。また、私たちはお気に入りの Material コンポーネントをすべて公開し、最後に、将来的に MDCと Jetpack Compose という Androidの次世代 UI ツールキットでは、デフォルトで Material Design が組み込まれる新しいコンポーネントが登場することについて議論しました。
このシリーズでは、MDC のデモとして、次の 2 つのサンプルアプリを使いました。
これらは、もう 1 つの Material Studies のサンプルアプリである Owl とともに、GitHub リポジトリの MDC サンプルで確認できます。
Reviewed by Takeshi Hagikura - Developer Relations Team and Hidenori Fujii - Google Play Developer Marketing APAC
