Developing a mobile application is not only the code and operating logic, but also the visual representation that the user sees on his screen in the first place. The icon is the face of your product in the Google Play Store and on the home screen of the device. Android Studio provides powerful built-in tools for creating, editing and exporting graphic resources, which eliminates the need for the developer to manually adjust images to dozens of different resolutions.
The process of replacing a standard logo with a custom design requires a careful approach to the file formats and folder structure of the project. Modern versions of the operating system Android have strict requirements for graphics adaptability, so simply replacing a picture in a folder drawable is no longer enough for correct display on all devices. In this article, we will look in detail at how to properly implement a new visual style for your application using current IDE tools.
It is worth noting that Adaptive Icons introduced in Android 8.0 require the creation of two separate layers: foreground and backgroundthat fundamentally distinguishes them from static bitmap images of previous years. Understanding this architecture is critical, as ignoring layer separation will result in the icon not displaying correctly on new smartphones or the appearance of unsightly white borders around your logo. Adaptive Icons introduced in Android 8.0 require the creation of two separate layers: foreground and background. Graphics Asset Preparation and Requirements
Graphic Asset Preparation and Requirements
Before opening the tools Android Studio, you need to prepare the source image files in accordance with the Material Design guidelines. The icon must be in PNG or SVG format, have a square shape and have sufficient resolution for scaling. The optimal initial size is considered to be 1024x1024 pixels, which allows the system to automatically generate all the necessary densities.
It is important to consider safe zones, especially if you plan to use round or complex shapes. The system can apply various masks (circle, square, rounded square, teardrop), and if important logo elements extend beyond the central 66% circle, they may be cut off on some devices. Vector graphics (SVG) is preferable to raster as it does not lose quality when scaled.
⚠️ Attention: Do not use transparency in the background layer. The background should always be filled with a solid color or gradient, otherwise on devices with a dark interface theme the icon may become invisible or merge with the wallpaper.
When preparing assets, make sure that you comply with the following parameters for the source file:
- 🖼️ File format: PNG (uncompressed) or SVG (preferred).
- 📐 Canvas size: strictly 1024x1024 pixels.
- 🎨 Color model: RGB or RGBA (for PNG).
- 🚫 No unnecessary elements: remove shadows, highlights and text beyond safe limits zones.
If you only have a company logo without a background, create a separate file for the background or use a color code from the brand book. Asset Studio, the built-in IDE tool will allow you to combine these elements later, but the sources must be clean and high quality.
Using Image Asset Studio
The main tool for working with graphics in the development environment is Image Asset Studio. It allows you to visually customize the icon and automatically generate all the necessary resources for different screen densities (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi). To launch the asset creation wizard, you need to go to the project and find the folder res.
In the context menu of the folder res select item New, and then Image Asset. A configuration window will open, with type Launcher Iconsselected by default. This type is responsible for the main application icon, which is displayed in the launcher. Here you can select the image source: local file, clipart from the built-in library or text.
At the top of the wizard window you will see a preview of how the icon will look on different devices and in different forms. This allows you to immediately assess whether an important part of the logo is being cut off when applying a round mask. The switch Legacy allows you to see how the icon will look on older versions of Android (up to 8.0), where adaptive icons are not supported.
Layers are configured in the central part of the window. You can configure the Foreground Layer and Background Layer separately. For each layer, you can select the resource type (Image, Color, Clipart), change the scale (Scale) and position (Trim). After completing all the settings, click the button Next and then Finishto generate the files.
☑️ Check before generation
Structure of adaptive icons in Android
Starting with API version 26, the concept of adaptive icons has been introduced, which is based on dividing graphics into two independent layers. This is done so that smartphone manufacturers can apply their unique shapes of masks while maintaining brand recognition. In the project file system, this is implemented by creating a special resource like adaptive-icon.
The icon manifest file is usually called ic_launcher.xml and is located in the folder res/mipmap-anydpi-v26/. Inside this XML file are references to two other resources: one for the background and one for the foreground. This structure allows the system to dynamically change the crop shape depending on the design theme set by the user.
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"><background android:drawable="@color/ic_launcher_background"/>
<foreground android:drawable="@drawable/ic_launcher_foreground"/>
</adaptive-icon>
In the code example above, you can see that the background can be specified as a color (@color), and the foreground as a drawable resource. This allows for flexibility: you can easily change the background color depending on the season or event without having to redraw the logo itself. All density variations for these layers are stored in the corresponding folders mipmap with density suffixes.
| Parameter | Description | Location in the project |
|---|---|---|
| Manifest File | XML file describing the structure of the layers | res/mipmap-anydpi-v26/ic_launcher.xml |
| Foreground | Main logo image | res/drawable/ or mipmap |
| Background | Color or background image | res/values/colors.xml or drawable |
| Legacy Icon | Static icon for Android 7 and below | res/mipmap-hdpi/ and other densities |
Understanding this structure is necessary for manual editing if the automatic wizard did not cope with the task or if complex customization is required. XML markup Adaptive icons are standard and should not be broken, otherwise the application may crash when launched on some devices.
Customization application manifest
After creating or replacing graphic resources, you need to make sure that they are correctly registered in the application manifest file AndroidManifest.xml. It is this file that tells the operating system which resource to use as the main icon to launch the application. An error in the path or resource name will cause the standard Android robot to be displayed.
Open the manifest file in the directory app/src/main/ and find the tag <application>. It must contain the attributes android:icon and android:roundIcon. To support all versions of the OS, it is recommended to use links to resources in the folder mipmapas they are not compressed and are optimized for launchers.
⚠️ Attention: Make sure that the paths in the attributes
android:iconandandroid:roundIconpoint exactly to XML files of adaptive icons (for API 26+), and not directly to images. This will ensure that responsiveness works correctly.
An example of a correct entry in the manifest:
<applicationandroid:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
... >
If you are creating an icon from scratch, Android Studio will automatically add these lines. However, if you have renamed resource files or are using different icons for different build variants, you will have to manually check the corresponding manifest files for each build variant. This is a common mistake when scaling a project.
What to do if the icon does not change?
If after all the manipulations the icon remains the same, try clearing the build cache. Go to Build -> Clean Project and then Build -> Rebuild Project. Uninstalling and reinstalling the application on the emulator or device can also help, since launchers often cache graphics.
Support for legacy devices and round icons
Despite the dominance of modern smartphones, a significant portion of users still operate on devices with Android versions below 8.0. For them, the concept of adaptive icons does not exist, and the system expects to see a static bitmap image. Therefore, folders mipmap should always contain files ic_launcher.png for all required screen densities.
The round icons that are used on devices with round screens (for example, smart watches or some Samsung phones) deserve special attention. A separate resource is created for them ic_launcher_round.xml, which also references the same foreground and background layers, but may have a different centering or scaling.
- 📱 Legacy: Requires PNG files in the mipmap-mdpi, hdpi, xhdpi, etc. folders.
- ⌚ Round: Special XML resource for round screens.
- 🔄 Consistency: The visual style should be the same for all versions.
When used Image Asset Studio the tool automatically generates both legacy and round versions, if the corresponding options have not been disabled. Checking the presence of files in folders mipmap-hdpi, mipmap-xhdpi and others is a mandatory step before releasing the application.
Use vector drawables for the foreground layer if your logo does not contain complex gradients. This will significantly reduce the size of the APK file and ensure perfect clarity on screens with any DPI.
Common errors and ways to solve them
The process of replacing an icon seems simple, but developers often encounter problems that are not obvious at first glance. One of the most common mistakes is using the wrong background format or breaking the structure of the responsive icon XML file. This can lead to the icon being displayed correctly on some devices, but turning into a black square on others.
Another problem is related to caching. Emulators and physical devices often aggressively cache launcher resources. If you replace the icon, but see the old one, do not rush to rewrite the code. Try to completely remove the application from the device, clear the launcher data in the system settings, or simply restart the device.
It is also worth mentioning the problem with transparency. As already mentioned, the background should not be transparent. If you're using a PNG for the background, make sure the alpha channel is filled with color. Otherwise, when switching the system theme (light/dark), the icon may become unreadable.
⚠️ Attention: Development tool interfaces and exact file paths may change slightly with the release of new versions of Android Studio. Always check the official documentation if the standard paths do not match your project.
To diagnose resource problems, you can use the tool App Inspection or simply run the application on an emulator with different versions of the Android API. This will allow you to immediately see how the icon behaves in different environmental conditions.
The main key to success is the use of the built-in Image Asset Studio wizard, which automatically creates all the necessary layers, densities and XML configurations, minimizing the risk of human error.
Why is the icon displayed as a black square on Android 8+?
Most likely, the structure of the adaptive icon is broken. Check the XML file in the folder mipmap-anydpi-v26. Make sure that the tags foreground and background refer to existing resources and that the background resource is not transparent.
Is it possible to use one icon for all screen densities?
Technically, you can put one image in all folders, but this is a bad practice. The image will appear blurry on high resolution screens (xxhdpi, xxxhdpi) or take up too much space on older devices. Always generate resources for all standard densities.
How to change the icon only for the debug version of the application?
Use flavor-specific resources. Create a separate resource folder for the flavor debug (for example, src/debug/res) and put an icon with the same name there. The Gradle builder will automatically replace the asset for the debug version only.
Do you need to manually create mipmap folders for each density?
No, if you use Image Asset Studio, it will create them automatically. If you do this manually, then for testing it is enough to put the resource in mipmap-mdpi, the system itself will scale it, but the quality will be low. All densities are needed for release.