Creating an App Icon with the Asset Studio

If you right-click over pretty much any directory in the Android Studio tree, the context menu will have an “Image Asset” option. This is also available from File > New > Image Asset. This brings up the Asset Studio, to help you to assemble icons.

By default, the Asset Studio has its “Icon Type” drop-down set for “Launcher Icons (Adaptive and Legacy)”, which is how you set up an app icon nowadays:

Asset Studio, As Initially Launched
Asset Studio, As Initially Launched

The overall name for your launcher icon is found in the Name field, above the tabs. The default is ic_launcher, and unless you have a good reason to change it, you are best served by leaving it alone.

Foreground Layer

What you would ordinarily think of as your icon is what Android Studio and Android 8.0+ refer to as the “Foreground Layer”. The Asset Studio starts on the Foreground Layer tab for you to configure this layer.

Your icon can come from three main sources:

Asset Studio, Showing Clip Art Options
Asset Studio, Showing Clip Art Options
Asset Studio, Showing Text Options
Asset Studio, Showing Text Options

For all three of these, you can:

That latter choice is particularly important, as you need to keep your foreground layer content within the “safe zone”. That shows up in the previews as a dark gray circle. So long as your foreground layer is in the safe zone, you should not have to worry about anything accidentally cutting off part of the layer when it renders your app icon.

Background Layer

In the preview area, by default, you will see a green grid behind your foreground layer. That is the default background layer. If you would like to use something else, click the “Background Layer” tab:

Asset Studio, Showing Background Layer
Asset Studio, Showing Background Layer

Your two main options are:

The background needs to be designed to be cropped into a variety of shapes, such as those shown in the preview (circle, various rounded forms of squares, etc.). Hence, outside of flat colors, typical backgrounds will be gradients or simple patterns, such as the default grid.

Options

On Android 8.0+ devices, the foreground layer, background layer, and device-chosen shape (e.g., squircle) combine to create your app icon.

On older devices, the app icon is whatever you choose it to be, where the Options tab helps you decide what that is:

Asset Studio, Showing Legacy Options
Asset Studio, Showing Legacy Options

The most important legacy option is the “Legacy Icon (API <= 25)” section. If your minSdkVersion is below 26, this will be the icon rendition that will be used as your app icon by default. The Asset Studio will merge your foreground and background layers itself, then apply your selected shape from the drop-down (e.g., square).

For Android 7.1 devices, you can also opt to have the Asset Studio create a separate round icon, that you can declare in your manifest, as will be seen later in this chapter.

If you are going to be distributing your app through the Play Store, you can also generate a Play Store rendition of your icon. This is reminiscent of the legacy icon, but at a higher resolution.

Generating the Icon

Once you have adjusted your app icon via the three tabs, click Next at the bottom of the Asset Studio wizard. This will bring up the final wizard page, showing you what will be generated for you by the wizard:

Asset Studio, Showing What Will Be Created
Asset Studio, Showing What Will Be Created

The Output Directories tree shows you each file that will be created or replaced. Those that show up in red are ones that will be replaced; ones that show up in black are new files. Typically, unless you changed the icon or layer names, most of the files will be replacements for files that exist already.

Some of these files will be typical bitmap-style resources. Some are vector drawables, a concept that we will explore in an upcoming chapter.

Using In Your Manifest

Then, in your manifest, you can have an android:icon attribute on the <application> element to associate your icon with your app. If you did not change the names of the icon, then your manifest should already have the appropriate attribute values.

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.commonsware.myapplication"
  xmlns:android="http://schemas.android.com/apk/res/android">

  <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/AppTheme">
    <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>

You can also have an android:roundIcon attribute. This is for the Android 7.1-specific scenario of having a dedicated round icon resource. If you elected to have Android Studio create a round icon for you, ensure that your <application> element has an android:roundIcon attribute that points to the round icon resource (e.g., @mipmap/ic_launcher_round).


Prev Table of Contents Next

This book is licensed under the Creative Commons Attribution-ShareAlike 4.0 International license.