カテゴリー
Kotlin言語

ゼロから始めるAndroidアプリ(Kotlin編)Unit2 – 1 第7回:アプリのアイコンを設定

Android Developers > スタートガイド > Kotlin と Android をゼロから学ぶ > Unit2 – レイアウトUnit2-1 第7回 の内容をまとめたものです(翻訳ではありません)


Unit2 – 1 第7回

第7回の内容は以下の通りです

  • Androidのホーム画面に表示されるアイコン(ランチャーアイコン:Launcher Icon)の設定方法を説明します
  • アイコンにはレイヤーのない基本的な Launcher Icon と、Android8.0から使えるようになったレイヤーのある Adaptive Icon があります
  • アイコンに使う画像として、ビットマップ画像とベクター画像が利用できます
  • Android Studio の Image Asset Studio を使うと Launcher Icon の解像度別パック(asset)が生成できます

ランチャーアイコン(Launcher Icon)の場所

アイコンは mipmap っていうフォルダに保存されてるの

ファイル名は ic_launcher になってますね

  • Project で表示モードを Project にして app > src > main > res とすすむと mipmap-解像度 というフォルダがあります
  • ここに入っているpngファイル、またはXMLファイルがランチャーアイコンです。「解像度」のところはつぎのようになっています
    • mdpi – 中解像度スクリーン用 (~160 dpi)
    • hdpi – 高解像度スクリーン用 (~240 dpi)
    • xhdpi – 超高解像度スクリーン用 (~320 dpi)
    • xxhdpi – 超超高解像度スクリーン用 (~480dpi)
    • xxxhdpi – 超超超高解像度スクリーン用 (~640dpi)
    • nodpi – 画面解像度に関係ないリソース画像
    • anydpi – あらゆる解像度に対応できるリソース画像(ベクター画像)
  • ランチャーアイコンに利用する画像ファイルがビットマップの場合、Android はデバイスの解像度よりも少し高い解像度の画像ファイルをスケールダウンして利用します
  • Project の表示モードを Android にしてあると app>res>mipmap>ファイル名 の中に解像度別に一覧で表示されます
  • ランチャーアイコンの名前はデフォルトで ic_launcher です

アイコンのサイズ

Android で必要とされるランチャーアイコンのサイズは以下のようになります。画像ファイルの形式は JPEG よりもインデックスカラーの PNG(8bit)が向いています。

  • mdpi – 中解像度スクリーン用 ・・・ 48×48
  • hdpi – 高解像度スクリーン用・・・ 72×72
  • xhdpi – 超高解像度スクリーン用・・・ 96×96
  • xxhdpi – 超超高解像度スクリーン用・・・ 144×144
  • xxxhdpi – 超超超高解像度スクリーン用・・・ 192×192

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

これから作るアプリのランチャーアイコンは、アダプティブアイコン(Adaptive Icon)にしておきましょうね

  • Adaptive Launcher Icon(Adaptive Icon)は、Android 8.0 から使えるようになったアイコン形式です
  • Adaptive Icon はフォアグラウンド(foreground)とバックグラウンド(background)の2つのレイヤー構成です
  • foreground(アイコンの図柄)用、background(アイコンの背景)用の2枚の画像を用意します。これにAndroidデバイス側が用意するマスク(mask)を適用することで機種ごとの独特な視覚効果が作られます。詳しく知りたい人はこちらです

アダプティブアイコンのXMLファイルを表示する

アダプティブアイコンってXMLなんですね

  • Adaptive Icon は Project app > src > main > res > mipmap-anydpi-v26 の中に作られます
    • API Level 26(Android8.0)から利用できるようになったのでフォルダ名に -v26 がついています
  • Adaptive Icon の 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>
  • 中を見るとデフォルトのアイコンでは background , foreground の2種類の drawable リソースが指定されていることが分かります
  • Project から drawable フォルダを見ると、drawable と drawable-v24 フォルダにそれらしいXMLのベクター画像ファイルがあることがわかります
  • Androidのベクター画像はXMLで記述されていて vector drawable と呼ばれます
  • ビットマップ画像は解像度別に用意されますが、ベクター画像は XML で書かれたもの1つで対応できます
  • ただし、写真のようなものを使いたい場合はベクターで書くのは難しく、ビットマップのほうが向いています
  • アダプティブアイコンに使う XML の制約について知りたい人は requirements here や design guidance on Android icons をどうぞ

アプリのアイコンを変更してみる

ランチャーアイコン設定のポイント

これからやることですね

  • アイコンは Adaptive Icon として作成します
  • ランチャーアイコンに使う画像を2つ用意します
    • アイコンの図柄にする前面(foreground)画像と背景(background)画像の2つをベクター画像、あるいはビットマップ画像で用意します
    • 画像の形式はベクター(XML)のほうがよいですが、ビットマップ(PNG,JPG,PSDなど)でも構いません
  • アイコン変更などの作業は Image Asset Studio で行います
    • Androidの各バージョンへの対応などは Image Asset Studio が自動的に行います
    • Adaptive Icon に対応していないデバイス用のアイコンは Image Asset Studio が自動生成します
  • プロジェクトのリソースに変更前のアイコンに使っていた画像が残ることがあります。気になるときは、Project から右クリックで Delete できます

