アプリ ウィジェットの概要

Compose をお試しください
Jetpack Compose は、Android で推奨される UI ツールキットです。Compose スタイルの API を使用してウィジェットを構築する方法を学びます。

ウィジェットは、ホーム画面のカスタマイズに不可欠な要素です。ウィジェットは、アプリの最も重要なデータや機能をユーザーのホーム画面から直接確認できる「一目でわかる」ビューと考えることができます。ユーザーは、ホーム画面のパネル間でウィジェットを移動できます。また、サポートされている場合は、ウィジェットのサイズを変更して、ウィジェット内の情報量を好みに合わせて調整できます。

このドキュメントでは、作成できるさまざまなタイプのウィジェットと、従うべき設計原則について説明します。Remote View API と XML レイアウトを使用してアプリ ウィジェットを作成するには、基本的なウィジェットを作成するをご覧ください。Kotlin と Compose スタイルの API を使用してウィジェットを作成するには、Jetpack Glance をご覧ください。

ウィジェットのタイプ

ウィジェットを計画する際は、どのようなウィジェットを構築するかを検討します。ウィジェットは通常、次のいずれかのカテゴリに分類されます。

情報ウィジェット

東京の天気がほぼ曇り、14 度、午後 4 時から午後 7 時までの予想気温が表示されている天気ウィジェットの例
図 1. 天気アプリの情報ウィジェット。

情報ウィジェットは通常、重要な情報要素を表示し、その情報が時間の経過とともにどのように変化するかを追跡します。情報ウィジェットの例としては、天気ウィジェット、時計ウィジェット、スポーツのスコアを追跡するウィジェットなどがあります。情報ウィジェットをタップすると、通常は関連付けられたアプリが起動し、ウィジェット情報の詳細ビューが開きます。

コレクション ウィジェット

コレクション ウィジェットは、同じタイプの複数の要素を表示することに特化しています。たとえば、写真アプリの写真のコレクション、ニュースアプリの記事のコレクション、コミュニケーション アプリのメールやメッセージのコレクションなどです。コレクション ウィジェットは、垂直方向にスクロールできます。

コレクション ウィジェットは通常、次のユースケースに重点を置いています。

  • コレクションを閲覧しています。
  • コレクションの要素を、関連付けられたアプリの詳細ビューで開く。
  • 要素を操作する(完了としてマークするなど)。Android 12(API レベル 31)では複合ボタンがサポートされています。

コントロール ウィジェット

「Light list」というアプリのウィジェット。ベッドルーム、キッチン、リビングルームというラベルの切り替えスイッチが表示され、最初の 2 つの切り替えスイッチがオフになっている
図 4. コントロール ウィジェットの例。

コントロール ウィジェットの主な目的は、頻繁に使用する機能を表示して、ユーザーがアプリを開かなくてもホーム画面からそれらの機能をトリガーできるようにすることです。アプリのリモコンのようなものと考えることができます。コントロール ウィジェットの例としては、ユーザーが家の照明をオンまたはオフにできるホーム コントロール ウィジェットがあります。

コントロール ウィジェットを操作すると、関連する詳細ビューがアプリで開くことがあります。これは、コントロール ウィジェットの機能がデータを出力するかどうかによって異なります(検索ウィジェットの場合など)。

ハイブリッド ウィジェット

「低評価」、「戻る」、「再生/一時停止」、「進む」、「高評価」のボタンが表示された一般的な音楽アプリ。アーティストとトラックは、それぞれ「アーティスト」と「サンプル音楽」として表示されます。
図 5. 音楽アプリのウィジェットの例。

一部のウィジェットは、前述のセクションのタイプ(情報、コレクション、コントロール)のいずれかを表しますが、多くのウィジェットは、異なるタイプの要素を組み合わせたハイブリッドです。たとえば、音楽プレーヤー ウィジェットは主にコントロール ウィジェットですが、情報ウィジェットのように、現在再生中のトラックをユーザーに表示することもできます。

