はじめに
最近の Android は Material Design を適用することが多くなっています。
また、アプリアイコンには Android7.0 でラウンドアイコン(Round Icon)が登場して、Android8.0 ではアダプティブアイコン(Adaptive Icon)が登場しました。それによってOSごとに表示されるアイコンも変わります。
今回は普通のアイコンとアダプティブアイコン、ベクター画像といったどんな形式のアイコンにも対応できるツールバーのアイコン制御方法を紹介しようと思います。
サンプルアプリを作成
今回は簡単に Android Studio から New Project でサンプルアプリを作成します。
シンプルなアプリの「Empty Activity」を選択しました。
エミュレータでサンプルプロジェクトを実行してみると↓のようなアプリが起動されます。
※OSはAndroid8.0以上
アプリのテーマ(Theme)を確認します
最近のアプリはアプリのActivityやViewに独自のテーマが設定され表示を制御しています。
Manifestファイルからテーマを確認していきます。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.********">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.MyApplication">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
@style/Theme.MyApplication という style が設定されているのでファイルを確認します。
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
Themes.xml をカスタマイズすることで表示を制御できます。
Toolbar（ツールバー）にアプリアイコンを表示する
Themes.xml に navigationIcon の設定を追加します。
この設定によってテーマでアイコン表示が可能です。
<item name="navigationIcon">@mipmap/ic_launcher </item>
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
<!-- ナビゲーションのアイコン -->
<item name="navigationIcon">@mipmap/ic_launcher </item>
</style>
</resources>
エミュレータでサンプルプロジェクトを実行してみると↓のようなアプリが起動されます。
※OS Android8.0以上の表示
※OS Android8.0未満の表示
アイコンは表示できました。しかし、OSによって表示に差異があることがわかると思います。
OS差によるアイコン差異が発生する原因
style で navigationIcon の設定をして表示をしましたが OS によって差異が発生してしまいました。
これは Android8.0 から登場したアダプティブアイコン(adaptive icon)の影響です。
アイコンのファイルを確認します。
anydpi-v26 のディレクトリ内にあるファイルでアダプティブアイコンを定義しています。
<?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>
Android8.0以上のOSはアダプティブアイコンを表示しているので表示に差異があるということがわかりました。
アイコンサイズを調整
アダプティブアイコンの影響で表示差異があるのはわかったのですが、Android8.0以上はアイコンの表示サイズが大きいので調整したいです。
ic_launcher.png をコピーして drawable内に置いてその画像を読み込むという手が考えられますが、無駄に画像リソースを作成することになるので避けたいです。しかもこの方法だとアダプティブアイコンが適用されません。
layer-list を利用してサイズを調整するのが良いと思います。
今回は 縦横を 32dp のアイコンにしたいと思います。
drawable内に ic_launcher_32dp.xml というファイルを作成します。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="32dp"
android:height="32dp"
android:drawable="@mipmap/ic_launcher" />
</layer-list>
このファイルを Themes.xml に記載します。
<item name="navigationIcon">@drawable/ic_launcher_32dp </item>
エミュレータでサンプルプロジェクトを実行してみると↓のようなアプリが起動されます。
これでアイコンサイズを調整できました。
さらにAndroid8.0以上はアダプティブアイコンのアイコンが表示されます。
アダプティブアイコンと普通のアイコンでサイズ調整を変えたい
アダプティブアイコンは OS 8.0 から適用されます。
APIレベルが26以上と未満で分岐させればアダプティブアイコンと普通のアイコンで表示を制御できます。
やり方は drawable-v26 のフォルダを作成するだけです。
そこに ic_launcher_32dp.xml のファイルも用意します。
あとはそれぞれ用意した ic_launcher_32dp.xml ファイルを変更することでアイコンの調整が可能です。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- アダプティブアイコンを48dpで表示することも可能 -->
<item
android:width="48dp"
android:height="48dp"
android:drawable="@mipmap/ic_launcher" />
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- pngファイルであればbitmapタグでも表示可能 -->
<item
android:width="32dp"
android:height="32dp">
<bitmap android:src="@mipmap/ic_launcher" />
</item>
</layer-list>