Adaptive Icon対応について

Adaptive Iconは、Android 8.0以降から利用できるアイコンです。

現在、Monacaで提供しているCordova9.0では、Adaptive Iconに対応しています。
Monacaで提供しているCordova 9.0用のテンプレートを使用することで対応することができます。

Adaptive Iconの詳しい設定については、[Customize Icons](https://cordova.apache.org/docs/en/9.x/config_ref/images.html)を参照していください。


# Android用アイコンの設定

MonacaでAndroid用アイコンを設定する場合は、`Androidアプリ設定` 画面にある `アイコン` 項目から設定します。
このアイコン項目の設定は、実際には、下記のように `config.xml` の `icon` タグに設定されています。

```xml:config.xml
<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に対応することができます。

```xml:config.xml
<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属性に設定されている画像が優先されます。

```xml:config.xml
<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属性も合わせて設定する必要があります。

```xml:config.xml
<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を設定することができます。
一度、試してみてはいかがでしょうか。