Create app icons with Image Nugget Studio

Android Studio includes a tool called Epitome Asset Studio that helps you generate your ain app icons from material icons, custom images, and text strings. It generates a gear up of icons at the advisable resolution for each pixel density that your app supports. Prototype Asset Studio places the newly generated icons in density-specific 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.

Image Asset Studio helps y'all generate the following icon types:

  • Launcher icons
  • Action bar and tab icons
  • Notification icons

Almost Image Asset Studio

Prototype Asset Studio helps you create diverse types of icons at dissimilar densities and shows you exactly where they'll be placed in your project. The following sections draw the icon types that you tin create and the paradigm and text inputs that you can use.

Adaptive and legacy launcher icons

A launcher icon is a graphic that represents your app to users. It tin:

  • Announced in the listing of apps installed on a device and on the Habitation screen.
  • Represent shortcuts into your app (for example, a contact shortcut icon that opens detail data for a contact).
  • Be used past launcher apps.
  • Help users notice your app on Google Play.

Adaptive launcher icons can display every bit a diverseness of shapes across dissimilar device models and are available in Android 8.0 (API level 26) and higher. Android Studio three.0 introduces support for creating adaptive icons using Image Asset Studio. Image Asset Studio generates previews of an adaptive icon in circumvolve, squircle, rounded square, and square shapes, as well as a full bleed preview of the icon. Image Nugget Studio also generates legacy, round, and Google Play Store previews of the icon. A legacy launcher icon is a graphic that represents your app on a device'southward habitation screen and in the launcher window. Legacy launcher icons are intended for use on devices running Android 7.one (API level 25) or lower, which don't support adaptive icons, and don't brandish every bit varying shapes across device models.

Image Asset Studio places the icons in the proper locations in the res/mipmap-density/ directories. It besides creates a 512 10 512 pixel image that's advisable for the Google Play store.

We recommend that you utilize the fabric design style for launcher icons, even if you lot back up older Android versions.

See Adaptive Launcher Icons and Product Icons - Material Design for more data.

Action bar and tab icons

Action bar icons are graphical elements placed in the action bar and that stand for individual action items. Run into Calculation and Handling Actions, App Bar - Material Design, and Action Bar 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 and Tabs - Cloth Blueprint for more information.

Epitome Nugget Studio places the icons in the proper locations in the res/drawable-density/ directories.

Nosotros recommend that you lot employ the material pattern style for action bar and tab icons, even if you support older Android versions. Use appcompat and other support libraries to deliver your fabric design UI to older platform versions.

As an alternative to Image Asset Studio, yous tin can employ Vector Asset Studio to create action bar and tab icons. Vector drawables are appropriate for simple icons and tin can reduce the size of your app.

Notification icons

A notification is a message that you tin brandish to the user outside of the normal UI of your app. Image Asset Studio places notifications icons in the proper locations in the res/drawable-density/ directories:

  • Icons for Android 2.ii (API level 8) and lower are placed in res/drawable-density/ directories.
  • Icons for Android 2.three to 2.3.7 (API level 9 to 10) are placed in res/drawable-density-v9/ directories.
  • Icons for Android 3 (API level 11) and higher are placed in res/drawable-density-v11/ directories.

If your app supports Android 2.3 to 2.3.7 (API level 9 to ten), Epitome Asset Studio generates a gray version of your icon. Later Android versions utilise the white icon that Image Asset Studio generates.

Meet Notifications; Notifications Material Design; Notifications, Android 5.0 Changes; Notifications, Android iv.4 and Lower; and Status Bar Icons, Android iii.0 and Lower for more information.

Prune fine art

Paradigm Asset Studio makes it easy for yous to import Google material icons in VectorDrawable and PNG formats: simply select an icon from a dialog. For more information, see Material Icons.

Images

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

Text strings

Epitome Asset Studio lets y'all type a text string in a diverseness of fonts, and places it on an icon. It converts the text-based icon into PNG files for different densities. You lot tin can use the fonts that are installed on your estimator.

Run Paradigm Asset Studio

