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 パターンを使用します。

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

高さのシャドウとカード

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

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

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

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

アニメーション

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

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

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

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

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

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

ドローアブル

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