アプリ ウィジェットのデザイン ガイドライン

アプリ ウィジェット(単に「ウィジェット」)は Android 1.5 で導入された機能であり、Android 3.0 と 3.1 で大幅に改善されました。ウィジェットを使用すると、アプリの最もタイムリーな情報や、関連する情報を一目で、ユーザーのホーム画面に表示できます。標準の Android システム イメージには、アナログ時計、音楽、その他のアプリのウィジェットなど、いくつかのウィジェットが含まれています。

Android 4.0 のアプリ ウィジェットの例

図 1. Android 4.0 のアプリ ウィジェットの例

このドキュメントでは、他のウィジェットや、Android ホーム画面の他の要素(ランチャー アイコンやショートカットなど)とグラフィックに合わせてウィジェットを設計する方法について説明します。また、ウィジェットのアートワークの標準と、ウィジェットのグラフィックに関するヒントとコツについても説明します。

ウィジェットの開発については、デベロッパー ガイドアプリ ウィジェットのセクションをご覧ください。

標準的なウィジェットの構造

一般的な Android アプリ ウィジェットは、境界ボックス、フレーム、ウィジェットのグラフィック コントロールとその他の要素の 3 つの主要コンポーネントで構成されます。アプリ ウィジェットには、Android の View ウィジェットのサブセットを含めることができます。サポートされているコントロールには、テキストラベル、ボタン、画像などがあります。使用可能なビューの一覧については、デベロッパー ガイドの「アプリ ウィジェット レイアウトを作成する」をご覧ください。適切に設計されたウィジェットでは、境界ボックスの端とフレームとの間にマージンが残され、フレームの内端とウィジェットのコントロールとの間にパディングが残されます。

ウィジェットには通常、境界ボックス、フレーム、コントロールの間にマージンとパディングがあります。

図 2. 通常、ウィジェットでは、境界ボックスとフレームの間にマージンがあり、フレームとウィジェット コントロールの間にパディングがあります。

注: Android 4.0 以降、アプリ ウィジェットでは、ウィジェット フレームとアプリ ウィジェットの境界ボックスの間に自動的に余白が与えられるため、ユーザーのホーム画面上の他のウィジェットやアイコンとの整合が向上します。この強く推奨される動作を利用するには、アプリの targetSdkVersion を 14 以上に設定します。

ホーム画面の他のウィジェットと視覚的に収めるように設計されたウィジェットは、ホーム画面の他の要素から調整のためのキューを取得します。また、標準のシェーディング エフェクトも使用します。このページでは、これらの詳細について説明します。

ウィジェットのサイズの決定

各ウィジェットでは minWidthminHeight を定義する必要があります。これらは、デフォルトで消費する最小スペースを示します。ユーザーがホーム画面にウィジェットを追加すると、通常は、指定した最小の幅と高さよりも大きなスペースを占有します。Android のホーム画面には、利用可能なスペースのグリッドが表示され、ユーザーはそこにウィジェットやアイコンを配置できます。このグリッドはデバイスによって異なります。たとえば、多くのスマートフォンは 4x4 のグリッドを提供し、タブレットはそれより大きい 8x7 のグリッドを提供します。ウィジェットを追加すると、minWidthminHeight の制約を満たすために必要な最小数のセル(水平方向と垂直方向)を占めるようにウィジェットが引き伸ばされます。後述のウィジェット レイアウトとバックグラウンド グラフィックの設計で説明しているように、アプリ ウィジェットに 9-patch の背景と柔軟なレイアウトを使用すると、ウィジェットをデバイスのホーム画面のグリッドにスムーズに適応させ、使いやすさと美しさを維持できます。

セルの幅と高さ、およびウィジェットに適用される自動マージンの量はデバイスによって異なる場合がありますが、以下の表を使用すると、占有するグリッドセルの数から、ウィジェットの最小寸法をおおまかに見積もることができます。

セルの数
(列または行数)
使用可能なサイズ(dp)
minWidth または minHeight
1 40 dp
2 110 dp
3 180 dp
4 250 dp
n 70 × n − 30

ウィジェットを適切なデフォルト状態でレンダリングする最小サイズを指定する minWidthminHeight は、控えめに指定することをおすすめします。minWidthminHeight を提供する方法の一例として、現在再生中の曲のアーティストとタイトル(垂直方向にスタック)、再生ボタン、[Next] ボタンを表示する音楽プレーヤー ウィジェットがあるとします。

音楽プレーヤーのウィジェットの例

図 3. 音楽プレーヤーのウィジェットの例

最小の高さは、アーティストとタイトルの 2 つの TextView の高さと、テキスト マージンにする必要があります。最小幅は、[Play] ボタンと [Next] ボタンの使用可能な最小幅、テキストの最小幅(たとえば 10 文字の幅)、テキスト水平方向のマージンを合計した値になります。

最小幅と最小高さの計算に使用するサイズとマージンの例

図 4. minWidth/minHeight 計算のサイズとマージンの例テキストラベルの適切な最小幅の例として 144 dp を選択しました。

以下に計算例を示します。

  • minWidth = 144dp + (2 × 8dp) + (2 × 56dp) = 272dp
  • minHeight = 48 dp + (2 × 4 dp) = 56 dp

ウィジェットの背景 9-patch に独自のコンテンツ パディングがある場合は、それに応じて minWidthminHeight に追加する必要があります。

サイズ変更可能なウィジェット

