このページでは、Android 12(API レベル 31)以降で利用可能なオプションのウィジェット機能強化について詳しく説明します。これらの機能は省略可能ですが、ユーザーのウィジェットのエクスペリエンスを簡単に実装して改善できます。
ダイナミック カラーを使用する
Android 12 以降、ウィジェットではボタン、背景、その他のコンポーネントにデバイスのテーマカラーを使用できます。これにより、ウィジェット間での遷移がスムーズになり、一貫性が向上します。
ダイナミック カラーを実現するには、次の 2 つの方法があります。
ルート レイアウトではシステムのデフォルトのテーマ(
@android:style/Theme.DeviceDefault.DayNight
)を使用します。Android 用マテリアル コンポーネント v1.6.0 以降で利用可能な Android 用マテリアル コンポーネント ライブラリのマテリアル 3 テーマ(
Theme.Material3.DynamicColors.DayNight
)を使用します。
ルート レイアウトにテーマを設定したら、ルートまたはその子のいずれかで共通の色属性を使用して、ダイナミック カラーを選択できます。
使用できる色属性の例を次に示します。
?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>
ダイナミック カラーの下位互換性
ダイナミック カラーは、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 をトリガーするユーザーの音声コマンドを実行するように、エクササイズ アプリのワークアウトの概要ウィジェットを構成できます。ユーザーが「OK Google, 今週は ExampleApp で何マイル走った?」などのリクエストを送信して BII をトリガーすると、アシスタントがウィジェットを積極的に表示します。
ユーザー操作のさまざまなカテゴリに対応する 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>
正確なプレビューを表示するには、次の手順に沿って、実際のウィジェット レイアウトにデフォルト値を直接指定します。
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 以降では、ウィジェットに表示するウィジェット選択ツールの説明を指定します。
<appwidget-provider>
要素の 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:id/background
は以前のバージョンの Android で互換性を保ちながら使用できますが、無視されます。
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);