Image Asset Studio を使ってアイコンを設定する

Image Asset Studio を使って実際にアイコンを変更してみますね

Image Asset Studio を起動する

次の2つのいずれかで起動します

  • Project で resフォルダを右クリックして New > Image Asset
  • 左タブの Resource Manager を選択して、左上のをクリック > Image Asset を選択

Image Asset Studio でアイコンを変更してみる

  1. ほとんどの設定はデフォルトのままにします
    • Icon Type: Launcher Icons (Adaptive and Legacy)
    • Name: ic_launcher
  2. Foreground Layer が選ばれていることを確認します
  3. Asset Type を Image にします
    • Clip Art はシステムで用意されているアイコン画像
    • Text は文字でアイコンを作成
  4. Path のところのフォルダーアイコンをクリック、用意した画像(XMLのベクトル画像、 PNG, JPG などビットマップ画像など)を選択
  5. 必要に応じてScalingセクションで Trim や Resize を使って画像の調整をします
  6. 同様に Background Layer も設定
  7. Next ボタンををクリックすると確認画面が出ます。上書きされるファイルが赤で表示されます
  8. 問題がなければ Finish ボタンをクリックします。自動的に必要なアイコンが生成され設定されます

不要になった変更前のアイコン画像を削除する

上書きされなかった画像、使わないのは消しちゃっていいそうです

プロジェクトのリソースに変更前のアイコンに使っていた画像が残っているときは、次のようにして削除できます

  1. Project で不要になった変更前の元画像(XML,PNGなど)を見つけます
  2. 右クリックして Delete を選択してOKします
    • ここでどこかで使われているときはダイアログが出るので No を選択します
    • どこで使われているのか表示されます。削除してよさそうなら Delete Anyway をクリックします

アイコン画像とアイコンに使う画像の管理場所

Project ウィンドウで、表示は Project にしておいてくださいね

アダプティブアイコンが保管される場所

  • app > src > main > res > mipmap-anydpi-v26 の中に保管されます
  • ランチャーアイコンの名前はデフォルトで ic_launcher です
res/mipmap-anydpi-v26/ic_launcher.xml
res/mipmap-anydpi-v26/ic_launcher_round.xml

アイコンに使われるベクター画像が保管される場所

res/drawable-anydpi-v24/ic_lancher_background.xml
res/drawable-anydpi/ic_launcher_foreground.xml
  • アイコンに使われるベクター画像は、対応したAPIバージョンの経緯からforeground画像とbackground画像がそれぞれ drawable-anydpi と drawable-anydpi-v24 に分けて管理されています
  • すっきりときれいに管理したいときは Project で res フォルダを右クリックして drawable-anydpi-v26 フォルダを新規に作成してから、2つのファイルをここにドラッグして移動します。空になった drawable-anydpi-v24 フォルダは削除してかまいません

アイコンのビットマップ画像が保管される場所

  • 従来タイプのビットマップアイコンは、解像度別に mipmap フォルダで管理されています
res/mipmap-mdpi/ic_launcher.png
res/mipmap-mdpi/ic_launcher_round.png
res/mipmap-hdpi/ic_launcher.png
res/mipmap-hdpi/ic_launcher_round.png
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.png
res/mipmap-xxdpi/ic_launcher.png
res/mipmap-xxdpi/ic_launcher_round.png
res/mipmap-xxxdpi/ic_launcher.png
res/mipmap-xxxdpi/ic_launcher_round.png
  • アダプティブアイコンにビットマップ画像を使った場合も、画像ファイルは mipmap に保管されます
res/mipmap-mdpi/ic_launcher_background.png
res/mipmap-mdpi/ic_launcher_foreground.png
res/mipmap-hdpi/ic_launcher_background.png
res/mipmap-hdpi/ic_launcher_foreground.png
res/mipmap-xhdpi/ic_launcher_background.png
res/mipmap-xhdpi/ic_launcher_foreground.png
res/mipmap-xxdpi/ic_launcher_background.png
res/mipmap-xxdpi/ic_launcher_foreground.png
res/mipmap-xxxdpi/ic_launcher_background.png
res/mipmap-xxxdpi/ic_launcher_foreground.png

まとめ

お疲れさまです

  • アプリのアイコンはリソースの mipmap ディレクトリに保管されています
  • 旧バージョンのAndroidに対応するため、ビットマップ形式のアイコンが解像度別に作成されています
  • 一部のデバイスに対応したリソースの場合、リソースディレクトリ名に -v26 のような記号が付いていることがあります
  • Android用のベクター画像を vector drawable といいます。vector drawable は XML で記述されています
  • アダプティブアイコンは foreground , background の2レイヤーと、Androidデバイス側が用意する mask で構成されます。API 26(Android 8.0)以上で利用されます
  • アプリのアイコンには Image Asset Studio を使います。アダプティブアイコンと従来型アイコンの両方が自動的に作成されます

参照