Add Bitmap Images with Image Asset Studio (16)

Add Bitmap Images with Image Asset Studio

In this document

1. Accessing Image Asset Studio
2. Creating Icons
3. Customizing Icons
4. Saving Icons
5. Configuring Build Properties
6. Referring to an Image Resource in Code
7. Managing Launcher Icons as mipmap Resources

Android Studio includes a tool called Image Asset Studio that helps you to generate custom icons for your Android applications from existing image, clipart, or text-string resources. It generates a set of icons at the appropriate resolution for each generalized screen density that your app supports. The newly generated icons are placed in density-specific folders (for example, mipmap-mdpi/ or drawable-xxxhdpi/), which reside in the application’s res/ folder. At runtime, Android uses the appropriate resource based on the screen density of the device your application is running on.

Image Asset Studio generates the following asset types:

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

This guide shows how to generate these assets using Image Asset Studio.

Accessing Image Asset Studio

---

Follow these steps to access Image Asset Studio:

1. In Android Studio, open an Android app project.
2. In the Project window on the left side of the screen, select Android from the dropdown menu. The Android project view appears in the pane.
3. Right-click the res/folder and select New > Image Asset. The Image Asset Studio window appears.

Creating Icons

---

You can generate icons from image, clipart , or text-string resources. This section explains how to work with each of these resources.

From an image resource

1. Open the Asset Type dropdown menu and select an icon type.
2. From the available Foreground options, select Image.
3. Specify the asset to use by entering a filename in the Image file field or by navigating to and selecting a file via the file browser. Image Asset Studio supports the following file types, in descending order of desirability: PNG, JPG, and GIF.

   The icon to be generated appears in the Preview pane, displayed at sizes corresponding to different screen densities.

   The rest of the settings on this screen are optional. To learn how to customize your icons using these options, see Customizing Icons.

4. Save your icons to the project folder.

From a clipart resource

1. Open the Asset Type dropdown menu and select an icon type.
2. From the available Foreground options, select Clipart. The Choose button appears.
3. Click Choose. A window containing clipart resources appears.
4. Select a clipart resource.

   The icon to be generated appears in the Preview pane, displayed at sizes corresponding to different screen densities.

   The rest of the settings on this screen are optional. To learn how to customize your icons using these options, see Customizing Icons.

5. Save your icons to the project folder.

From a text-string resource

1. Open the Asset Type dropdown menu and select an icon type.
2. From the available Foreground options, select Text.
3. Enter into the Text field the text you want to turn into an icon.

   The icon to be generated appears in the Preview pane, displayed at sizes corresponding to different screen densities.

4. To change the font, select a font from the Font dropdown menu.

   The rest of the settings on this screen are optional. To learn how to customize your icons using these options, see Customizing Icons.

5. Save your icons to the project folder.

Customizing Icons

---

Image Asset Studio lets you customize various visual effects for your icons. The following options are of particular note.

• Trim surrounding blank space: This option allows you to adjust the margin between the icon graphic and border.

  

  Figure 1: An icon before and after trimming.

• Additional Padding: This option allows you to adjust the icon's padding on all four sides. Use the slider to select a value between 0 and 100 pixels. For example, for a 100px X 100px image with padding of 25px, the resulting image is 150px X 150px.
• Theme: This option allows you to set a theme for your action bar and tab icons. You can tint icons using the HOLO_DARK or HOLO_LIGHT theme or create a custom theme using the color palette.
• Resource name: This option allows you to specify a resource name other than the default one. If an asset with the specified resource name already exists, Image Asset Studio warns you that it is going to overwrite the existing asset with this one.

Saving Icons

---

This section explains how to save your icons to the res/ folder. Do so by following these steps:

1. From the initial screen that appeared when you opened Image Asset Studio, click Next. Image Asset Studio opens a new window.
2. Confirm the target module and resource directory settings for the icon. If you don't want to use the default target module or resource directory, you can enter your own values for them.
3. Click Finish. The Image Asset Studio generates new icon files, in PNG format, according to the options you have chosen.

Note: Launcher icon files reside in a different location from that of other icons. They are located in the mipmap/ folder. All other icon files reside in the drawable/ folder of your project.

Configuring Build Properties

---

To change the module and resource directory, follow these steps:

1. In the Target Module field, select a module to add the resource to. For more information, see Creating an Android Module.
2. In the Res Directory field, select an option for where to place the image asset:
   • src/main/res: This source set applies to all build variants, including debug and release.
   • src/debug/res, src/release/res: These source sets override the main source set and apply to one version of a build. The debug source set is for debugging only.
   • User-defined: To define your own source set, select File > Project Structure > 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, see Work with build variants.

Referring to an Image Resource in Code

---

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.

For example, the following XML references the ic_launcher icon in the mipmap/ folder.

<application android:name="ApplicationTitle"
    android:label="@string/app_label"
    android:icon="@mipmap/ic_launcher" >

The following Java code sets an ImageView to use the drawable/myimage.png resource:

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

Managing Launcher Icons as mipmap Resources

---

Different home screen launcher apps on different devices show app launcher icons at various resolutions. When app resource optimization techniques remove resources for unused screen densities, launcher icons can wind up looking fuzzy because the launcher app has to upscale a lower-resolution icon for display. To avoid these display issues, apps should use the mipmap/ resource folders for launcher icons. The Android system preserves these resources regardless of density stripping, and ensures that launcher apps can pick icons with the best resolution for display.

Make sure launcher apps show a high-resolution icon for your app by moving all densities of your launcher icons to density-specific res/mipmap/ folders (for example res/mipmap-mdpi/ and res/mipmap-xxxhdpi/). The mipmap/ folders replace the drawable/ folders for launcher icons. For xxhpdi launcher icons, be sure to add the higher resolution xxxhdpi versions of the icons to enhance the visual experience of the icons on higher resolution devices.

Note: Even if you build a single APK for all devices, it is still best practice to move your launcher icons to the mipmap/ folders.

Manifest update

When you move your launcher icons to the mipmap-[density] folders, change the launcher icon references in the AndroidManifest.xml file so your manifest references the mipmap/ location. This example changes the manifest file to reference the ic_launcher icon in the mipmap/ folder.

...
<application android:name="ApplicationTitle"
         android:label="@string/app_label"
         android:icon="@mipmap/ic_launcher" >
         ...