Android Developers

Create App Icons with Image

Asset Studio
Android Studio includes a tool called Image
Asset Studio that helps you generate your own
app icons from material icons
(https://design.google.com/icons/)

, custom images,

In this document
About Image Asset Studio

and text strings. It generates a set of icons at

Running Image Asset Studio

the appropriate resolution for each generalized

Creating a Launcher Icon

screen density (https://developer.android.com/guide

Creating an Action Bar or Tab

Icon

/practices/screens_support.html#range)

that your app

supports. Image Asset Studio places the

Creating a Notication Icon

newly generated icons in density-specic

Referring to an Image
Resource in Code

folders under the res/ directory in your

project. At runtime, Android uses the
appropriate resource based on the screen
density of the device your app is running on.

Deleting an Icon from a

Project

See also

Image Asset Studio helps you generate the

following icon types:

Supporting Multiple Screens

Launcher icons

Supporting Different
Densities

Action bar and tab icons

Icon Design Guidelines

Style - Icons

Notication icons

Drawable Resources
Displaying Bitmaps Efciently

About Image Asset

Studio
Image Asset Studio helps you create
various types of icons at different densities
and shows you exactly where they'll be

VIDEO

Density-independent
Pixels
(https://www.youtube.com
/watch?v=zhszwkcay2A)

placed in your project. It includes tools for

adjusting your icons and adding backdrops,
all while displaying the result in a preview pane, so they appear exactly as you

intended. These tools can dramatically streamline the icon design and import
process. The following sections describe the icon types that you can create and the
image and text inputs that you can use.

Launcher icons
A launcher icon is a graphic that represents your app to users. It can:
Appear in the list of apps installed on a device and on the Home screen.
Represent shortcuts into your app (for example, a contact shortcut icon that
opens detail information for a contact).
Be used by launcher apps.
Create a rst impression of your app.
Help users nd your app on Google Play.
Image Asset Studio automatically creates separate icons for the recommended
generalized screen densities, including mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi. This
ensures that your icon displays well on a variety of screens and devices. It places
the icons in the proper locations in the res/mipmap-density/ directories. It also
creates a 512 x 512 pixel image that's appropriate for the Google Play Store.
We recommend that you use the material design style for launcher icons, even if
you support older Android versions.
See Launcher Icons (https://developer.android.com/guide/practices/ui_guidelines
/icon_design_launcher.html)
/style/icons.html)

and Product Icons - Material Design (https://material.google.com

for more information.

Action bar and tab icons

Action Bar icons are graphical elements placed in the Action Bar and that represent
individual action items. See Adding and Handling Actions (https://developer.android.com
/training/appbar/actions.html),

App Bar - Material Design (https://material.google.com/layout

/structure.html#structure-app-bar)
/patterns/actionbar.html)

, and Action Bar Design (https://developer.android.com/design

for more information.

Tab icons are graphical elements used to represent individual tabs in a multi-tab
interface. Each tab icon has two states: unselected and selected. See Creating
Swipe Views with Tabs (https://developer.android.com/training/implementing-navigation/lateral.html)
and Tabs - Material Design (https://material.google.com/components/tabs.html)

for more

information.
Image Asset Studio automatically creates separate icons for the recommended
generalized screen densities, including mdpi, hdpi, xhdpi, and xxhdpi. It places the
icons in the proper locations in the res/drawable-density/ directories.
We recommend that you use the material design style for action bar and tab icons,
even if you support older Android versions. Use appcompat and other support
libraries (https://developer.android.com/topic/libraries/support-library/index.html) to deliver your
material design UI to older platform versions.
As an alternative to Image Asset Studio, you can use Vector Asset Studio
(https://developer.android.com/studio/write/vector-asset-studio.html)

to create action bar and tab

icons. Vector drawables are appropriate for simple icons and can reduce the size of
your APK.

Notication icons
A notication is a message that you can display to the user outside of the normal UI
of your app. When you tell the system to issue a notication, it rst appears as an
icon in the notication area. To see the details of the notication, the user opens
the notication drawer. Both the notication area and the notication drawer are
system-controlled areas that the user can view at any time.
Image Asset Studio automatically creates separate icons for the recommended
generalized screen densities, including mdpi, hdpi, xhdpi, and xxhdpi. It places the
icons in the proper locations in the res/drawable-density/ directories:
Icons for Android 2.2 (API level 8) and lower are placed in res/drawabledensity/ directories.

Icons for Android 2.3 to 2.3.7 (API level 9 to 10) are placed in res/drawabledensity-v9/ directories.

Icons for Android 3 (API level 11) and higher are placed in res/drawabledensity-v11/ directories.

If your app supports Android 2.3 to 2.3.7 (API level 9 to 10), Image Asset Studio
generates a gray version of your icon. Later Android versions use the white icon that
Image Asset Studio generates.
See Notications (https://developer.android.com/guide/topics/ui/notiers/notications.html);
Notications Material Design (https://material.google.com/patterns/notications.html)

Notications, Android 5.0 Changes (https://developer.android.com/about/versions/android-

5.0-changes.html#BehaviorNotications);

Notications, Android 4.4 and Lower

(https://developer.android.com/design/patterns/notications_k.html);

and Status Bar Icons, Android

3.0 and Lower (https://developer.android.com/guide/practices/ui_guidelines/icon_design_status_bar.html)

for more information.

Clip art
Image Asset Studio makes it easy for you to import Google material icons in PNG
form: simply select an icon from a dialog. For more information, see Material
Icons (https://design.google.com/icons)

Images
You can import your own images and adjust them for the icon type. Image Asset
Studio supports the following le types: PNG (preferred), JPG (acceptable), and GIF
(discouraged).

Text strings
Image Asset Studio lets you type a text string in a variety of fonts, and places it on
an icon. It converts the text-based icon into PNG les for different densities. You
can use the fonts that are installed on your computer.

Running Image Asset Studio

To start Image Asset Studio, follow these steps:
1. In Android Studio, open an Android app project.
2. In the Project window, select the Android view (https://developer.android.com/studio/projects
/index.html#ProjectFiles).

3. Select the res folder, and then select File > New > Image Asset.
Alternatively, right-click the res folder and select New > Image Asset.
Some other project views and folders have this menu item as well.
Image Asset Studio appears.

4. Continue with Creating a Launcher Icon (#creating-launcher), Creating an Action Bar or

Tab Icon (#creating-actionbartab), or Creating a Notication Icon (#creating-notication).

Creating a Launcher Icon

After you open Image Asset Studio (#access), you can add a launcher icon by
following these steps:
1. In the Icon Type eld, select Launcher Icons.
2. Select an Asset Type, and then specify the asset in the eld underneath:
In the Clip Art eld, click the button.
In the Select Icon dialog, select a material icon (https://design.google.com/icons)
and then click OK.
In the Path eld, specify the path and le name of the image. Click ... to use a
dialog.
In the Text eld, type a text string and select a font.

The icon appears in the Source Asset area on the right side, and in the preview
area at the bottom of the wizard.
3. Optionally change the name and display settings:
Name - If you dont want to use the default name, type a new name. If that
resource name already exists in the project, as indicated by an error at the
bottom of the wizard, it's overwritten. The name can contain lowercase
characters, underscores, and digits only.
Trim - To adjust the margin between the icon graphic and border in the source
asset, select Yes. This operation removes transparent space, while preserving
the aspect ratio. To leave the source asset unchanged, select No. Default: No
Padding - If you want to adjust the source asset padding on all four sides,
move the slider. Select a value between -10% and 50%. If you also select Trim,
the trimming happens rst. Default: 0%
Foreground - To change the foreground color for a Clip Art or Text icon, click
the eld. In the Select Color dialog, specify a color and then click Choose.
The new value appears in the eld. Default: 000000
Background - To change the background color, click the eld. In the Select
Color dialog, specify a color and then click Choose. The new value appears in
the eld. Default: FFFFFF
Scaling - To t the icon size, select Crop or Shrink to Fit. With crop, the image
edges can be cut off, and with shrink, they aren't. You can adjust the padding,
if needed, if the source asset still doesn't t well. Default: Shrink to Fit
Shape - To place a backdrop behind your source asset, select a shape, one of
circle, square, vertical rectangle, or horizontal rectangle. For a transparent
backdrop, select None. Default: Square
Effect - If you want to add a dog-ear effect to the upper right of a square or
rectangle shape, select DogEar. Otherwise, select None. Default: None
Image Asset Studio places the icon within a transparent square so there's some
padding on the edges. The padding provides adequate space for the standard
drop-shadow icon effect.
4. Click Next.
5. Optionally change the resource directory:
Res Directory - Select the resource source set where you want to add the
image asset: src/main/res, src/debug/res, src/release/res, or a user-dened

source set. The main source set applies to all build variants, including debug
and release. The debug and release source sets override the main source set
and apply to one version of a build. The debug source set is for debugging
only. To dene a new source set, select File > Project Structure > app > Build
Types. For example, you could dene a beta source set and create a version
of an icon that includes the text "BETA in the bottom right corner. For more
information, see Congure Build Variants (https://developer.android.com/studio/build
/build-variants.html#workBuildVariants).

The Output Directories area displays the images and the folders where they will
appear in Project Files view (https://developer.android.com/studio/projects/index.html#ProjectFiles)
of the Project window.
6. Click Finish.
Image Asset Studio adds the images to the mipmap folders for the different
densities.

Creating an Action Bar or Tab Icon

After you open Image Asset Studio (#access), you can add an action bar or tab icon by
following these steps:
1. In the Icon Type eld, select Action Bar and Tab Icons.
2. Select an Asset Type, and then specify the asset in the eld underneath:
In the Clip Art eld, click the button.
In the Select Icon dialog, select a material icon (https://design.google.com/icons)
and then click OK.
In the Path eld, specify the path and le name of the image. Click ... to use a
dialog.
In the Text eld, type a text string and select a font.
The icon appears in the Source Asset area on the right side, and in the preview
area at the bottom of the wizard.
3. Optionally change the name and display options:
Name - If you dont want to use the default name, type a new name. If that
resource name already exists in the project, as indicated by an error at the

bottom of the wizard, it's overwritten. The name can contain lowercase
characters, underscores, and digits only.
Trim - To adjust the margin between the icon graphic and border in the source
asset, select Yes. This operation removes transparent space, while preserving
the aspect ratio. To leave the source asset unchanged, select No. Default: No
Padding - If you want to adjust the source asset padding on all four sides,
move the slider. Select a value between -10% and 50%. If you also select Trim,
the trimming happens rst. Default: 0%
Theme - Select HOLO_LIGHT (https://developer.android.com/guide/topics
/ui/themes.html#SelectATheme)

or HOLO_DARK. Or, to specify a color in the Select

Color dialog, select CUSTOM and then click the Custom color eld. Default:
None
Image Asset Studio creates the icon within a transparent square so there's some
padding on the edges. The padding provides adequate space for the standard
drop-shadow icon effect.
4. Click Next.
5. Optionally change the resource directory:
Res Directory - Select the resource source set where you want to add the
image asset: src/main/res, src/debug/res, src/release/res, or a user-dened
source set. The main source set applies to all build variants, including debug
and release. The debug and release source sets override the main source set
and apply to one version of a build. The debug source set is for debugging
only. To dene a new source set, select File > Project Structure > app > Build
Types. For example, you could dene a beta source set and create a version
of an icon that includes the text "BETA in the bottom right corner. For more
information, see Congure Build Variants (https://developer.android.com/studio/build
/build-variants.html#workBuildVariants).

The Output Directories area displays the images and the folders where they will
appear in Project Files view (https://developer.android.com/studio/projects/index.html#ProjectFiles)
of the Project window.
6. Click Finish.
Image Asset Studio adds the images in the drawable folders for the different
densities.

Creating a Notication Icon

After you open Image Asset Studio (#access), you can add a notication icon by
following these steps:
1. In the Icon Type eld, select Notication Icons.
2. Select an Asset Type, and then specify the asset in the eld underneath:
In the Clip Art eld, click the button.
In the Select Icon dialog, select a material icon (https://design.google.com/icons)
and then click OK.
In the Path eld, specify the path and le name of the image. Click ... to use a
dialog.
In the Text eld, type a text string and select a font.
The icon appears in the Source Asset area on the right side, and in the preview
area at the bottom of the wizard.
3. Optionally change the name and display options:
Name - If you dont want to use the default name, type a new name. If that
resource name already exists in the project, as indicated by an error at the
bottom of the wizard, it's overwritten. The name can contain lowercase
characters, underscores, and digits only.
Trim - To adjust the margin between the icon graphic and border in the source
asset, select Yes. This operation removes transparent space, while preserving
the aspect ratio. To leave the source asset unchanged, select No. Default: No
Padding - If you want to adjust the source asset padding on all four sides,
move the slider. Select a value between -10% and 50%. If you also select Trim,
the trimming happens rst. Default: 0%
Image Asset Studio creates the icon within a transparent square so there's some
padding on the edges. The padding provides adequate space for the standard
drop-shadow icon effect.
4. Click Next.

5. Optionally change the resource directory:

Res Directory - Select the resource source set where you want to add the
image asset: src/main/res, src/debug/res, src/release/res, or a user-dened
source set. The main source set applies to all build variants, including debug
and release. The debug and release source sets override the main source set
and apply to one version of a build. The debug source set is for debugging
only. To dene a new source set, select File > Project Structure > app > Build
Types. For example, you could dene a beta source set and create a version
of an icon that includes the text "BETA in the bottom right corner. For more
information, see Congure Build Variants (https://developer.android.com/studio/build
/build-variants.html#workBuildVariants).

The Output Directories area displays the images and the folders where they will
appear in Project Files view (https://developer.android.com/studio/projects/index.html#ProjectFiles)
of the Project window.
6. Click Finish.
Image Asset Studio adds the images in the drawable folders for the different
densities and versions.

Referring to an Image Resource in Code

You can normally refer to an image resource in a generic way in your code, and
when your app runs, the corresponding image displays automatically depending on
the device:
In most cases, you can refer to image resources as @drawable in XML code or
Drawable

(https://developer.android.com/reference/android/graphics/drawable

/Drawable.html)

in Java code.

For example, the following layout XML code displays the drawable in an
ImageView (https://developer.android.com/reference/android/widget/ImageView.html):
<<IImmaaggeeVViieeww
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/myimage" //>>

The following Java code retrieves the image as a Drawable

(https://developer.android.com/reference/android/graphics/drawable/Drawable.html):

RReessoouurrcceess res = getResources() (https://developer.android.com/reference/android/

DDrraawwaabbllee drawable = res.getDrawable (https://developer.android.com/reference/an

The getResources()

(https://developer.android.com/reference/android/content

/Context.html#getResources())

method resides in the Context

(https://developer.android.com/reference/android/content/Context.html)

class,

which applies to UI objects, such as activities, fragments, layouts, views, and so

on.
If your app uses the Support Library, you can refer to an image resource in XML
code with an app:srcCompat statement. For example:
<<IImmaaggeeVViieeww
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:srcCompat="@drawable/myimage" //>>

You can access image resources from the main thread only.
After you have an image resource in the res/ directory of your project, you can
reference it from your Java code or your XML layout using its resource ID. The
following Java code sets an ImageView (https://developer.android.com/reference/android/widget
/ImageView.html)

to use the drawable/myimage.png resource:

IImmaaggeeVViieeww imageView = (IImmaaggeeVViieeww) findViewById(R.id.myimageview);

imageView.setImageResource(R.drawable.myimage);

See Accessing Resources (https://developer.android.com/guide/topics/resources/accessingresources.html#ResourcesFromCode)

for more information.

For launcher icons, the AndroidManifest.xml le must reference the mipmap/

location. Image Asset Studio adds this code automatically. The following manifest
le code references the ic_launcher icon in the mipmap/ directory:
<<aapppplliiccaattiioonn android:name="ApplicationTitle"
android:label="@string/app_label"
android:icon="@mipmap/ic_launcher" >>

Deleting an Icon from a Project

To remove an icon from a project:

1. In the Project window, select the Android view (https://developer.android.com/studio/projects

/index.html#ProjectFiles).

2. Expand the res/mipmap folder for a launcher icon, or the res/drawable folder for
other types of icons.
3. Locate a subfolder that has the name of the icon you want to delete.
This folder contains the icon in different densities.
4. Select the folder and press the Delete key.
Alternatively, select Edit > Delete. Or right-click the le and select Delete.
The Safe Delete dialog appears.
5. Optionally select options to nd where the icon is used in the project, and click
OK.
Android Studio deletes the les from the project and the drive. However, if you
chose to search for places in the project where the les are used and some
usages are found, you can view them and decide whether to delete them. You
must delete or replace these references to be able to successfully compile your
project.
6. Select Build > Clean Project.
Android Studio removes any generated image les corresponding to the deleted
image resource. It removes them from the project and the drive.
7. If needed, correct any remaining errors due to portions of the code that
reference the resource.
Android Studio highlights these errors in your code. When you've removed all
references from your code, you can successfully build your project again.