ウィジェットを計画する際は、基本タイプのいずれかを中心に設計し、必要に応じて他のタイプの要素を追加します。

ウィジェットを Google アシスタントと統合する

Google アシスタントは、ユーザーの音声コマンドに応じて、あらゆる種類のウィジェットを表示できます。ウィジェットを構成してアプリ アクションを処理することで、ユーザーは Android や Android Auto などのアシスタント サーフェスで、クイック アンサーやインタラクティブなアプリ エクスペリエンスを利用できるようになります。アシスタントのウィジェット フルフィルメントの詳細については、App Actions を Android ウィジェットと統合するをご覧ください。

ウィジェットの制限

ウィジェットは「ミニアプリ」と理解できますが、ウィジェットを設計する前に理解しておくべき重要な制限事項があります。

ジェスチャー

ウィジェットはホーム画面に配置されるため、ホーム画面に設定されているナビゲーションと共存する必要があります。このため、ウィジェットで利用できるジェスチャー サポートは、全画面表示アプリに比べて制限されます。アプリでは、ユーザーが画面間を水平方向に移動できるようにすることもできますが、そのジェスチャーは、ホーム画面間の移動を目的として、すでにホーム画面で使用されています。

ウィジェットで使用できるジェスチャーは、タップと縦方向のスワイプのみです。

要素

ウィジェットで使用できるジェスチャーには制限があるため、制限されたジェスチャーに依存する一部の UI ビルディング ブロックはウィジェットで使用できません。サポートされているビルディング ブロックの完全なリストと、レイアウト制限の詳細については、ウィジェット レイアウトを作成すると柔軟なウィジェット レイアウトを提供するをご覧ください。

設計ガイドライン

以下のデザイン ガイドラインに沿って、ホーム画面で魅力的、柔軟、一貫性のあるウィジェット エクスペリエンスを作成します。

ウィジェットのコンテンツ

ウィジェットは、アプリで利用できる新しい興味深いコンテンツを「宣伝」して、ユーザーをアプリに引き付ける優れた方法です。

新聞の 1 面にあるティーザーのように、ウィジェットはアプリの情報を集約して、アプリ内のより詳細な情報への接続を提供します。ウィジェットは情報の「スナック」であり、アプリは「食事」であると言えます。アプリに、ウィジェットに表示される情報よりも詳細な情報が表示されるようにします。

純粋な情報コンテンツに加えて、アプリのよく使用される領域へのナビゲーション リンクをウィジェットに提供することを検討してください。これにより、ユーザーはタスクをより迅速に完了できるようになり、アプリの機能範囲がホーム画面にまで広がります。

ウィジェットのナビゲーション リンクに適しているのは、次のようなものです。

  • 生成関数: ユーザーがアプリの新しいコンテンツ(新しいドキュメントや新しいメッセージなど)を作成できるようにする関数です。

  • アプリをトップレベルで開く: 通常、情報要素をタップすると、下位レベルの詳細画面に移動します。アプリの最上位レベルへのアクセスを提供すると、ナビゲーションの柔軟性が高まり、ユーザーがホーム画面からアプリに移動するために使用する専用のアプリ ショートカットを置き換えることができます。この機能にアプリのアイコンを使用すると、表示するデータが曖昧な場合でも、ウィジェットのアイデンティティを明確にすることができます。

ウィジェットのサイズ変更

標準の Google 時計ウィジェット
図 6. 標準の Google 時計ウィジェット。

サイズ変更可能なウィジェットを長押しして離すと、ウィジェットがサイズ変更モードになります。ユーザーは、ドラッグ ハンドルまたはウィジェットの角を使用して、好みのサイズを設定できます。

サイズ変更により、ユーザーはホーム画面の配置グリッドの制約内でウィジェットの高さと幅を調整できます。ウィジェットのサイズを自由に変更できるようにするか、水平方向または垂直方向のサイズ変更に制限するかを決定できます。ウィジェットが本質的に固定サイズである場合は、サイズ変更をサポートする必要はありません。

