アプリ ウィジェット（単に「ウィジェット」と呼ばれることもあります）は Android 1.5 で導入された機能で、Android 3.0 と 3.1 で大規模な改良が行われました。ウィジェットではアプリのタイムリーな情報やその他の関連情報を表示でき、ユーザーはホーム画面上でそれらの情報を一目で確認できます。標準の Android システム イメージには、アナログ時計や音楽アプリのウィジェットなど、いくつかのウィジェットが含まれています。
図 1: Android 4.0 のアプリ ウィジェットの例
このドキュメントでは、他のウィジェットや、Android のホーム画面の他の要素（ランチャー アイコンやショートカットなど）と視覚的にマッチするようにウィジェットをデザインする方法について説明します。また、ウィジェットのアートワークに関する標準をいくつか説明し、ウィジェットのグラフィックに関するヒントとコツを紹介します。
ウィジェットの開発については、デベロッパー ガイドのアプリ ウィジェットをご覧ください。
標準的なウィジェットの構造
標準的な Android アプリ ウィジェットは、3 つの主要コンポーネント（境界ボックス、フレーム、ウィジェットのグラフィック コントロール）とその他の各種要素で構成されています。アプリ ウィジェットには Android の View ウィジェットのサブセットを含めることができます。また、サポート対象のコントロールには、テキストラベル、ボタン、画像などがあります。使用可能な View の詳細なリストについては、デベロッパー ガイドのアプリ ウィジェットのレイアウトの作成をご覧ください。優れたデザインのウィジェットでは、境界ボックスとフレームの各辺の間のマージンと、フレームとウィジェットのコントロールの各辺の間のパディングが残されています。
図 2: ウィジェットには通常、境界ボックスとフレームの間にマージンがあり、フレームとウィジェットのコントロールの間にパディングがあります。
注: Android 4.0 以降のアプリ ウィジェットでは、フレームと境界ボックスの間に自動的にマージンが追加され、ユーザーのホーム画面上の他のウィジェットやアイコンとの位置調整がより適切に行われるようになっています。この機能を活用できるよう、アプリの targetSdkVersion を 14 以上に設定してください。
ホーム画面上の他のウィジェットと視覚的にマッチするようにデザインされたウィジェットでは、ホーム画面上の他の要素から位置調整用のキューを受け取るほか、標準の陰影効果も利用します。これらすべてについて、このドキュメントで詳しく説明します。
ウィジェットのサイズの決定
各ウィジェットでは、デフォルトで使用する最小スペースを示す minWidth と minHeight を定義する必要があります。ユーザーがウィジェットをホーム画面に追加すると、通常は指定した最小の幅と高さより大きいスペースが占有されます。Android のホーム画面には、ウィジェットやアイコンを配置可能なスペースのグリッドがユーザーに表示されます。このグリッドはデバイスによって異なります。たとえば、多くのスマートフォンに表示されるグリッドは 4×4、タブレットに表示されるグリッドはそれより大きい 8×7 です。ウィジェットが追加されると、minWidth と minHeight の制約を満たすために必要な最小限の数のセルを占有するように、グリッドが縦方向と横方向に引き伸ばされます。以下のウィジェットのレイアウトと背景画像のデザインで説明するように、アプリ ウィジェットに 9-patch の背景と柔軟なレイアウトを使用することで、ウィジェットをデバイスのホーム画面グリッドにスムーズに適合させつつ、使いやすさと見た目の美しさを維持することもできます。
セルの幅と高さ（およびウィジェットに適用される自動マージンの量）はデバイスによって異なりますが、占有されるグリッドセルの数を仮定することで、次の表からウィジェットのおおよその最小サイズを見積もることができます。
| セルの数 （列または行数） |
使用可能なサイズ（dp） （ minWidth または minHeight） |
|---|---|
| 1 | 40 dp |
| 2 | 110 dp |
| 3 | 180 dp |
| 4 | 250 dp |
| … | … |
| n | 70 × n − 30 |
minWidth と minHeight を使用（ウィジェットを適切なデフォルト状態でレンダリングする最小サイズを指定）して、控えめなサイズに設定することをおすすめします。minWidth と minHeight を指定する方法の例を見ていきましょう。たとえば、現在再生されている曲のアーティストとタイトル（垂直方向にスタック）、再生ボタン、次へボタンを表示する音楽プレーヤーのウィジェットがあるとします。
図 3: 音楽プレーヤーのウィジェットの例
最小高さには、アーティストとタイトルの 2 つの TextView の高さとテキスト マージンを合わせた値を指定する必要があります。最小幅には、再生ボタンと次へボタンの各最小幅、テキストの最小幅（たとえば 10 文字分の幅）、および横方向のテキスト マージンを合わせた値を指定する必要があります。
図 4: minWidth と minHeight の計算に使用するサイズとマージンの例（テキストラベルの最小幅には 144 dp を選択）
以下に計算例を示します。
minWidth= 144 dp + (2 × 8 dp) + (2 × 56 dp) = 272 dpminHeight= 48 dp + (2 × 4 dp) = 56 dp
ウィジェットの背景の 9-patch に固有のコンテンツ パディングがある場合、その分を minWidth と minHeight に追加する必要があります。
サイズ変更可能なウィジェット
Android 3.1 以降では、ウィジェットの横方向または縦方向（あるいはその両方）のサイズを変更できます。つまり、minWidth と minHeight が実質的に、ウィジェットのデフォルトのサイズになります。ウィジェットの最小サイズは minResizeWidth と minResizeHeight を使用して指定できます。これらの値では、それ未満になるとウィジェットを判読または使用できなくなるサイズを指定します。
これは通常、コレクション ウィジェット（ListView または GridView をベースにしたウィジェットなど）向けの推奨機能です。
アプリ ウィジェットへのマージンの追加
すでに説明したとおり、Android 4.0 では、14 以上の targetSdkVersion が指定されているアプリを対象として、ホーム画面上のウィジェットの各辺に標準の小さなマージンが自動的に追加されます。この機能はホーム画面の視覚的なバランスを保つのに役立つため、Android 4.0 では、アプリ ウィジェットの輪郭の外側に余分なマージンを追加しないことをおすすめします。
以前のバージョンのプラットフォームに適用されたカスタムのマージンがあり、Android 4.0 以降向けの余分なマージンがないレイアウトを 1 つだけ作成することは簡単です。レイアウト XML を使用してマージンを追加する方法については、デベロッパー ガイドのアプリ ウィジェットへのマージンの追加をご覧ください。
ウィジェットのレイアウトと背景画像のデザイン
ほとんどのウィジェットの形状は、長方形または角丸長方形です（背景は無地）。この形状の定義には、画面密度ごとに 1 つの 9-patch を使用することをおすすめします（詳しくは、複数画面のサポートをご覧ください）。9-patch は、draw9patch ツールや、Adobe® Photoshop などの画像編集プログラムを使用して作成できます。これにより、ウィジェットの背景の形状で使用可能なスペース全体を占有できます。9-patch はエッジ ツー エッジにする必要があります。繊細なドロップ シャドウやその他の繊細な効果に使用するいくつかの境界ピクセルを除き、余分なマージンを提供する透明なピクセルは不要です。
注: アクティビティのコントロールと同様に、状態リスト ドローアブルを使用して、インタラクティブなコントロールのフォーカス状態と押下状態を視覚的に区別する必要があります。
図 5: 伸縮可能領域とコンテンツ パディングを示す 9-patch の境界ピクセル
透明な背景のアプリ ウィジェット（StackView を使用するウィジェットなど）もあります。その場合、StackView の個々のアイテムで 9-patch の背景を使用する必要があります。これは、マージン用の透明な境界ピクセルがほとんどまたはまったくないエッジ ツー エッジの背景です。
ウィジェットのコンテンツには、RelativeLayout、LinearLayout、FrameLayout などの柔軟なレイアウトを使用する必要があります。アクティビティ レイアウトがさまざまな物理画面サイズに適応する必要があるのと同様に、ウィジェット レイアウトはホーム画面のさまざまなグリッドセル サイズに適応する必要があります。
以下に、テキスト情報と 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: 柔軟なレイアウトと属性（抜粋）
ユーザーがホーム画面にウィジェットを追加すると、サンプルの Android 4.0 デバイス（各グリッドセルのサイズが 80 dp × 100 dp で、すべてのサイズで 8 dp のマージンが自動的に適用される）では次のようにウィジェットが引き伸ばされます。
図 7: 8 dp の自動マージンがシステムによって追加され、80 dp x 100 dp のサンプル グリッド上に表示された音楽ウィジェット
アプリ ウィジェット テンプレート パックの使用
新しいウィジェットを設計する場合や、既存のウィジェットを更新する場合には、初めに以下のウィジェット デザイン テンプレートを確認することをおすすめします。以下のダウンロード可能なパッケージには、さまざまな画面密度、OS バージョン、ウィジェットのスタイルや色に対応した、9-patch の背景画像、XML、Adobe® Photoshop のソースファイルが含まれています。テンプレート パッケージには、ウィジェット全体またはウィジェットの一部（ボタンなど）をインタラクティブにするのに役立つ画像も含まれています。
図 8: アプリ ウィジェット テンプレート パックからの抜粋（中密度、ダーク、Android 4.0 / 以前のスタイル、デフォルト / フォーカス状態 / 押下状態）
アプリ ウィジェット テンプレート パックの最新のアーカイブは次のリンクから入手できます。