3
2

More than 3 years have passed since last update.

Androidアプリの新規プロジェクトで作られるアイコンをシンプルにしたい

Last updated at Posted at 2020-01-26

Android Studioで新規プロジェクトを作成すると、以下のようなアプリアイコンが作られます。

ファイル構成は以下のようになっていると思います。

VectorDrawableに対応していないOSでも問題なく表示され、Round Iconも用意されていて、API 26以上ではAdaptive Iconになる、Adaptive Iconのforeground/backgroundがVectorDrawableになっていて、それぞれ一定の複雑さを持っている。
Androidアプリのアイコンはどうやって作ればよいのかというサンプルになっていて、デフォルトで用意されるアイコンとしては適切なものだと思います。

ただ、ちゃんとしたアプリを作る場合は適切なアイコンを作って置き換えるのでどうでもいいのですが、何かの説明に使うサンプルアプリなどの場合、わざわざアイコンを作ったりしません。
だからといってデフォルトそのままだと、無駄にファイルが多いしシンプルにしたい。
でもただの丸とかのアイコンはそれはそれでやだなと、私は思いました。

すみません、なんの役にも立たないこだわりです。
というわけで、このデフォルトで作られるアイコンをベースにしたシンプルなアイコンデータを作ります。

minSdkVersionが21以上ならVectorDrawableに

まず、minSdkVersionはもう21以上になっている場合が多いでしょう。サンプルだし。
ということでpngではなくVectorDrawableにしてしまって、解像度ごとに用意する必要をなくしちゃいましょう。

VectorDrawableはmipmap以下にはつくれないので注意しましょう。drawableに作る必要があります。

デフォルトアイコン

ただの丸とかにしたくないので、とりあえずドロイド君を組み込んだアイコンにしましょう。
デフォルトで用意されている、ic_launcher_foreground.xmlの以下のドロイド君を利用します。

ただ、このアイコンのドロップシャドウの部分は、API 24以上でないと使えないので、minSdkVersionがこれより下の場合はそのまま使えません。

というわけで、デフォルトのアイコンとして、ドロップシャドウ部分を除外して以下のようにします。

res/drawable/ic_launcher.xml
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="72"
    android:viewportHeight="72"
    >
    <path
        android:fillColor="#008577"
        android:pathData="M36,36m-36,0a36,36 0,1 1,72 0a36,36 0,1 1,-72 0"
        />
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M48.9,28L48.9,28c5.5,4 9.1,10.6 9.1,18H14c0,-7.4 3.6,-13.9 9,-17.9l-4.8,-4.9c-0.7,-0.7 -0.7,-1.9 0,-2.6c0.7,-0.8 1.9,-0.8 2.6,0l5.5,5.5c2.9,-1.5 6.2,-2.3 9.8,-2.3c3.5,0 6.8,0.9 9.7,2.3l5.4,-5.5c0.7,-0.8 1.9,-0.8 2.6,0c0.7,0.7 0.7,1.9 0,2.6L48.9,28zM44.9,38.9c1.1,0 2.1,-0.9 2.1,-2c0,-1.1 -0.9,-2 -2.1,-2c-1.1,0 -2.1,0.9 -2.1,2C42.9,38 43.8,38.9 44.9,38.9zM27.1,38.9c1.1,0 2.1,-0.9 2.1,-2c0,-1.1 -0.9,-2 -2.1,-2c-1.1,0 -2.1,0.9 -2.1,2C25,38 25.9,38.9 27.1,38.9z"
        />
</vector>

絵的にはこうなります。

以下の部分が背景の丸の部分ですので、android:fillColorの色を変えることで背景色の違うアイコンが作れます。

<path
    android:fillColor="#008577"
    android:pathData="M36,36m-36,0a36,36 0,1 1,72 0a36,36 0,1 1,-72 0"
    />

サンプルアプリのアイコンとしては十分。

リソースの場所としては res/drawable/ic_launcher.xml になります。mipmapではないので、AndroidManifestのアイコン情報も書き換えましょう。同じアイコンなのでandroid:roundIconは削除しちゃってもいいかも。

AndroidManifest.xml
<application
    ...
    android:icon="@drawable/ic_launcher"
    android:roundIcon="@drawable/ic_launcher"
    ...
    >

これ一つで十分かもしれない。

API 24以上でドロップシャドウをつける

API 24以上ではVectorDrawableでグラデーションが使えるようになっているので、ドロップシャドウのところを組み込みましょう

