Adaptive Iconは、Android 8.0以降から利用できるアイコンです。
現在、Monacaで提供しているCordova9.0では、Adaptive Iconに対応しています。
Monacaで提供しているCordova 9.0用のテンプレートを使用することで対応することができます。
Adaptive Iconの詳しい設定については、Customize Iconsを参照していください。
Android用アイコンの設定
MonacaでAndroid用アイコンを設定する場合は、Androidアプリ設定 画面にある アイコン 項目から設定します。
このアイコン項目の設定は、実際には、下記のように config.xml の icon タグに設定されています。
<platform name="android">
<icon src="/res/android/icon/ldpi.png" density="ldpi"/>
<icon src="/res/android/icon/mdpi.png" density="mdpi"/>
<icon src="/res/android/icon/hdpi.png" density="hdpi"/>
<icon src="/res/android/icon/xhdpi.png" density="xhdpi"/>
<icon src="/res/android/icon/xxhdpi.png" density="xxhdpi"/>
<icon src="/res/android/icon/xxxhdpi.png" density="xxxhdpi"/>
</platform>
Adaptive Iconの設定
Adaptive Iconの設定は、通常のアイコン設定と同じconfig.xmlの icon タグを使用します。
iconタグに background 属性と foreground 属性を設定することで、Adaptive Iconに対応することができます。
<platform name="android">
<icon src="/res/android/icon/ldpi.png" density="ldpi" background="/res/android/icon/ldpi-background.png" foreground="/res/android/icon/ldpi-foreground.png"/>
<icon src="/res/android/icon/mdpi.png" density="mdpi" background="/res/android/icon/mdpi-background.png" foreground="/res/android/icon/mdpi-foreground.png"/>
<icon src="/res/android/icon/hdpi.png" density="hdpi" background="/res/android/icon/hdpi-background.png" foreground="/res/android/icon/hdpi-foreground.png"/>
<icon src="/res/android/icon/xhdpi.png" density="xhdpi" background="/res/android/icon/xhdpi-background.png" foreground="/res/android/icon/xhdpi-foreground.png"/>
<icon src="/res/android/icon/xxhdpi.png" density="xxhdpi" background="/res/android/icon/xxhdpi-background.png" foreground="/res/android/icon/xxhdpi-foreground.png"/>
<icon src="/res/android/icon/xxxhdpi.png" density="xxxhdpi" background="/res/android/icon/xxxhdpi-background.png" foreground="/res/android/icon/xxxhdpi-foreground.png"/>
</platform>
現在のAndroidアプリ設定画面にあるアイコン項目では、Adaptive Icon用のアイコンを設定することができないため、background属性とforeground属性に設定する画像ファイルは、手動でMonacaプロジェクトにアップロードする必要があります。
このbackground属性とforeground属性に設定する画像ファイルは、Monacaプロジェクトの res フォルダー配下に配置します。
ここで紹介しているサンプルコードは、/res/android/icon/ 配下に画像を配置している例になります。
src属性
Adaptive Iconを設定する場合は、基本的に通常設定されている src 属性を設定する必要はありません。
Adaptive Iconに対応しているAndroid OSバージョンでは、このsrc属性は無視されます。
Adaptive Iconに対応していないAndroid OSバージョンの場合は、foreground属性に設定された画像がアイコンとして表示されます。src属性が設定されている場合は、src属性に設定されている画像が優先されます。
<platform name="android">
<icon density="ldpi" background="/res/android/icon/ldpi-background.png" foreground="/res/android/icon/ldpi-foreground.png"/>
<icon density="mdpi" background="/res/android/icon/mdpi-background.png" foreground="/res/android/icon/mdpi-foreground.png"/>
<icon density="hdpi" background="/res/android/icon/hdpi-background.png" foreground="/res/android/icon/hdpi-foreground.png"/>
<icon density="xhdpi" background="/res/android/icon/xhdpi-background.png" foreground="/res/android/icon/xhdpi-foreground.png"/>
<icon density="xxhdpi" background="/res/android/icon/xxhdpi-background.png" foreground="/res/android/icon/xxhdpi-foreground.png"/>
<icon density="xxxhdpi" background="/res/android/icon/xxxhdpi-background.png" foreground="/res/android/icon/xxxhdpi-foreground.png"/>
</platform>
xmlファイル
Adaptive Iconでは、pngファイルの他に、xmlファイルの指定ができます。
注意点として、xmlファイルは、古いAndroid OSでは対応していないため、src属性も合わせて設定する必要があります。
<platform name="android">
<icon src="/res/android/icon/ldpi.png" density="ldpi" background="/res/android/icon/background.xml" foreground="/res/android/icon/foreground.xml"/>
<icon src="/res/android/icon/mdpi.png" density="mdpi" background="/res/android/icon/background.xml" foreground="/res/android/icon/foreground.xml"/>
<icon src="/res/android/icon/hdpi.png" density="hdpi" background="/res/android/icon/background.xml" foreground="/res/android/icon/foreground.xml"/>
<icon src="/res/android/icon/xhdpi.png" density="xhdpi" background="/res/android/icon/background.xml" foreground="/res/android/icon/foreground.xml"/>
<icon src="/res/android/icon/xxhdpi.png" density="xxhdpi" background="/res/android/icon/background.xml" foreground="/res/android/icon/foreground.xml"/>
<icon src="/res/android/icon/xxxhdpi.png" density="xxxhdpi" background="/res/android/icon/background.xml" foreground="/res/android/icon/foreground.xml"/>
</platform>
おわりに
Cordova9.0のMonacaプロジェクトを使用することで、簡単にAdaptive Iconを設定することができます。
一度、試してみてはいかがでしょうか。