【Android】アダプティブアイコンを無料のベクターソフトウェア「Vectr」で作成して設定する

# アダプティブアイコンとは

AdaptiveIconとは、Android Oreo(8.0)で新たに導入されたアプリアイコンの新仕様になります。アダプティブアイコンに対応していないアプリはAndroid8.0以上の端末で、中央に小さく表示されてしまいとても不格好なので、是非とも対応したいところです。

アダプティブアイコンは、foregroundとbackgroundの2つの画像で構成されています。これらの画像は今回はSVGのフォーマットで作成していきます。（pngでもできるそうです）

AdaptiveIconについての公式ドキュメントはこちらになります。
https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

## アダプティブアイコンの仕様について

もう少し細かい部分の仕様について確認していきます。
アダプティブアイコンは、デバイスのOEMが決めたクリップの仕方によって、アイコンが切り取られます。そのためデバイスAでは丸いアイコン、デバイスBでは角丸の四角形などのようにOEMごとで異なる形状でも対応ができる形式のアイコンとも言えます。さらに、アダプティブアイコンはエフェクトにも対応しています。例えば、Pixel3では、ホーム画面でアダプティブアイコンに対応しているアプリのアイコンを長押しして移動できる状態にして左右に振ったりすると、アイコンがその動きに応じて、見える範囲がanimationしている様子がわかると思います。

また、アダプティブアイコンを作成する上で抑えておくべき要件は以下になります。

- **108dp** x **108dp**で作成する
- 内側の**72dp** x **72dp**のエリアが表示される（アイコンが静止している状態）
- 中央から直径**66dp**のエリアはセーフゾーン。このエリアはクリップされることはない

# 作成手順

1. アダプティブアイコンを作成する
    1. フォアグラウンドのSVGを作成
    2. バックグラウンドのSVGを作成
2. それぞれをAndroidStudioでVectorDrawableとして取り込み、drawableファイルを作成。
3. AndroidManifest.xmlで作成したdrawableを指定

# 1. アダプティブアイコンのためのアイコン作成

アダプティブアイコンを作成していきます。私はお金がないので、無料のベクターソフトの「Vectr」を使って、作成してみます。もちろんIllustratorなどSVGで吐き出せるソフトであれば、使用可能です。

## Vectrについて

<img width="1078" alt="スクリーンショット 2019-07-19 11.48.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147934/508a71b1-187c-6a24-eac9-609ba07e661a.png">

https://vectr.com/

軽くVectrについて説明していきます。私も素人なので、あまり深い説明はできませんが、わかる部分のみ紹介していきます。

VectrはWeb上で使用できるベクター編集ソフトウェアになります。基本的にはAdobeのIllustratorなどを使って作成する例が多く見られますが、こちらのようなSVGで書き出せるエディタでも作成することが可能です。

## アイコンを作成する

今回は個人的に作っていた、はてなのRSSリーダーアプリを使ってアダプティブアイコンを適用してみましょう。

<img width="798" alt="スクリーンショット 2019-07-19 12.11.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147934/6c79fc4b-4709-e5eb-6cf9-e23b2e457b24.png">

このように左側に表示されているのがアイコンのもととなるPageになります。
上が「foreground」、下が「background」のPageになります。

細かい作成の仕方は省略します。詳しくご覧になりたい方は、「Vectr」が公式に公開しているUserGuideやTutorialがあるのでこちらが参考になりそうだと思いました。
[UserGuide | Vectr](https://vectr.com/user-guide/)
[Tutorials | Vectr](https://vectr.com/tutorials/)

アイコンを作る際に注意すべき点としては、ちゃんと上記の直径66pxの円形の枠に収まっているかどうかを考えながらアイコンの大きさや形を調整することだと思います。

## 2枚の画像をSVGとしてエクスポート

上記の画像をエクスポートします。エクスポートはSVGで行い、backgroundとforegroundそれぞれ出力します。
ここで確認すべきは形式が**svg**になっているかという点と、widthとheightが**108px**になっているかという点です。

<img width="298" alt="スクリーンショット 2019-07-19 12.18.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147934/0a588b68-2de0-5d09-265d-71eb8894f866.png">

# 2. Android StudioでVectorDrawableとして取り込む

svgファイルを出力したら、2つのsvgファイルをVectorDrawableとしてAndroidStudioで取り込みます。

foreground画像を取り込む
<img width="704" alt="foreground.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147934/5e5acff5-f800-ba88-883f-fe25bd05bc5e.png">

background画像を取り込む
<img width="702" alt="background.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147934/afe44949-528c-8283-eed8-9c8f503e5b1f.png">

# 3. adaptive-iconのdrawableを作成する

画像を取り込んだらadaptive-icon用のdrawableを作成します。
adaptive-iconはAPIレベル26から使用可能なので、`res/mipmap-anydpi-v26`に作成します。

```xml:res/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_background" />
    <foreground android:drawable="@drawable/ic_foreground" />
</adaptive-icon>
```

# 4. AndroidManifest.xmlで作成したdrawableを指定する

drawableを作成したら`android:icon`属性に作成したdrawableを指定します。

```AndroidManifest.xml
<manifest>
    <application
        android:name="youmeee.co.jp.hatenarssreaderapp.App"
        android:icon="@mipmap/ic_launcher">
    </application>
</manifest>
```

<img width="208" alt="resのフォルダ階層.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147934/5ef7033e-413a-0a14-0847-533aabfd6f55.png">

フォルダ階層は↑のようになります。これで、Oreo以上の端末ではアダプティブアイコンが適用され、それ未満の場合は既存のmipmapのフォルダにある`ic_launcher.png`が適用されます。

# 5. ビルドして確認

エミュレータ（APIレベル26）で確認した結果になります。いい感じにアダプティブアイコンが適用できています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147934/2c47cddf-f603-67da-e8fb-638230900c30.png" width=50%></img>

# まとめ

正直AdaptiveIconに対応していなくても騒がれることは少ないですが、対応しているのとしていないのとでは受ける印象がだいぶ変わってくるのかなと思っています。そのためアプリへのエンゲージメントに響くこともあると思うので、是非対応していきたいところです。
また、今回は無料のオンライングラフィックエディターの「Vectr」を使ってみましたが、非デザイナーの私も簡単なものであれば、作成できることがわかったので個人的に作るアプリでは今後も使っていきたいと思いました。
最後までご覧いただきありがとうございました。