Android 3.1 以降では、ウィジェットの水平方向または垂直方向、あるいはその両方のサイズを変更できるようになりました。つまり、minWidthminHeight が実質的にウィジェットのデフォルト サイズになります。ウィジェットの最小サイズを指定するには、minResizeWidthminResizeHeight を使用します。これらの値では、それ以下でウィジェットが判読不能または使用不能になるサイズを指定する必要があります。

これは通常、コレクション ウィジェット(ListView または GridView をベースにしたウィジェットなど)向けの推奨機能です。

アプリ ウィジェットへのマージンの追加

前述のように、Android 4.0 では、targetSdkVersion を 14 以上で指定するアプリの場合、ホーム画面のウィジェットの各端に小さな標準マージンが自動的に追加されます。これによりホーム画面の視覚的なバランスがとれるため、Android 4.0 ではアプリ ウィジェットの背景の形状の外に余白を追加しないことをおすすめします

以前のバージョンのプラットフォームではカスタム マージンを適用し、Android 4.0 以降では追加のマージンがない単一のレイアウトを簡単に作成できます。レイアウト XML を使用してマージンを実現する方法については、デベロッパー ガイドアプリ ウィジェットにマージンを追加するをご覧ください。

ウィジェットのレイアウトと背景画像のデザイン

ほとんどのウィジェットの形状は、長方形または角丸長方形です(背景は無地)。画面密度ごとに 1 つずつ、合計 9 つのパッチを使用してこの形状を定義することをおすすめします(詳細については、複数画面のサポートをご覧ください)。 9-patch は、draw9patch ツールまたは Adobe® Photoshop などのグラフィック編集プログラムを使用して作成できます。これにより、利用可能なスペース全体をウィジェットの背景の形状で埋めることができます。9-patch は、端から端までに配置し、追加のマージンを提供する透明ピクセルを避ける必要があります。ただし、繊細なドロップ シャドウやその他の微妙な効果用の境界ピクセルをいくつか使用する場合は除きます。

注: アクティビティのコントロールの場合と同様に、状態リスト ドローアブルを使用して、インタラクティブなコントロールでもフォーカス状態と押下状態を明確に区別する必要があります。

9-patch の境界ピクセル

図 5. 伸縮可能な領域とコンテンツのパディングを示す 9-patch の枠線ピクセル。

一部のアプリ ウィジェット(StackView を使用しているウィジェットなど)は背景が透明です。この場合、StackView の個々のアイテムでは、9-patch の背景を使用する必要があります。この背景は端から端までであり、マージン用の境界線の透明ピクセルがほとんどないか、まったくありません。

ウィジェットのコンテンツには、RelativeLayoutLinearLayoutFrameLayout などの柔軟なレイアウトを使用する必要があります。アクティビティのレイアウトがさまざまな物理画面サイズに適応する必要があるのと同様に、ウィジェットのレイアウトはホーム画面のさまざまなグリッドセルサイズに適応する必要があります。

以下に、テキスト情報と 2 つのボタンを表示する音楽ウィジェットのレイアウトの例を示します。このレイアウトは、OS バージョンに応じてマージンを追加するという以前の説明に従った作りになっています。ウィジェットにマージンを追加する最も堅牢で復元力のある方法は、パディングされた FrameLayout でウィジェットのフレームとコンテンツをラップすることです。

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="@dimen/widget_margin">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="@drawable/my_widget_background">

    <TextView
      android:id="@+id/song_info"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1" />

    <Button
      android:id="@+id/play_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />

    <Button
      android:id="@+id/skip_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />
  </LinearLayout>
</FrameLayout>

前のセクションのサンプル音楽ウィジェットを見ると、次のような柔軟なレイアウト属性の使用を開始できます。

サンプルの音楽ウィジェットの柔軟なレイアウトと属性(抜粋)

図 6. 柔軟なレイアウトと属性(抜粋)

ユーザーがホーム画面にウィジェットを追加すると、各グリッドセルのサイズが 80 dp × 100 dp で、すべてのサイズに 8 dp のマージンが自動的に適用される Android 4.0 デバイスの例では、ウィジェットが次のように引き伸ばされます。

システムによって 8 dp の自動マージンが追加された 80 dp x 100 dp のサンプル グリッド上に表示された音楽ウィジェット

図 7. システムによって 8 dp の自動マージンが追加された 80 dp x 100 dp のサンプル グリッド上に配置された音楽ウィジェット。

アプリ ウィジェット テンプレート パックの使用

新しいウィジェットの設計を開始したり、既存のウィジェットを更新したりする場合は、まず以下のウィジェット デザイン テンプレートを確認することをおすすめします。以下のダウンロード可能なパッケージには、複数の画面密度、OS バージョンのウィジェット スタイル、ウィジェットの色に対応する 9-patch 背景グラフィック、XML、ソース Adobe® Photoshop ファイルが含まれています。テンプレート パッケージには、ウィジェット全体またはウィジェットの一部(ボタンなど)をインタラクティブにする場合に役立つグラフィックも含まれています。

ウィジェット テンプレートの抜粋

図 8. アプリ ウィジェット テンプレート パックからの抜粋(中密度、ダーク、Android 4.0/以前のスタイル、デフォルト/フォーカス/押下状態)。

アプリ ウィジェット テンプレート パックの最新のアーカイブは次のリンクから入手できます。

Android 4.0 向けアプリ ウィジェット テンプレート パックをダウンロード »