res/drawable-anydpi-v24/ic_launcher.xml
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="72"
    android:viewportHeight="72"
    >
    <path
        android:fillColor="#008577"
        android:pathData="M36,36m-36,0a36,36 0,1 1,72 0a36,36 0,1 1,-72 0"
        />
    <path
        android:fillType="evenOdd"
        android:pathData="M14,46C14,46 20.39,34.99 26.13,32.95C33.37,30.37 52.14,31.57 52.14,31.57L70,48L40,72L14,46Z"
        android:strokeWidth="1"
        android:strokeColor="#00000000"
        >
        <aapt:attr name="android:fillColor">
            <gradient
                android:endX="50.5885"
                android:endY="61.9159"
                android:startX="25.7653"
                android:startY="38.0927"
                android:type="linear"
                >
                <item
                    android:color="#40000000"
                    android:offset="0.0"
                    />
                <item
                    android:color="#00000000"
                    android:offset="1.0"
                    />
            </gradient>
        </aapt:attr>
    </path>
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M48.9,28L48.9,28c5.5,4 9.1,10.6 9.1,18H14c0,-7.4 3.6,-13.9 9,-17.9l-4.8,-4.9c-0.7,-0.7 -0.7,-1.9 0,-2.6c0.7,-0.8 1.9,-0.8 2.6,0l5.5,5.5c2.9,-1.5 6.2,-2.3 9.8,-2.3c3.5,0 6.8,0.9 9.7,2.3l5.4,-5.5c0.7,-0.8 1.9,-0.8 2.6,0c0.7,0.7 0.7,1.9 0,2.6L48.9,28zM44.9,38.9c1.1,0 2.1,-0.9 2.1,-2c0,-1.1 -0.9,-2 -2.1,-2c-1.1,0 -2.1,0.9 -2.1,2C42.9,38 43.8,38.9 44.9,38.9zM27.1,38.9c1.1,0 2.1,-0.9 2.1,-2c0,-1.1 -0.9,-2 -2.1,-2c-1.1,0 -2.1,0.9 -2.1,2C25,38 25.9,38.9 27.1,38.9z"
        />
</vector>

見た目はこうなります。

前述と同様に、背景部分の色指定を変更することでバリエーションが作れます。

API 24以上でしか使えないので、minSdkVersionがそれ以下の場合は res/drawable-anydpi-v24/ic_launcher.xml において、API 24以上で適用されるようにしておきます。

API 26以上でAdaptive Iconにする

ここまで来たので(?)API 26ではAdaptive Iconにしましょう。これはデフォルトで用意されるものほぼそのままです。
ただ、前述のアイコンを作るためにiconの指定がdrawableになっているので、サンプルで作られるres/mipmap-anydpi-v26res/drawable-anydpi-v26 に移動させる必要があります。

デフォルトで用意されているアイコンの背景は格子模様がありますが、無地でつくってきたのでこいつも無地にしちゃいます。また、ic_launcher_background.xmlres/drawableic_launcher_foreground.xmlres/drawable-anydpi-v24 以下にありますが、使われるのはAPI 26以上のときのみなので、これらも移動させちゃいましょう。

res/drawable-anydpi-v26/ic_launcher.xml
<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>
res/drawable-anydpi-v26/ic_launcher_background.xml
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108"
    >
    <path
        android:fillColor="#008577"
        android:pathData="M0,0h108v108h-108z"
        />
</vector>
res/drawable-anydpi-v26/ic_launcher_foreground.xml
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108"
    >
    <path
        android:fillType="evenOdd"
        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
        android:strokeWidth="1"
        android:strokeColor="#00000000"
        >
        <aapt:attr name="android:fillColor">
            <gradient
                android:endX="78.5885"
                android:endY="90.9159"
                android:startX="48.7653"
                android:startY="61.0927"
                android:type="linear"
                >
                <item
                    android:color="#44000000"
                    android:offset="0.0"
                    />
                <item
                    android:color="#00000000"
                    android:offset="1.0"
                    />
            </gradient>
        </aapt:attr>
    </path>
    <path
        android:fillColor="#FFFFFF"
        android:fillType="nonZero"
        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
        android:strokeWidth="1"
        android:strokeColor="#00000000"
        />
</vector>

この構成でも ic_launcher_background.xml の色を変更すればその他のアイコンと同様に背景色の変化でバリエーションが作れますね。

まとめ

ここまでやるとこうなります。

全部VectorDrawableなので、画像編集ソフトなどなしに、テキスト編集で背景色をイジればバリエーションも作れます。
サンプルアプリとして手抜き感がなくファイル構成もシンプル。と個人的には満足しています。

3
2
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
3
2