🌝

[android] アプリアイコン作成

2023/09/18に公開

方針

ホーム画面に表示されるアイコンを作成します。
自分が作るアプリはapi29以上対象なので、アダプティブアイコンのみを作成します。

api 作るべきもの
~25 dpi毎のmipmap
26~32 アダプティブアイコン
33~ アダプティブアイコン(monochrome表示対応あり)

https://developer.android.com/studio/write/create-app-icons#launcher

ざっくりデザイン決め

リソースの作成

以下の2つが必要です。

  • foregroundの vector drawble
  • backgroundの vector drawble


https://developer.android.com/develop/ui/views/launch/icon_design_adaptive#design-adaptive-icons

ガイドラインにそってアイコン作成

ガイドラインはドキュメントよりこちらがよくまとまっていました
https://medium.com/google-design/designing-adaptive-icons-515af294c783

今回はsketchアプリを使ってアイコンを作成しました。
最終的には108dpx108dpにしたいのですが、この時点では荒さ防止と細かい調整を可能にするために1080dpx1080dpで作って書き出しまでおこないます。

backgroundとforegroundを別々に作成して、svg形式で書き出します。

svg形式 -> vector drawable形式 に変換

android studioを開いて、resフォルダからNew -> Vector Assetを選択します。
作成したforegroundとbackgroundのsvgからそれぞれのvector drawableを生成します。
この段階で108dpx108dpに変換して、ガイドラインに合うサイズにします。

アダプティブアイコンを設定する

アダプティブアイコン作成

前述の通りapi26~32とapi33~の2つのアダプティブアイコンを作る必要があります。
以下のように適切なmipmapフォルダに作ります。(Project表示で見てます)

mipmap_anydpi_v26/ic_launcher.xml
<?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" />
</adaptive-icon>

mipmap_anydpi_v33/ic_launcher.xml
<?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" />
    <!--  api33以降ではモノクロテーマが指定できるので追加する。  -->
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

公式ドキュメントでも提言があるように、api33以降のモノクロテーマには特にこだわりがなければforegroundを使い回しすると楽です。

アダプティブアイコンの見た目を確認する


https://developer.android.com/static/studio/images/preview-themed-app-icons.gif

アプリに設定する

続いて、作ったアダプティブアイコンをappモジュールのAndroidManifest.xmlに設定します。

app/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

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

rounded_iconを設定すると、円形でアイコンを表示する設定の時に別のアダプティブアイコンを適用できます。今回のように設定しなければ、iconに設定されたアダプティブアイコンが丸く切り取られて使われます。

おわりです

Discussion