ウィジェットを強化する

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

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

Android 12 以降、ウィジェットでデバイスのテーマカラーを使用できるようになります。 ボタン、背景、その他のコンポーネントの 1 つにすることをおすすめします。これにより ウィジェット間の遷移や一貫性を改善できます

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

テーマをルート レイアウトに設定すると、一般的な色属性を ダイナミック カラーを取得できます。

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

  • ?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>
<ph type="x-smartling-placeholder">
</ph> ライトモード テーマのウィジェット
図 1.ライトモードのウィジェット。
で確認できます。
<ph type="x-smartling-placeholder">
</ph> ダークモード テーマのウィジェット
図 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 をトリガーしたときに、自動的にウィジェットが表示されます。 「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>

実際のウィジェットと同じレイアウトを使用し、デフォルトが現実的なものにすることをおすすめします。 表しますほとんどのアプリは同じ previewLayoutinitialLayout を使用します。対象 正確なプレビュー レイアウトを作成する方法については、 できます。

previewLayout 属性と previewImage 属性の両方を指定することをおすすめします。 ユーザーのデバイスがpreviewImage previewLayout はサポートしていません。previewLayout 属性が優先されます previewImage 属性をオーバーライドします。

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

スケーラブルなウィジェット プレビューを実装するには、previewLayout 属性を XML レイアウトを提供する appwidget-provider 要素:

<appwidget-provider
    ...
    android:previewLayout="@layout/my_widget_preview">
</appwidget-provider>
<ph type="x-smartling-placeholder">
</ph> ウィジェットのプレビューを示す画像
図 3.ウィジェットのプレビューは、 3x3 の領域に表示されますが、XML レイアウトの関係で 3x1 の領域に収まる場合があります。

正確なプレビューを表示するには、実際のウィジェットを直接提供します。 デフォルト値を使用してレイアウトを設定します。

  • TextViewandroid:text="@string/my_widget_item_fake_1" を設定しています あります。

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

デフォルト値を設定しないと、プレビューに誤った値や空の値が表示されることがあります。「 この方法の大きなメリットは、ローカライズされたプレビューを 説明します。

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

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

Android 11(API レベル 30)以前のウィジェット選択ツールで、 ウィジェットの場合は、previewImage 属性です。

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

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

Android 12 以降、ウィジェットに説明を付ける 選択します

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

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

<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);