To start Image Nugget Studio, follow these steps:

  1. In the Project window, select the Android view.
  2. Right-click the res folder and select New > Paradigm Asset.

    The adaptive and legacy icon wizard in Image Asset Studio.

  3. Go on by following the steps to:
    • If your app supports Android 8.0, create adaptive and legacy launcher icons.
    • If your app supports versions no higher than Android 7.ane, create a legacy launcher icon only.
    • Create an activity bar or tab icon.
    • Create a notification icon.

Create adaptive and legacy launcher icons

Note: If your app supports versions no higher than Android 7.1, follow the instructions to create a legacy launcher icon simply instead.

Later on you open Image Asset Studio, you tin add adaptive and legacy icons past following these steps:

  1. In the Icon Type field, select Launcher Icons (Adaptive & Legacy).
  2. In the Foreground Layer tab, select an Asset Type, and so specify the asset in the field underneath:
    • Select Epitome to specify the path for an image file.
    • Select Prune Art to specify an image from the material design icon prepare.
    • Select Text to specify a text cord and select a font.
  3. In the Background Layer tab, select an Asset Blazon, and then specify the asset in the field underneath. You can either select a color or specify an image to use as the background layer.
  4. In the Legacy tab, review the default settings and confirm you desire to generate legacy, round, and Google Play Store icons.
  5. Optionally change the name and display settings for each of the Foreground Layer and Background Layer tabs:
    • Proper name - If y'all don't want to use the default name, type a new proper name. If that resources name already exists in the project, every bit indicated by an error at the bottom of the wizard, information technology'southward overwritten. The name can incorporate lowercase characters, underscores, and digits only.
    • Trim - To adjust the margin between the icon graphic and edge in the source asset, select Yep. This operation removes transparent space, while preserving the aspect ratio. To leave the source asset unchanged, select No.
    • Color - To change the colour for a Clip Art or Text icon, click the field. In the Select Color dialog, specify a color and then click Choose. The new value appears in the field.
    • Resize - Use the slider to specify a scaling factor in percentage to resize an Image, Clip Art, or Text icon. This control is disabled for the groundwork layer when you specify a Color asset type.
  6. Click Side by side.
  7. Optionally, change the resources directory: Select the resource source set where you want to add the prototype nugget: src/primary/res, src/debug/res, src/release/res, or a custom source set. The principal source set applies to all build variants, including debug and release. The debug and release source sets override the main source set and employ to i version of a build. The debug source set is for debugging only. To define a new source set, select File > Project Structure > app > Build Types. For example, you lot can define a beta source set and create a version of an icon that includes the text "BETA" in the bottom correct corner. For more information, see Configure Build Variants.
  8. Click Finish. Paradigm Asset Studio adds the images to the mipmap folders for the different densities.

Create a legacy launcher icon

Annotation: If your app supports Android 8.0, follow the instructions to create an adaptive and legacy launcher icons instead.

