はじめに

Cordova で Android の Adaptive Icon を設定する方法。

TL;DR

  • Android Studio で Adaptive Icon の画像を作成
  • colors.xml を作成
  • config.xml の <platform name="android"> 内にアイコン設定を追記
1
2
3
4
5
<icon
  density="..."
  background="@color/ic_launcher_background"
  foreground="res/icon/android/mipmap-.../ic_launcher_foreground.png"
/>
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
    1. Android Studio
  4. 詳細
    1. アイコン画像の準備
    2. Adaptive Icon の作成
      1. 出力画像をコピー
    3. Adaptive Icon の設定
      1. colors.xml 作成
      2. config.xml 変更
    4. ビルド
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ sw_vers
ProductName:	macOS
ProductVersion:	12.2
BuildVersion:	21D49

$ node -v
v12.7.0

$ npm -v
7.17.0

$ cordova -v
10.0.0 (cordova-lib@10.1.0)

$ cordova platforms
Installed platforms:
  android 9.1.0
  ios 6.2.0

Android Studio

1
2
3
4
5
6
7
8
9
Android Studio 4.1.1
Build #AI-201.8743.12.41.6953283, built on November 5, 2020
Runtime version: 1.8.0_242-release-1644-b3-6915495 x86_64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.16
GC: ParNew, ConcurrentMarkSweep
Memory: 1237M
Cores: 16
Registry: ide.new.welcome.screen.force=true, external.system.auto.import.disabled=true

詳細

Cordova のドキュメント(Customize app icons)に config.xml の設定方法は記載されているが、「そもそもどうやってそのアイコン作るの？」とかが全然見つからなかったので手順を整理した。(※あくまで「自分はこうやった」なので他に適切なやり方あるかも)

アイコン画像の準備

各自で適宜用意。今回はサンプルアイコンとして 無料の暴れ牛のフラットアイコン素材 | FLAT ICON DESIGN -フラットアイコンデザイン- を利用。

Adaptive Icon の作成

Android Studio で /path-to-your-project/platforms/android を開く。

res を右クリックして、 New → Image Asset を選択。

Foreground Layer タブでアイコン画像を選択し、 Resize で良い感じに調整。

Background Layer タブは必要に応じて変更。(たぶん触らなくても良いはず)

Options タブも必要に応じて変更。(自分の環境では Legacy Icon, Round Icon は不要なので No を選択)

Next → Finish で出力。 Res Directory は main で OK。

出力画像をコピー

/path-to-your-project/platforms/android/app/src/main/res/ に mipmap-xxxx が出力されているので /path-to-your-project/res/icon/android/ 配下にコピー。

自分の環境では以下にコピーした。

  • /path-to-your-project/res/icon/android/mipmap-hdpi/ic_launcher_foreground.png
  • /path-to-your-project/res/icon/android/mipmap-mdpi/ic_launcher_foreground.png
  • /path-to-your-project/res/icon/android/mipmap-xhdpi/ic_launcher_foreground.png
  • /path-to-your-project/res/icon/android/mipmap-xxhdpi/ic_launcher_foreground.png
  • /path-to-your-project/res/icon/android/mipmap-xxxhdpi/ic_launcher_foreground.png

Adaptive Icon の設定

colors.xml 作成

/path-to-your-project/res/icon/android/values/colors.xml を作成。

1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="ic_launcher_background">#fff</color> <!-- 色は各自お好みで -->
</resources>

config.xml 変更

config.xml の <platform name="android"> 内に追記。(※見やすいように改行してます)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?xml version='1.0' encoding='utf-8'?>
<widget
  version="1.0.0"
  ios-CFBundleIdentifier="com.example.app"
  ios-CFBundleVersion="1.0.0"
  android-packageName="com.example.app"
  android-versionCode="10000"
  xmlns="http://www.w3.org/ns/widgets"
  xmlns:cdv="http://cordova.apache.org/ns/1.0"
  xmlns:android="http://schemas.android.com/apk/res/android"
>
  ...
  <platform name="android">
    <!-- ***** ここから ***** -->
    <resource-file
      src="res/icon/android/values/colors.xml"
      target="/app/src/main/res/values/colors.xml"
    />
    <icon
      density="mdpi"
      background="@color/ic_launcher_background"
      foreground="res/icon/android/mipmap-mdpi/ic_launcher_foreground.png"
    />
    <icon
      density="hdpi"
      background="@color/ic_launcher_background"
      foreground="res/icon/android/mipmap-hdpi/ic_launcher_foreground.png"
    />
    <icon
      density="xhdpi"
      background="@color/ic_launcher_background"
      foreground="res/icon/android/mipmap-xhdpi/ic_launcher_foreground.png"
    />
    <icon
      density="xxhdpi"
      background="@color/ic_launcher_background"
      foreground="res/icon/android/mipmap-xxhdpi/ic_launcher_foreground.png"
    />
    <icon
      density="xxxhdpi"
      background="@color/ic_launcher_background"
      foreground="res/icon/android/mipmap-xxxhdpi/ic_launcher_foreground.png"
    />
    <!-- ***** ここまで ***** -->
  </platform>
  ...
</widget>

ビルド

あとはいつも通りにビルドすれば OK。デバイス/OS 次第では、1度アンインストールしないと Adaptive Icon に切り替わらないかもなので注意。

まとめ

  • Android Studio で Adaptive Icon の画像を作成
  • colors.xml を作成
  • config.xml の <platform name="android"> 内にアイコン設定を追記
1
2
3
4
5
<icon
  density="..."
  background="@color/ic_launcher_background"
  foreground="res/icon/android/mipmap-.../ic_launcher_foreground.png"
/>

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list