2021年10月に Android12 がリリースされました。
以前ギャップロでも書いた 新しいSplashScreen や、大幅なデザイン変更となった Material You、消費電力の大幅軽減、画面に映っている部分以外もスクリーンショット撮影できる スクロールスクリーンショット など、色々な機能追加・改善がありました。

公式ドキュメント:Android 12 の機能と変更点のリスト

今回はその中でも、ウィジェットの変更点や追加された部分を見ていきたいと思います。2012年からAppWidgetに関するアップデートは1つしかなく、久しぶりの大きなアップデートとなりました。
Google公式のサンプルプロジェクトが上がっているので、それを実際触りながら確認していきます。
user-interface-samples/AppWidget/

簡単に内容を知りたい方は、Youtubeに Google I/O 2021 で発表された動画がアップされているので、こちらをご覧ください。(日本語字幕ありです🙏)

開発環境

Android Studio Arctic Fox | 2020.3.1 Patch 4

角丸表示になる

Android12になって一番違いが分かる部分は角丸表示だと思います。
ウィジェットの角が自動で角丸に切り取られて表示されます。デザインによっては意図しない形で切り取られてしまうので注意が必要そうです。

また角の丸みを設定できるように system_app_widget_background_radiussystem_app_widget_inner_radius というパラメータも追加されています。
それぞれウィジェット自体の角丸、ウィジェット内部のViewの角丸を設定できます。

公式ドキュメント:角の丸みを実装する

Responsive Layout

Webサイトで、スマートフォン・タブレット・PCなどの異なる画面サイズに合わせて、表示を最適化する レスポンシブデザイン というものがありますが、これはそのウィジェット版です。
ウィジェットの大きさが変わった時、それに合わせて表示を最適化できるようになりました。

一般的なスマートフォンの他に、タブレットや折りたたみ式のスマートフォンなど大きな画面用にも対応することで、ユーザの利便性をさらに高められそうですね。

Google公式ドキュメント「Provide flexible widget layouts」より

実装は以下のようになります。

AppWidgetProviderクラスのonUpdate()で、ウィジェットの縦横サイズに対応するレイアウトファイルを定義・設定して、updateAppWidget()でウィジェットを更新します。

override fun onUpdate(
    context: Context,
    appWidgetManager: AppWidgetManager,
    appWidgetIds: IntArray
) {
    for (appWidgetId in appWidgetIds) {
        val viewMapping: Map<SizeF, RemoteViews> = mapOf(
            SizeF(180.0f, 110.0f) to RemoteViews(
                context.packageName,
                R.layout.widget_weather_forecast_small
            ),
            SizeF(270.0f, 110.0f) to RemoteViews(
                context.packageName,
                R.layout.widget_weather_forecast_medium
            ),
            SizeF(270.0f, 280.0f) to RemoteViews(
                context.packageName,
                R.layout.widget_weather_forecast_large
            )
        )
        appWidgetManager.updateAppWidget(appWidgetId, RemoteViews(viewMapping))
    }
}

上記のように設定した場合、ウィジェットのサイズによって以下のようにレイアウトファイルが設定されます。

widget_weather_forecast_small

  • width: 180.0f 〜 269.0f
  • height: 110.0f 〜 279.0f

widget_weather_forecast_medium

  • width: 270.0f 〜
  • height: 110.0f 〜 279.0f

widget_weather_forecast_large

  • width: 270.0f 〜
  • height: 280.0f 〜



例えばウィジェットのサイズが…

  • width:200dp, height:200dp なら widget_weather_forecast_small
  • width:270dp, height:200dp なら widget_weather_forecast_medium
  • width:270dp, height:280dp なら widget_weather_forecast_large

という風になります。

あまりないと思いますが、ウィジェット設定の appwidget-provider で以下の値も忘れずに設定しておきましょう。

  • initialLayout
  • minResizeWidth
  • minResizeHeight

ウィジェットの再構成

今まではウィジェットの構成を変える場合、ウィジェットを削除して再度追加する形で変えていました。Android12では、ウィジェット長押しで右下に編集アイコンを表示させることができるので、そこから変更できます。

左:再構成を有効にした場合 右:再構成を無効にした場合


実装は、 ウィジェット設定の appwidget-provider で、以下のように指定するだけです。

android:widgetFeatures="reconfigurable"

また configuration_optional を合わせて指定することで、Manifest の android.intent.action.MAIN で指定されている Activity をスキップできます。その場合 configure で起動したい Activity を指定します。

android:widgetFeatures="reconfigurable|configuration_optional"
android:configure="com.example.android.appwidget.ListWidgetConfigureActivity"

ウィジェット追加時のプレビュー表示

ウィジェット追加する時のプレビュー表示の設定が、より柔軟になりました。
今までは previewImage で指定されたリソース画像をプレビューとして表示していましたが、Android12では previewLayout が追加され、xmlのレイアウトファイルも指定できるようになりました。

ちなみにpreviewLayout が指定されてない場合は、Android3.0で導入された previewImage で指定された画像がプレビューとして表示されます。previewImage も指定されていない場合は、アプリアイコンが表示されます。

ウィジェットの説明文

description が追加され、プレビュー表示の下部にウィジェットの説明文を表示できるようになりました。strings.xml の値を指定する形で記述します。(直に文字列をしてするとエラーになりました)

android:description="@string/app_widget_weather_description"

CheckBox,RadioButton,Switchの追加

新たにチェックボックス、ラジオボタン、スイッチがサポートされました。

参考記事

公式ドキュメント

まとめ

いかがだったでしょうか?

角丸表示になってiOSに似た感じになりましたね。また Responsive Layout や、ウィジェット作成後の再構成が可能になったことで、ユーザにとってより使いやすくなっています。

ここで取り上げたウィジェット以外にも、Android12は色々と変更点もあるので、一度確認してみてはいかがでしょうか?

公式ドキュメント:Android 12 の機能と変更点のリスト



ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。 興味がある!一緒に働いてみたい!という方は下記よりご応募お待ちしております。
採用情報をみる