Android のマテリアル デザイン

Compose を試す
Jetpack Compose は Android の推奨 UI ツールキットです。Compose でテーマ設定を操作する方法を学習します。

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

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

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

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

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

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

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

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

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

高さのシャドウとカード

Android のビューには、X プロパティと Y プロパティに加えて、Z プロパティがあります。このプロパティはビューの高度を表し、次の項目を判別します。

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

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

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

アニメーション

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

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

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

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

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

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

ドローアブル

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

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