After you open up Paradigm Asset Studio, yous can add a launcher icon past following these steps:

  1. In the Icon Type field, select Launcher Icons (Legacy Only) .
  2. Select an Asset Type, and and then specify the asset in the field underneath:
    • In the Prune Fine art field, click the button.

      • In the Select Icon dialog, select a material icon and then click OK.

    • In the Path field, specify the path and file name of the image. Click ... to use a dialog.
    • In the Text field, type a text string and select a font.

    The icon appears in the Source Nugget area on the right side, and in the preview area at the bottom of the wizard.

  3. Optionally change the name and brandish settings:
    • Name - If you don't want to apply the default name, type a new name. If that resource proper name already exists in the project, as indicated past an error at the lesser of the wizard, information technology's overwritten. The name tin comprise lowercase characters, underscores, and digits simply.
    • Trim - To adjust the margin between the icon graphic and edge in the source asset, select Yes. This performance removes transparent space, while preserving the aspect ratio. To go out the source asset unchanged, select No.
    • Padding - If yous want to conform the source asset padding on all four sides, motion the slider. Select a value between -10% and l%. If you likewise select Trim, the trimming happens showtime.
    • Foreground - To change the foreground color for a Clip Art or Text icon, click the field. In the Select Color dialog, specify a color and then click Cull. The new value appears in the field.
    • Groundwork - To change the background colour, click the field. In the Select Color dialog, specify a colour and so click Choose. The new value appears in the field.
    • Scaling - To fit the icon size, select Crop or Shrink to Fit. With crop, the image edges can exist cut off, and with shrink, they aren't. You tin suit the padding, if needed, if the source asset yet doesn't fit well.
    • Shape - To place a backdrop behind your source asset, select a shape, i of circumvolve, square, vertical rectangle, or horizontal rectangle. For a transparent backdrop, select None.
    • 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.

    Epitome Asset Studio places the icon within a transparent foursquare and then there's some padding on the edges. The padding provides adequate space for the standard drib-shadow icon result.

  4. Click Next.
  5. Optionally change the resource directory:
    • Res Directory - Select the resource source prepare where you lot want to add together the image asset: src/chief/res, src/debug/res, src/release/res, or a user-defined source set. The main source set applies to all build variants, including debug and release. The debug and release source sets override the master source set and apply to i version of a build. The debug source ready is for debugging only. To define a new source set, select File > Project Structure > app > Build Types. For case, you could define a beta source set and create a version of an icon that includes the text "BETA" in the lesser right corner. For more than information, see Configure Build Variants.

    The Output Directories area displays the images and the folders where they will appear in Project Files view of the Project window.

  6. Click Finish.

    7. Image Asset Studio adds the images to the mipmap folders for the different densities.

Create an action bar or tab icon

Later on you open up Prototype Nugget Studio, you can add an action bar or tab icon by following these steps:

  1. In the Icon Type field, select Action Bar and Tab Icons.
  2. Select an Asset Type, and then specify the asset in the field underneath:
    • In the Clip Art field, click the button.

      • In the Select Icon dialog, select a fabric icon and and so click OK.

    • In the Path field, specify the path and file proper noun of the epitome. Click ... to utilise a dialog.
    • In the Text field, 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:
    • Proper name - If you don't want to employ the default name, type a new name. If that resources proper noun already exists in the project, as indicated by an error at the bottom of the sorcerer, it's overwritten. The name can contain lowercase characters, underscores, and digits merely.
    • Trim - To adapt 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.
    • Padding - If yous want to adjust the source asset padding on all four sides, move the slider. Select a value between -ten% and l%. If you also select Trim, the trimming happens offset.
    • Theme - Select HOLO_LIGHT or HOLO_DARK. Or, to specify a color in the Select Color dialog, select CUSTOM and and so click the Custom colour field.

    Paradigm Asset Studio creates the icon within a transparent square and so there'southward some padding on the edges. The padding provides acceptable space for the standard drib-shadow icon result.

  4. Click Next.
  5. Optionally change the resource directory:
    • Res Directory - Select the resource source gear up where you desire to add the image nugget: src/main/res, src/debug/res, src/release/res, or a user-defined source set. The master source ready applies to all build variants, including debug and release. The debug and release source sets override the chief source gear up and apply to one version of a build. The debug source gear up is for debugging only. To define a new source prepare, select File > Project Construction > app > Build Types. For example, you could define a beta source set and create a version of an icon that includes the text "BETA" in the bottom right corner. For more information, encounter Configure Build Variants.

    The Output Directories surface area displays the images and the folders where they will appear in Project Files view of the Project window.

  6. Click Cease.

    7. Image Nugget Studio adds the images in the drawable folders for the different densities.

Create a notification icon

