Android のマテリアル デザイン

Compose を試す

Jetpack Compose は、Android に推奨される UI ツールキットです。Compose でテーマ設定を操作する方法を学びます。

マテリアル デザイン 3 →

マテリアル デザインは、さまざまなプラットフォームとデバイスでの視覚、モーション、インタラクション デザインに関する包括的なガイドです。Android アプリでマテリアル デザインを使用するには、マテリアル デザイン仕様で定義されているガイドラインを遵守してください。アプリで Jetpack Compose を使用している場合は、Compose Material 3 ライブラリを使用できます。アプリでビューを使用している場合は、Android マテリアル コンポーネント ライブラリを使用できます。

Android には、マテリアル デザイン アプリの作成に役立つ次の機能が用意されています。

• すべての UI ウィジェットをスタイル設定するマテリアル デザイン アプリのテーマ
• リストやカードなどの複雑なビュー向けのウィジェット
• カスタム シャドウとカスタム アニメーションのための API

マテリアル テーマとウィジェット

標準 UI ウィジェットのスタイル設定など、マテリアルの機能を活用し、アプリのスタイル定義を合理化するには、マテリアル ベースのテーマをアプリに適用します。

図 1 ダーク マテリアル テーマ

図 2. ライト マテリアル テーマ

Android Studio を使用して Android プロジェクトを作成すると、デフォルトでマテリアル テーマが適用されます。 プロジェクトのテーマを更新する方法については、スタイルとテーマをご覧ください。

ユーザーに使い慣れたエクスペリエンスを提供するには、マテリアルで最も一般的な UX パターンを使用します。

• UI のメイン アクションをフローティング アクション ボタン（FAB）でプロモートします。
• アプリバーを使用して、ブランド、ナビゲーション、検索などのアクションを表示します。
• ナビゲーション ドロワーでは、アプリのナビゲーションの表示と非表示を切り替えられます。
• 折りたたみ可能なツールバー、タブ、ボトム ナビゲーション バーなど、アプリのレイアウトとナビゲーション用に、他にも多くのマテリアル コンポーネントから選択できます。すべてを確認するには、Android 用マテリアル コンポーネント カタログをご覧ください。

可能な限り、事前定義されたマテリアル アイコンを使用します。たとえば、ナビゲーション ドロワーのナビゲーション「メニュー」ボタンには、標準の「ハンバーガー」アイコンを使用します。使用可能なアイコンのリストについては、マテリアル デザイン アイコンをご覧ください。Android Studio の Vector Asset Studio を使用して、マテリアル アイコン ライブラリから SVG アイコンをインポートすることもできます。

高さのシャドウとカード

X プロパティと Y プロパティに加えて、Android のビューには Z プロパティがあります。このプロパティはビューのエレベーションを表し、以下を決定します。

• シャドウのサイズ: Z 値が大きいビューほど、シャドウが大きくなります。
• 描画順序: Z 値が高いビューが他のビューの上に表示されます。

図 3.高度を表す Z 値。

カードベースのレイアウトに高度を適用できます。これにより、マテリアルの外観を提供するカード内に重要な情報を表示できます。CardView ウィジェットを使用すると、デフォルトの高度でカードを作成できます。詳細については、カードベースのレイアウトを作成するをご覧ください。

他のビューにエレベーションを追加する方法については、シャドウを作成してビューをクリップするをご覧ください。

アニメーション

図 4.タッチ フィードバック アニメーション

アニメーション API を使用すると、UI コントロールでのタッチ フィードバック、ビュー状態の変更、アクティビティ遷移用のカスタム アニメーションを作成できます。

これらの API でできることは次のとおりです。

• タッチ フィードバック アニメーションを使用して、ビューのタッチイベントに反応します。
• 円形出現アニメーションで、ビューの表示と非表示を切り替えます。
• カスタム アクティビティ遷移アニメーションでアクティビティを切り替える。
• 曲線モーションでより自然なアニメーションを作成します。
• ビュー状態の変化アニメーションを使用して、1 つ以上のビュー プロパティの変化をアニメーション化します。
• ビューの状態が切り替わる合間に状態リスト ドローアブルにアニメーションを表示する。

タッチ フィードバック アニメーションは、ボタンなどのいくつかの標準的ビューに組み込まれています。アニメーション API を使用すると、これらのアニメーションをカスタマイズしてカスタムビューに追加できます。

詳細については、アニメーションの概要をご覧ください。

ドローアブル

Compose を試す

Compose でドローアブルを操作する

次のドローアブルの機能は、マテリアル デザイン アプリの実装に役立ちます。

• ベクター型ドローアブルは、定義を失うことなくスケーラブルであり、単色のアプリ内アイコンに最適です。詳しくは、ベクター型ドローアブルをご覧ください。
• ドローアブルの色合い調整では、ビットマップをアルファマスクとして定義し、実行時に色合いを調整できます。ドローアブルに色合いを追加する方法をご覧ください。
• 色抽出を使用すると、ビットマップ画像から代表的な色を自動的に抽出できます。Palette API を使用して色を選択する方法をご覧ください。