ユーザーがウィジェットのサイズを変更できるようにすると、次のような重要なメリットがあります。

  • 各ウィジェットに表示する情報の量を微調整できる。
  • ホームパネル上のウィジェットやショートカットのレイアウトをより適切に制御できます。

作成するウィジェットの種類に応じて、ウィジェットのサイズ変更戦略を計画します。リストベースまたはグリッドベースのコレクション ウィジェットは、通常は単純です。ウィジェットのサイズを変更すると、垂直スクロール領域が拡大または縮小されます。ウィジェットのサイズに関係なく、ユーザーはすべての情報要素をスクロールして表示できます。

情報ウィジェットはスクロールできないため、すべてのコンテンツが指定されたサイズに収まるように、より正確な計画を立てる必要があります。ユーザーがサイズ変更操作で定義したサイズに合わせて、ウィジェットのコンテンツとレイアウトを動的に調整する必要があります。

次の例では、ユーザーは天気ウィジェットのサイズを 3 段階で変更できます。ウィジェットが大きくなるにつれて、現在地の天気に関するより詳細な情報が表示されます。

最小の 3x2 グリッドサイズの天気ウィジェットの例。場所名(東京)、気温(14°)、部分的に曇りであることを示す記号が表示されています。
図 7. 3x2 グリッドの「小」サイズの天気ウィジェットの例。


5x2 の「中」サイズの天気ウィジェットの例。3x2 グリッドサイズの UI に加えて、「曇り」というラベルと午後 4 時から午後 7 時までの予想気温が表示されています。
図 8. 5x2 グリッドの「中」サイズの天気ウィジェットの例。


5x4 の「大」サイズの天気ウィジェットの例。3x2 グリッドサイズと 5x2 グリッドサイズのすべての UI に加え、火曜日から金曜日までの天気予報が表示されています。
図 9. 5x4 グリッドの「大」サイズの天気ウィジェットの例。

ウィジェットのサイズごとに、表示するアプリ情報の量を決定します。サイズが小さい場合は、重要な情報に集中し、ウィジェットが水平方向と垂直方向に拡大するにつれて、コンテキスト情報を追加します。

レイアウトに関する考慮事項

開発に使用するデバイスの配置グリッドのサイズに合わせてウィジェットをレイアウトしたくなるかもしれません。これは初期の近似値として役立ちますが、次の点に注意してください。

  • 可変グリッド ディメンションではなく、「サイズバケット」全体でウィジェットのサイズ変更戦略を計画すると、最も信頼性の高い結果が得られます。
  • セルの数、サイズ、間隔は、デバイスによって大きく異なる場合があります。そのため、ウィジェットは柔軟で、想定よりも広いスペースや狭いスペースに対応できることが非常に重要です。
  • ユーザーがウィジェットのサイズを変更すると、システムはウィジェットが自身を再描画できる dp サイズ範囲を返します。
  • Android 12 以降では、より詳細なサイズ属性とより柔軟なレイアウトを提供できます。これには、次が含まれます。

ユーザーによるウィジェットの構成

ウィジェットを使用する前に、ユーザーがウィジェットを設定する必要がある場合があります。たとえば、受信トレイを表示する前にユーザーがメールフォルダを選択する必要があるメール ウィジェットや、表示する画像をユーザーがギャラリーから割り当てる必要がある静止画ウィジェットなどです。Android ウィジェットでは、ユーザーがウィジェットをホーム画面にドロップした直後に、構成オプションが表示されます。

ウィジェット設計チェックリスト

  • ウィジェットにはひと目で把握できる少量の情報のみを表示する。アプリ内の情報を展開します。
  • 目的に合ったウィジェット タイプを選択する。
  • ウィジェットのコンテンツをさまざまなサイズに適応させる方法を計画します。
  • レイアウトを伸縮可能にすることで、ウィジェットのレイアウトを画面の向きやデバイスに依存しないようにします。
  • ウィジェットに追加の構成が必要かどうかを検討します。