ウィジェットを強化する

このページでは、Android 12（API レベル 31）以降で使用できるオプションのウィジェット拡張機能について詳しく説明します。これらの機能は省略可能ですが、ユーザーのウィジェット エクスペリエンスを簡単に実装して改善できます。

ダイナミック カラーを使用する

Android 12 以降では、ウィジェットでボタン、背景、その他のコンポーネントにデバイスのテーマカラーを使用できます。これにより、異なるウィジェット間での遷移が滑らかになり、一貫性が保たれます。

ダイナミック カラーを実現するには、次の 2 つの方法があります。

テーマをルート レイアウトに設定すると、ルートまたはその子で共通のカラー属性を使用して、ダイナミック カラーを選択できます。

使用できる色属性の例を以下に示します。

  • ?attr/primary
  • ?attr/primaryContainer
  • ?attr/onPrimary
  • ?attr/onPrimaryContainer

マテリアル 3 テーマを使用する次の例では、デバイスのテーマカラーは「紫色」です。図 1 と図 2 に示すように、アクセント カラーとウィジェットの背景は、ライトモードとダークモードに適応します。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="?attr/colorPrimaryContainer"
  android:theme="@style/Theme.Material3.DynamicColors.DayNight">

  <ImageView
    ...
    app:tint="?attr/colorPrimaryContainer"
    android:src="@drawable/ic_partly_cloudy" />

    <!-- Other widget content. -->

</LinearLayout>
ライトモード テーマのウィジェット
図 1.ライトモードのウィジェット。
ダークモード テーマのウィジェット
図 2.ダークモードのウィジェット。

ダイナミック カラーの下位互換性

ダイナミック カラーは、Android 12 以降を搭載したデバイスでのみ使用できます。それより前のバージョンにカスタムテーマを提供するには、カスタムカラーでデフォルトのテーマを作成し、デフォルトのテーマ属性を使用して新しい修飾子（values-v31）を作成します。

マテリアル 3 テーマを使用した例を次に示します。

/values/styles.xml

<resources>
  <style name="MyWidgetTheme" parent="Theme.Material3.DynamicColors.DayNight">
    <!-- Override default colorBackground attribute with custom color. -->
    <item name="android:colorBackground">@color/my_background_color</item>

    <!-- Add other colors/attributes. -->

  </style>
</resources>

/values-v31/styles.xml

<resources>
  <!-- Do not override any color attribute. -->
  <style name="MyWidgetTheme" parent="Theme.Material3.DynamicColors.DayNight" />
</resources>

/layout/my_widget_layout.xml

<resources>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    android:background="?android:attr/colorBackground"
    android:theme="@style/MyWidgetTheme" />
</resources>

音声サポートを有効にする

App Actions を使用すると、Google アシスタントはユーザーの関連する音声コマンドに応じてウィジェットを表示できます。組み込みインテント（BII）に応答するようにウィジェットを構成すると、Android や Android Auto などのアシスタント サーフェスにウィジェットをプロアクティブに表示できます。ユーザーは、アシスタントによって表示されるウィジェットをランチャーに固定して、今後のエンゲージメントを促すことができます。

たとえば、GET_EXERCISE_OBSERVATION BII をトリガーするユーザーの音声コマンドを実行するように、エクササイズ アプリのワークアウト概要ウィジェットを構成できます。この BII をトリガーすると、Google アシスタントは「OK Google, ExampleApp で今週何マイル走った？」などのリクエストを行うと、Google アシスタントが自動的にウィジェットを表示します。

BII は多数用意されており、複数のカテゴリのユーザー操作に対応しており、ほぼすべての Android アプリで音声用のウィジェットを強化できます。使用を開始するには、App Actions を Android ウィジェットと統合するをご覧ください。

アプリのウィジェット選択ツールのエクスペリエンスを改善する

Android 12 では、動的ウィジェットのプレビューとウィジェットの説明を追加することで、アプリのウィジェット選択ツールのエクスペリエンスを改善できます。

ウィジェット選択ツールにスケーラブルなウィジェット プレビューを追加する

Android 12 以降では、ウィジェット選択ツールに表示されるウィジェットのプレビューがスケーラブルになります。これは、ウィジェットのデフォルト サイズに設定された XML レイアウトとして指定します。以前は、ウィジェット プレビューは静的なドローアブル リソースでした。場合によっては、ホーム画面に追加されたウィジェットがどのように表示されるのかが、プレビューに不正確に反映されることがあります。

