[android] アプリアイコン作成
方針
ホーム画面に表示されるアイコンを作成します。
自分が作るアプリは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表示で見てます)
<?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>
<?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に設定します。
<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