このページでは、利用可能なオプションのウィジェット拡張機能について詳しく説明します。 Android 12(API レベル 31)以降。これらの機能はオプションですが、 ユーザーのエクスペリエンスを簡単に 実装して改善できます統合することもできます
ダイナミック カラーを使用する
Android 12 以降、ウィジェットでデバイスのテーマカラーを使用できるようになります。 ボタン、背景、その他のコンポーネントの 1 つにすることをおすすめします。これにより ウィジェット間の遷移や一貫性を改善できます
ダイナミック カラーを実現するには、次の 2 つの方法があります。
システムのデフォルトのテーマを使用する (
@android:style/Theme.DeviceDefault.DayNight
)をルート レイアウト内で呼び出します。次のマテリアル 3 テーマ(
Theme.Material3.DynamicColors.DayNight
)を使用します。 マテリアル コンポーネント Android ライブラリ。Android 用マテリアル コンポーネント バージョン 1.6.0 です。
テーマをルート レイアウトに設定すると、一般的な色属性を ダイナミック カラーを取得できます。
使用できる色属性の例を以下に示します。
?attr/primary
?attr/primaryContainer
?attr/onPrimary
?attr/onPrimaryContainer
マテリアル 3 テーマを使用した次の例では、デバイスのテーマカラーは次のようになります。 「紫色」アクセント カラーとウィジェットの背景がライトとダークに適応します 各モードで使用できます。
<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>
![ライトモード テーマのウィジェット](https://developer.android.com/static/images/appwidgets/example-lightmode.png?authuser=8&hl=ja)
![ダークモード テーマのウィジェット](https://developer.android.com/static/images/appwidgets/example-darkmode.png?authuser=8&hl=ja)
ダイナミック カラーの下位互換性
ダイナミック カラーは 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 をトリガーしたときに、自動的にウィジェットが表示されます。
「OK Google, 今週何マイル走った?」
ExampleApp」
BII には、さまざまなカテゴリのユーザー操作、 ほぼすべての Android アプリで音声用のウィジェットを拡張できます。まず App Actions を Android ウィジェットと統合するをご覧ください。
アプリのウィジェット選択ツールのエクスペリエンスを改善する
Android 12 では、 動的ウィジェットのプレビューやウィジェットの説明を追加することで アプリを改善できます
ウィジェット選択ツールにスケーラブルなウィジェット プレビューを追加する
Android 12 以降では、 ウィジェット選択ツールはスケーラブルですこれは、ウィジェットの 表示されます。これまで、ウィジェット プレビューは静的ドローアブル リソースでした。 更新時にウィジェットがどのように表示されるのかを、プレビューが不正確に ホーム画面に追加されます。
スケーラブルなウィジェット プレビューを実装するには、
previewLayout
appwidget-provider
要素の属性を使用して XML レイアウトを指定します。
<appwidget-provider
android:previewLayout="@layout/my_widget_preview">
</appwidget-provider>
実際のウィジェットと同じレイアウトを使用し、デフォルトが現実的なものにすることをおすすめします。
表しますほとんどのアプリは同じ previewLayout
と initialLayout
を使用します。対象
正確なプレビュー レイアウトを作成する方法については、
できます。
previewLayout
属性と previewImage
属性の両方を指定することをおすすめします。
ユーザーのデバイスがpreviewImage
previewLayout
はサポートしていません。previewLayout
属性が優先されます
previewImage
属性をオーバーライドします。
正確なプレビューを作成するためのおすすめの方法
スケーラブルなウィジェット プレビューを実装するには、previewLayout
属性を
XML レイアウトを提供する appwidget-provider
要素:
<appwidget-provider
...
android:previewLayout="@layout/my_widget_preview">
</appwidget-provider>
![ウィジェットのプレビューを示す画像](https://developer.android.com/static/images/appwidgets/todo-list-groceries.png?authuser=8&hl=ja)
正確なプレビューを表示するには、実際のウィジェットを直接提供します。 デフォルト値を使用してレイアウトを設定します。
TextView
のandroid:text="@string/my_widget_item_fake_1"
を設定しています あります。デフォルトまたはプレースホルダの画像またはアイコンを設定する
android:src="@drawable/my_widget_icon"
(ImageView
コンポーネントの場合)
デフォルト値を設定しないと、プレビューに誤った値や空の値が表示されることがあります。「 この方法の大きなメリットは、ローカライズされたプレビューを 説明します。
ListView
を含む複雑なプレビューに推奨されるアプローチについては、
GridView
または StackView
については、動的な要素を含む正確なプレビューを作成する
アイテムをご覧ください。
スケーラブルなウィジェット プレビューの下位互換性
Android 11(API レベル 30)以前のウィジェット選択ツールで、
ウィジェットの場合は、previewImage
属性です。
ウィジェットの外観を変更した場合は、プレビュー画像を更新します。
ウィジェットの説明を追加する
Android 12 以降、ウィジェットに説明を付ける 選択します
![ウィジェットとその説明が表示されているウィジェット選択ツールを示す画像](https://developer.android.com/static/images/appwidgets/description.png?authuser=8&hl=ja)
次の属性の description
属性を使用して、ウィジェットの説明を入力します。
<appwidget-provider>
要素:
<appwidget-provider
android:description="@string/my_widget_description">
</appwidget-provider>
こちらの
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);