Android のマテリアル デザイン

マテリアル デザインは、プラットフォーム間とデバイス間でビジュアル、モーション、インタラクションの設計を行うための包括的なガイドです。Android アプリでマテリアル デザインを使用するには、マテリアル デザインの仕様で定義されているガイドラインに従い、マテリアル デザイン サポート ライブラリにある新しいコンポーネントとスタイルを使用します。このページでは、使用する必要があるパターンと API の概要を説明します。

Android には、マテリアル デザイン アプリの作成に役立つ次の機能があります。

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

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

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

ダーク マテリアル テーマ

ライト マテリアル テーマ


詳細については、マテリアル テーマを適用する方法をご覧ください。

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

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

高さのシャドウとカード

Android のビューには、X プロパティと Y プロパティに加えて、Z プロパティがあります。この新しいプロパティはビューの高さを表し、次のことを決定します。

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

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

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

アニメーション

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

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

  • タッチ フィードバック アニメーションで、ビューのタッチイベントに対応する。
  • 円形出現アニメーションで、ビューの表示と非表示を行う。
  • カスタム アクティビティ遷移アニメーションで、アクティビティを切り替える。
  • 曲線モーションで、より自然なアニメーションを作成する。
  • ビュー状態遷移アニメーションで、1 つまたは複数のビュー プロパティに対する変更をアニメーション化する。
  • ビューの状態遷移の間で状態リスト ドローアブルにアニメーションを表示する。

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

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

ドローアブル

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

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