LoginSignup
0
0

More than 3 years have passed since last update.

アダプティブアイコン(Adaptive Icon)にとりあえず対応する

Posted at

アダプティブアイコン(Adaptive Icon)とは?

Adaptive Icon(アダプティブアイコン)とは、Android 8.0以降から実装された機能のこと。
https://blog.digimerce.jp/2018/11/19/6809/
背景とか説明はこのサイトが分かりやすいです。

背景画像の上に、メインとなる画像を重ねて、
その上から中心に丸や四角の穴が空いたマスクで覆って表現するみたいです。

対応方法

アイコンにする画像の準備

アダプティブアイコンは2つの画像が必要です。
- アイコンの前面になる画像
- アイコンの背景になる画像(色指定も可能なので必須ではない)

画像さえあれば30分もかからずに対応できます!
今回はこれで作ります。

Androidで使うアイコン画像の中で1番大きいサイズのものが512×512なので
それより大きければ大丈夫だと思います。
今回は1024×1024で用意しました。背景は透過しておきます。

Image Asset

画像が用意できたのでアダプティブアイコンを作るのですが、Android StudioのImage Assetを使って作成します。
Android Studio上で操作するのでデザイナーではなくエンジニアの作業になります。

いざ作成

  1. Android Studioのナビゲーションバーの「app」の上で右クリックし、[New]→[Image Asset]の順で選択します。
    スクリーンショット 2019-10-02 14.19.46.png (175.2 kB)

  2. アイコンの前面になる画像を設定

    1. 「Foreground Layer」タブが選択されている状態で「...」を押して画像を選択する
    2. Trim、Resizeをいじっていい感じに配置する スクリーンショット 2019-10-02 15.00.44.png (285.4 kB)
  3. アイコンの背景を設定
    今回は背景は画像ではなく単色指定にします。

    1. 「Background Layer」タブが選択されている状態でAsset Typeを「Color」にし、好きな色を選ぶ スクリーンショット 2019-10-02 15.02.19.png (264.4 kB) いい感じに配置できたら右下のNextを押します。
  4. 問題なければそのままFinish
    スクリーンショット 2019-10-02 15.05.05.png (246.2 kB)
    赤文字のファイルがImage Assetが自動で作ってくれたファイルです。
    各サイズごとのアイコンと、xmlファイルも自動生成してくれています。

  5. ビルドしてシミュレータで見てみましょう

    Androidのバージョンによって、同じアイコンが丸になったり四角になったりするようになりました!

こんな感じで簡単にアダプティブアイコンに対応できます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0