Later on y'all open Prototype Asset Studio, you can add a notification icon by post-obit these steps:

  1. In the Icon Type field, select Notification Icons.
  2. Select an Nugget Type, and then specify the nugget in the field underneath:
    • In the Clip Art field, click the button.

      • In the Select Icon dialog, select a fabric icon and and then click OK.

    • In the Path field, specify the path and file name of the image. Click ... to use a dialog.
    • In the Text field, type a text string and select a font.

    The icon appears in the Source Asset area on the right side, and in the preview surface area at the bottom of the wizard.

  3. Optionally change the proper name and brandish options:
    • Proper noun - If you don't want to apply the default name, blazon a new name. If that resources proper name already exists in the project, as indicated by an error at the bottom of the sorcerer, information technology's overwritten. The name tin contain lowercase characters, underscores, and digits only.
    • Trim - To adjust the margin betwixt the icon graphic and border in the source nugget, select Yeah. This operation removes transparent space, while preserving the aspect ratio. To leave the source asset unchanged, select No.
    • Padding - If you want to adapt the source nugget padding on all iv sides, move the slider. Select a value between -10% and 50%. If yous also select Trim, the trimming happens first.

    Image Nugget Studio creates the icon within a transparent square and then at that place's some padding on the edges. The padding provides adequate space for the standard drib-shadow icon effect.

  4. Click Side by side.
  5. Optionally change the resource directory:
    • Res Directory - Select the resource source set where you desire to add the image asset: src/chief/res, src/debug/res, src/release/res, or a user-defined source set up. The main source prepare applies to all build variants, including debug and release. The debug and release source sets override the main source set and utilise to one version of a build. The debug source gear up is for debugging just. To define a new source fix, select File > Projection Structure > app > Build Types. For example, you could define a beta source ready and create a version of an icon that includes the text "BETA" in the bottom correct corner. For more information, run into Configure Build Variants.

    The Output Directories area displays the images and the folders where they will appear in Project Files view of the Project window.

  6. Click Finish.

    7. Image Asset Studio adds the images in the drawable folders for the dissimilar densities and versions.

Refer to an image resource in code

You tin normally refer to an epitome resource in a generic way in your code, and when your app runs, the corresponding epitome displays automatically depending on the device:

  • In nearly cases, you can refer to image resource as @drawable in XML code or Drawable in Java code.

    • For example, the following layout XML code displays the drawable in an ImageView:

    <ImageView     android:layout_height="wrap_content"     android:layout_width="wrap_content"     android:src="@drawable/myimage" />

    The following Coffee code retrieves the image as a Drawable:

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)

    Java

    Resources res = getResources(); Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

    The getResources() method resides in the Context class, which applies to UI objects, such as activities, fragments, layouts, views, and then on.

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

You can admission image resource from the primary thread only.

Subsequently you lot have an prototype resource in the res/ directory of your projection, you lot can reference it from your Java code or your XML layout using its resource ID. The following Java lawmaking sets an ImageView to utilize the drawable/myimage.png resources:

Kotlin

findViewById<ImageView>(R.id.myimageview).utilise {     setImageResource(R.drawable.myimage) }

Java

ImageView imageView = (ImageView) findViewById(R.id.myimageview); imageView.setImageResource(R.drawable.myimage);

Meet Accessing Resource for more information.

For launcher icons, the AndroidManifest.xml file must reference the mipmap/ location. Paradigm Asset Studio adds this code automatically. The post-obit manifest file lawmaking references the ic_launcher icon in the mipmap/ directory:

<awarding android:proper noun="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.
  2. Expand the res/mipmap folder for a launcher icon, or the res/drawable binder for other types of icons.
  3. Locate a subfolder that has the proper noun of the icon you desire to delete.

    4. This folder contains the icon in different densities.

  4. Select the folder and printing the Delete key.

    5. Alternatively, select Edit > Delete. Or right-click the file and select Delete.

    The Safe Delete dialog appears.

  5. Optionally select options to find where the icon is used in the projection, and click OK.

    6. Android Studio deletes the files from the project and the drive. However, if you chose to search for places in the projection where the files are used and some usages are found, yous tin view them and make up one's mind whether to delete them. You must delete or replace these references to be able to successfully compile your project.

  6. Select Build > Clean Project.

    7. Android Studio removes any generated image files corresponding to the deleted image resources. Information technology removes them from the projection and the bulldoze.

  7. If needed, correct any remaining errors due to portions of the code that reference the resource.

    8. Android Studio highlights these errors in your code. When yous've removed all references from your code, y'all tin can successfully build your project again.