Expoでアプリに「adaptive icon」を設定する

Expoを利用しているReact Nativeアプリでadaptive iconを設定します。

今まではアイコンは通常のpng画像を使っていたのですが、この機会にadaptive iconに変えてみようと思います。

Expoを利用している場合の設定方法と、画像の用意について記載しています。参考になればと思います。

ドキュメント

背景画像と、それに重ねる全面画像を分けて用意してアイコンの規格です。こうすることで角丸にしたり円にしたり、ボヨヨンって揺れたりの表現を行うことができ、端末ごとに最適化された表示を行うことができます。

adaptive iconの仕様は以下のドキュメントに記載されています。
https://medium.com/google-design/designing-adaptive-icons-515af294c783

sketchのサンプルファイルも用意されているので、SketchやFigmaでインポートして改修していくのがおすすめです。

前面に表示する画像。アイコンなどを背景透明で設定する。サイズは108dp×108dp、expoでは1024x1024のpngの仕様を進められています。マスクされる領域として各辺から1/6は空けておく必要があります。

背景の画像。サイズは108dp×108dp、Expoでは1024x1024のpngの仕様を進められています。未設定でも可能で、未設定の場合は以下のbackgroundColorが適用されます

上記のbackgroundImageが設定されていない場合はこちらが利用されます。単一の色背景になります。未設定の場合はデフォルトで#ffffffになります。

画像をアプリに設置して、app.jsonでパスを指定します。通常のiconの指定も残していますが、adaptive iconの指定が優先される様子です。

背景を単一の色にする場合は以下です。背景にも画像を使いたい場合は上記のbackgroundImageを指定しましょう。

    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/foreground.png",
        "backgroundColor": "#7B5544"
      },

上記でadaptive iconの実装ができました。
ランチャーアプリなどを使ってみれば前面画像のバウンドなどの動作があると思いますが、私は使っていないのでわかりませんでした。

何か追加で設定すべきことや、注意すべきことがあれば追記します。

works

profile