The author

Hello everyone, my name is Jack Feng; I graduated from Guangdong University of Technology with a master’s degree in 20 years. I joined the 37 Mobile Games Android team in June 2020. Currently, I am mainly responsible for the development of overseas game release and Android.

Series directory

Game optimization series a: overseas Google application adaptation related

Game Optimization Series 2: Creating ICONS in Android Studio

Game Optimization Series 3: Solving the Black screen problem in Unity games

This article directory

1. About Image Asset Studio 2. Adaptive and older launcher ICONS 3. Action bar and TAB ICONS 4

background

Google has introduced circular ICONS since Android8.0 and provides tools for making them in AndroidStudio. So what happens if you don’t make a circular tool? On some devices, ICONS may have adaptation problems and the UI is not beautiful. This article will introduce you to the Image Asset Studio tool. How to create a circular icon

1. About Image Asset Studio

Android Studio includes a tool called Image Asset Studio that helps you generate your own app ICONS based on Asset ICONS, custom images, and text strings. It generates a set of ICONS at the appropriate resolution for each pixel density your application supports. Image Asset Studio places the newly generated ICONS in a density-specific folder under the RES/directory in the project. At runtime, Android uses the appropriate resources based on the screen density of the device on which the application is running.

Image Asset Studio helps you generate the following icon types:

  • Initiator Icon

  • Action bar and TAB ICONS

  • Notification icon

Run Image Asset Studio

To start Image Asset Studio, follow these steps:

  • In the Project window, select the Android view.

  • Right-click on the RES folder and select New > Image Asset in order.

2. Adaptive and older launcher ICONS

After opening Image Asset Studio, you can add adaptive and legacy ICONS by following these steps:

(1) From the Icon Type field, select Launcher Icons (Adaptive & Legacy).

(2) Select a resource Type from Asset Type in the Foreground Layer TAB, and specify the resource in the following fields:

  • Select Image to specify the path to the Image file.

  • Select Clip Art to specify the image in the Material Design icon set.

  • Select Text to specify the Text string and select the font.

(3) Select a resource Type from the Asset Type of the Background Layer tag and specify the resource in the fields below. You can select a color or specify an image as the background layer.

(4) In the Legacy TAB, review the default Settings and confirm that you want to generate ICONS for older versions, circles, and the Google Play Store.

(5) (Optional) Change the name and display Settings of each icon in the Foreground Layer and Background Layer tabs:

  • Name – Enter a new Name if you do not want to use the default Name. If the resource name already exists in the project (indicated by an error at the bottom of the wizard), it will be overwritten. The name can contain only lowercase characters, underscores (_), and digits.

  • Trim – To adjust the margin between icon shapes and borders in the source resource, select Yes. This will remove the transparent space while leaving the aspect ratio unchanged. To keep the source unchanged, select No.

  • Color – To change the Color of the Clip Art or Text icon, click on this field. In the Select Color dialog box, specify a Color, and then click Choose. The new value is displayed in this field.

  • Resize – Use the slider to specify a scaling factor (expressed as a percentage) to Resize an Image, Clip Art, or Text icon. Disables this control for the background layer when specifying the Color resource type.

(6) Click Next.

(7) (Optional) Change the resource directory. Select the source source set to which you want to add the image resource: SRC /main/res, SRC /debug/res, SRC /release/res, or custom source set. The primary source set applies to all build variants, including debug and release. The debug and release source set replaces the main source set and applies to a build. The debug source set is used for debugging only. To define a new source set, choose File > Project Structure > APP > Build Types. For example, you can define a BETA source set and create a version icon that displays “BETA” text in the lower right corner. For more details, see Configuring Build variants.

(8) Click Finish. Image Asset Studio adds images to the MiPmap folder for different densities.

Example 1:

Finally generate material:

Effect:

3. ICONS in the operation bar and TAB page

After opening Image Asset 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 a resource Type from Asset Type and specify the resource in the following fields:

  • In the Clip Art field, click the corresponding button.

  • In the Select Icon dialog box, Select a stock Icon, and then click OK.

  • In the Path field, specify the Path and filename of the image. Click on the… To use the dialog box.

  • In the Text field, enter a Text string and select a font. The icon appears in the Source Asset area on the right and in the preview area at the bottom of the wizard.

