Android 12 で更新された Widget についてセッションを見たメモ

Google I/O 2021 で発表された Android 12 の Widget についてセッションの動画 ( Refreshing widgets ) を見たメモです。

セッションの動画はこちら ↓

• Widget の基本的なこと
  • Android Cupcake (1.5) で初めて登場
  • アプリを起動しなくて情報を確認できるので便利
    • ユーザの 84% が 1 つは Widget を利用しており、63% が複数の Widget を利用している
• Android 12 で大きく変更
  • チェックボックス、スイッチ、ラジオボタンのサポート
  • RemoteView から取ってくるのはこれまでどおり
  • Material のアニメーションにも対応

<!-- res/layout/my_layout.xml -->
<Checkbox
    android:id="@+id/my_checkbox" 
    android:text="@string/my_label" />

/* com/google/example/MyWidget.kt */
remoteView.setCompoundButtonChecked(R.id.my_checkbox, true)
remoteView.setOnCheckedChangeResponse(
    R.id.my_checkbox,
    RemoteResponse.fromPendingIntent(
        onCheckedChangePendingIntent
    )
)

• Widget の再構成
  • android:widgetFeatures="reconfigurable" で Widget を再構成可能に
  • android:widgetFeatures="reconfigurable|configuration_optional" で初期構成の Activity をスキップできる
• Widget のプレビューを改善
  • android:previewLayout="@layout/" で画像ではなくプレビューを表示できる
    • これまでの Widget はプレビュー用の画像が必要だった
  • android:description="@string/ で説明文

• Widget はデバイスの検索や Google Assistant に表示される

  • Google Assistant との統合で Widget でタスクを完了できるように
  • Capabilities API で実現できる
  • AppWidgetHelper を使ってテキスト読み上げ機能を実装できる
  • 音声の読み上げと Assistant との組み合わせで音声で注文を完結させることもできる

• システムレベルのデザインを適用

  • 既存の Widget は自動的に Padding と角丸のマスクが適用される

• Rounded Corner の実装

<!-- res/drawable/my_widget_background.xml -->
<shape android:shape="rectangle">
   <corners android:radius="@android:dimen/system_app_widget_background_radius" />
</shape>

<!-- res/layout/my_widget_layout.xml -->
<LinearLayout
    ...
    android:background="@drawable/my_widget_background">
</LinearLayout>

• レスポンシブ
  • 折り畳みデバイスやタブレットを考慮してレスポンシブに表示できるようデザインと実装することが重要

val widgetSizes = appWidgetManager
    .getAppWidgetOptions(appWidgetId)
    .getAppWidgetSizes()

appWidgetManager.updateAppWidget(
    appWidgetId,
    RemoteViews(
        widgetSizes.associateWith { size ->
           createSizedLayout(size) // Create RemoteView
        }
    )
)

• Theme と Color
  • ユーザやメーカーが色と Theme をカスタマイズ
  • Pixel は壁紙から色を抽出
    • Material You 文脈

<LinearLayout
    android:theme="@style/Theme.DeviceDefault.DayNight">
    <CheckBox />
</LinearLayout>

• Widget とアプリの Transition をスムーズに
  • background に id をつけるだけ

<LinearLayout
    android:id="@android:id/background">
</LinearLayout>

• ガイドラインも Android 12 に沿ったものを作成している
• Compose と Widget
  • 2021年内に Compose で Widget を実装するライブラリが登場予定
  • 以下のような感じになる予定

@Composable
fun ListWidget(items: List<Item>) {
    Column {
        Text("Shopping list")
        items.forEach { CheckListItem(it) }
    }
}

@Composable
fun CheckListItem(item: Item) {
    Checkbox(
        item.name,
        isChecked = item.isChecked,
        onStateChanged = { isChecked -> updateItem(item, isChecked) }
    )
}