スケーラブルなウィジェット プレビューを実装するには、代わりに appwidget-provider 要素の previewLayout 属性を使用して、XML レイアウトを指定します。

<appwidget-provider
    android:previewLayout="@layout/my_widget_preview">
</appwidget-provider>

実際のウィジェットと同じレイアウトを使用し、現実的なデフォルト値またはテスト値を使用することをおすすめします。ほとんどのアプリは同じ previewLayout と initialLayout を使用します。正確なプレビュー レイアウトを作成する方法については、このページの次のセクションをご覧ください。

ユーザーのデバイスが previewLayout をサポートしていない場合でもアプリで previewImage を使用するよう、previewLayout 属性と previewImage 属性の両方を指定することをおすすめします。previewLayout 属性は previewImage 属性よりも優先されます。

正確なプレビューを作成するためのおすすめの方法

スケーラブルなウィジェット プレビューを実装するには、appwidget-provider 要素の previewLayout 属性を使用して XML レイアウトを指定します。

<appwidget-provider
    ...
    android:previewLayout="@layout/my_widget_preview">
</appwidget-provider>
ウィジェットのプレビューを示す画像
図 3.デフォルトで 3x3 の領域に表示されるウィジェット プレビュー。XML レイアウトにより 3x1 の領域にも収まります。

正確なプレビューを表示するには、次の手順に沿って、実際のウィジェット レイアウトにデフォルト値を直接指定します。

  • TextView 要素の android:text="@string/my_widget_item_fake_1" の設定。

  • ImageView コンポーネントのデフォルトまたはプレースホルダの画像またはアイコン（android:src="@drawable/my_widget_icon" など）を設定する。

デフォルト値を設定しないと、プレビューに誤った値や空の値が表示されることがあります。このアプローチの重要なメリットは、ローカライズされたプレビュー コンテンツを提供できることです。

ListView、GridView、または StackView を含むより複雑なプレビューの推奨アプローチについては、動的アイテムを含む正確なプレビューを作成するをご覧ください。

スケーラブルなウィジェット プレビューの下位互換性

Android 11（API レベル 30）以前のウィジェット選択ツールにウィジェットのプレビューを表示するには、previewImage 属性を指定します。

ウィジェットの外観を変更した場合は、プレビュー画像を更新します。

ウィジェットの説明を追加する

Android 12 以降では、ウィジェットに表示するウィジェット選択ツールに説明を提供します。

ウィジェットとその説明が表示されているウィジェット選択ツールを示す画像
図 4. ウィジェットとその説明が表示されたウィジェット選択ツールの例

&lt;appwidget-provider&gt; 要素の description 属性を使用してウィジェットの説明を指定します。

<appwidget-provider
    android:description="@string/my_widget_description">
</appwidget-provider>

以前のバージョンの Android でも descriptionRes 属性を使用できますが、ウィジェット選択ツールでは無視されます。

スムーズな遷移を有効にする

Android 12 以降では、ランチャーにより、ユーザーがウィジェットからアプリを起動したときの遷移がより滑らかになります。

この改善された遷移を有効にするには、@android:id/background または android.R.id.background を使用して背景要素を指定します。

// Top-level layout of the widget.
<LinearLayout
    android:id="@android:id/background">
</LinearLayout>

以前のバージョンの Android でも @android:id/background はそのまま使えますが、無視されます。

RemoteViews のランタイム変更を使用する

Android 12 以降では、RemoteViews 属性のランタイム変更を可能にする複数の RemoteViews メソッドを利用できます。追加されたメソッドの完全なリストについては、RemoteViews API リファレンスをご覧ください。

次のコード例は、これらのメソッドの使用方法を示しています。

Kotlin

// Set the colors of a progress bar at runtime.
remoteView.setColorStateList(R.id.progress, "setProgressTintList", createProgressColorStateList())

// Specify exact sizes for margins.
remoteView.setViewLayoutMargin(R.id.text, RemoteViews.MARGIN_END, 8f, TypedValue.COMPLEX_UNIT_DP)

Java

// Set the colors of a progress bar at runtime.
remoteView.setColorStateList(R.id.progress, "setProgressTintList", createProgressColorStateList());

// Specify exact sizes for margins.
remoteView.setViewLayoutMargin(R.id.text, RemoteViews.MARGIN_END, 8f, TypedValue.COMPLEX_UNIT_DP);