(3) (Optional) Change the name and display options:

  • Name – Enter a new Name if you do not want to use the default Name. If the resource name already exists in the project (indicated by an error at the bottom of the wizard), it will be overwritten. The name can contain only lowercase characters, underscores (_), and digits.

  • Trim – To adjust the margin between icon shapes and borders in the source resource, select Yes. This will remove the transparent space while leaving the aspect ratio unchanged. To keep the source unchanged, select No.

  • Padding-to adjust the inner margins of all four sides of the source, move the slider. Choose a value between -10% and 50%. If Trim is also selected, Trim first.

  • Theme – Select HOLO_LIGHT or HOLO_DARK. Alternatively, to specify a Color in the Select Color dialog box, Select CUSTOM, and then click the CUSTOM Color field. Image Asset Studio creates the icon inside a transparent square, so there are some inner margins on the edges. The inside margin provides plenty of room for the standard shaded icon effect.

(4) Click Next.

(5) (Optional) Change the resource Directory: Res Directory – Select the source code set to which you want to add the image resource: SRC /main/ Res, SRC /debug/ Res, SRC /release/ Res or user-defined source code set. The primary source set applies to all build variants, including debug and release. The debug and release source set replaces the main source set and is applied to a build. The debug source set is used for debugging only. To define a new source set, choose File > Project Structure > APP > Build Types. For example, you can define a Beta source set and create a version icon that contains the text “Beta” in the lower right corner. For more details, see Configuring Build variants. The Output Directories area shows images and which folders they will appear in the Project Files view of the Project window.

(6) Click Finish. Image Asset Studio adds images to the Drawable folder for different densities.

4. Notification icon

Notifications are messages that you can display to users outside of the normal interface of your application. Image Asset Studio places the notification icon in the appropriate location in the res/drawable density/ directory:

  • For Android 2.2 (API level 8) and below, ICONS are placed in the res/drawable density/ directory.

  • For Android 2.3 through 2.3.7 (API levels 9 through 10), ICONS are placed in the res/drawable-density-v9/ directory.

  • For Android 3 (API level 11) and later, the ICONS are placed in the res/drawable-density-v11/ directory.

  • If your application supports Android 2.3 to 2.3.7 (API levels 9 to 10), Image Asset Studio will generate a gray version of the icon. Later versions of Android use white ICONS generated by Image Asset Studio.

5. Production process

After opening Image Asset Studio, you can add the notification icon by following these steps:

(1) In the Icon Type field, select Notification Icons. (2) Select a resource Type from Asset Type and specify the resource in the following fields:

  • In the Clip Art field, click the corresponding button.

  • In the Select Icon dialog box, Select a stock Icon, and then click OK.

  • In the Path field, specify the Path and filename of the image. Click on the… To use the dialog box.

  • In the Text field, enter a Text string and select a font. The icon appears in the Source Asset area on the right and in the preview area at the bottom of the wizard.

(3) (Optional) Change the name and display options:

  • Name – Enter a new Name if you do not want to use the default Name. If the resource name already exists in the project (indicated by an error at the bottom of the wizard), it will be overwritten. The name can contain only lowercase characters, underscores (_), and digits.

  • Trim – To adjust the margin between icon shapes and borders in the source resource, select Yes. This will remove the transparent space while leaving the aspect ratio unchanged. To keep the source unchanged, select No.

  • Padding-to adjust the inner margins of all four sides of the source, move the slider. Choose a value between -10% and 50%. If Trim is also selected, Trim first.

Image Asset Studio creates the icon inside a transparent square, so there are some inner margins on the edges. The inside margin provides plenty of room for the standard shaded icon effect.

(4) Click Next.

(5) (Optional) Change the resource directory:

  • Res Directory – Select the source code set to which you want to add the image resource: SRC /main/ Res, SRC /debug/ Res, SRC /release/ Res, or user-defined source code set. The primary source set applies to all build variants, including debug and release. The debug and release source set replaces the main source set and is applied to a build. The debug source set is used for debugging only. To define a new source set, choose File > Project Structure > APP > Build Types. For example, you can define a Beta source set and create a version icon that contains the text “Beta” in the lower right corner. For more details, see Configuring Build variants.

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

(6) Click Finish. Image Asset Studio adds images to the Drawable folder for different densities and versions.

Example 1: Select an icon in the Clip Art field

Results 1:

Example 2: In the Text field, enter the character “37”

Effect 2:

Example 3: In the Path field, specify the Path and filename of the picture

Effect of 3: