okaryo.log

Android13以降のFlutterアプリでテーマ別アプリアイコンに対応する | okaryo.log

Android13以降のFlutterアプリでテーマ別アプリアイコンに対応する

    #Flutter#Android

テーマ別アプリアイコンとは

Android13以降の機能で、ユーザーが選択した壁紙やライトモード・ダークモードといったテーマに応じてアプリのアイコンの色合いも変わる機能だ。

公式ドキュメントはこちら。

Flutter製の個人開発アプリsubskunでもテーマ別アプリアイコンに対応してみた。

従来のアイコンがこれ。

normal icons

そして、テーマ別アプリアイコンに対応したものがこれ。それぞれライトモードとダークモードの場合になっている。

light icons

dark icons

壁紙を緑や赤の色味のものに設定した場合はこんな風になる。

green icons

red icons

今回はFlutterアプリでのテーマ別アプリアイコンの設定方法をまとめておく。

前提

flutter_launcher_iconsというパッケージでAndroidのアダプティブアイコンに対応していることを前提とする。

また、アダプティブアイコンのフォアグラウンド画像はモノクロであるとする(そうでない場合の対応は後述)。

ちなみに、flutter_launcher_iconsはまだテーマ別アプリアイコンに対応してはいないものの、それに当たるイシューは既に作成されており、ロードマップにもそのイシューが含まれている。対応されるのが楽しみだ。

設定方法

画像さえ準備できればあとは簡単で、android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml内で以下のように<monochrome>要素を追加するだけだ。

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
    // ↓これ
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

公式ドキュメントはこちら。

ちなみに通常のアプリアイコンのフォアグラウンド画像がモノクロでない場合は、それとは別にモノクロの画像を用意して各サイズのdrawableディレクリに配置し、上記のmipmap-anydpi-v26/ic_launcher.xml内で<monochrome>要素での参照先をモノクロ画像用のもの(例えば@drawable/ic_launcher_monochrome)に差し替えることで対応することができるだろう。

これでアプリをビルドしてみると、上で紹介したようなテーマ別アプリアイコン対応ができた。

注意点(自戒)

これは自分がしょうもなかっただけだが、エミュレータで動作確認をする際はそのエミュレータのデバイスにAndroid13が入っているかどうかを確認しよう。

Android12が入っているエミュレータで散々悩み、GitHubにあるいろんなサンプルアプリを漁ったりして無為な時間を過ごしてしまった…

おわり

まだテーマ別アプリアイコンに対応しているアプリは多くない印象だが、対応しているアプリはそれだけで「お!」となる気がする(開発者目線だけだと思うが)。

また、ゆくゆくはGoogleの強権発動によってテーマ別アプリアイコン対応がStoreへの公開に必須にならないこともないこともないだろう。

暇なときにでも対応を検討してみるのも良さそうだ。


関連記事
最新記事
プロモーション

This site uses Google Analytics.