🤖

【Tauri】AndroidのAdaptive Iconに対応する

に公開
Android Studio
Tauri
tech

Windows 11
Tauri v2
の話です．

npm run tauri iconではうまくいかない

Tauriで作成したアプリのアイコンを変更する際は，npm run tauri iconで簡単に変更できます．しかし，AndroidのAdaptive Iconに完全には対応できないようで，テーマに応じた色の自動変更に対応できない，タスク管理画面で背景色が謎の紫になるなどの不具合が生じます．


左のEdge Galleryはテーマに応じたアイコンに変化しているのに対し，右のアイコンは変化していない．


タスク管理画面上でのアイコンの背景がなぜか紫．

Image Asset Studioを使う

実は公式ページには以下のような記述もあります．

If tauri icon cannot be used, we recommend checking out Android Studio’s Image Asset Studio instead.

Android Studioの機能を使ってアイコン生成する方法もあるようです．

具体的には，まずAndroid Studioで，[Project Name]/src-tauri/androidを開きます．開いてすぐにはAndroidプロジェクトとして認識してくれないため，しばらく待つ必要があります．File > Sync Project with Gradle Filesを実行するのも良いかもしれません（Geminiが言ってました）．

そして，Android StudioのファイルビューをAndroidモードにします（Androidプロジェクトとして認識していない場合はAndroidモードは表示されません）．resフォルダの上で右クリックし，New > Image Assetをクリックします．ここから先はAndroidのドキュメント通りに進めます．

注意点としては，TauriはアイコンのフォーマットとしてPNGを用いるので，Optionsの項目からフォーマットをWebP > PNGに変更する必要があります．

上記の対応をすることで，Adaptive Iconに対応することができます．

と思いきや，タスク管理画面での表示は修正されましたが，テーマに応じたアイコンの変化が実現できませんでした．

VectorDrawableを用いてAdaptive Icon対応

Adaptive Iconに対応するためには，monochromeを指定する必要があるようです．先ほどと同様にresフォルダを右クリックし，New > Vector Assetから，SVG及びPSDファイルを用いてVector Drawableファイルを生成します．


なぜかSVGだと塗りつぶされてしまったのでPSDファイルで作成しました．

res/drawableにxmlファイルが生成されるので，res/mipmap-anydpi-v26/ic_launcher.xmlで指定します．

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

さらに，src-tauri/gen/android/app/src/main/AndroidManifest.xmlにて，このic_launcher.xmlを使うように指定します．

AndroidManifest.xlm
<application
    ...
    android:icon="@mipmap/ic_launcher"
    ...>
</application>

ドキュメントにはandroid:roundIcon="@mipmap/ic_launcher_round"も記載されていますが，今回はic_launcher_roundを作成していないので不要です．

できました．以上．

Discussion