Developing a mobile application is impossible without visual design, and images play a key role here. Beginners often encounter difficulties when trying to figure out exactly where to place the file so that it is displayed correctly on the device screen. The process seems simple, but Android Studio has a strict resource structure, violation of which leads to compilation errors or incorrect display of the interface.
Depending on the type of image - raster or vector - the approach to its integration into the project changes. Modern versions of the development environment offer convenient Drag-and-Drop tools, but understanding the internal structure of folders remains a critical skill for any developer. In this article, we'll go into detail about all the ways to import graphics to make your interface look professional. res remains a critical skill for any developer. In this article, we will go into detail about all the ways to import graphics to make your interface look professional.
Incorrect file placement can result in the application only working on devices with a certain pixel density. To avoid such problems, it is necessary to clearly distinguish between folders for launch icons and content within the application. Let's move on to the practical steps.
Preparing graphic assets before importing
Before opening your project, make sure your images are optimized. The use of “heavy” files directly affects the APK size and screen loading speed. For raster graphics, it is recommended to use PNG or WebPformats, as they provide better compression without visible loss of quality compared to JPEG.
It is important to prepare in advance versions of the image for different screen densities. Although modern tools can automate this process, understanding the underlying standards will help you avoid artifacts. You will need files with different resolutions that meet standard density qualifiers.
- 📱 mdpi — base density (160 dpi), 1x reference size.
- 📲 hdpi — high density (240 dpi), scale 1.5x of base.
- 🖥️ xhdpi — ultra high density (320 dpi), scale 2x.
- 💻 xxhdpi —very high density (480 dpi), scale 3x.
If you have only one high-resolution image, do not rush to copy it blindly into all folders. It is better to use built-in converters or online tools to generate a resource grid. This will save space in the memory of the end user's device.
Import via Image Asset Studio
The most reliable and recommended way to add icons and graphic elements is to use the wizard Image Asset Studio. This tool automatically creates the necessary folders and generates image variants for all supported screen densities. To run it, right-click on the folder res in the project window.
In the context menu, select the path New → Image Asset. A configuration window will open where you can select the image source: disk file, clipart or text. The wizard will immediately show a preview of how the icon will look in various system contexts, for example, in the notification panel or on the desktop.
⚠️ Attention: When creating the application icon (Launcher Icon), the wizard automatically places the files in the folder
mipmap, and notdrawable. Do not move them manually, as the Android system expects to find launcher icons in mipmap in order to work correctly on different OS versions.
After setting the parameters, click Next and then Finish. Android Studio will independently create a directory structure, such as mipmap-hdpi or mipmap-xxhdpi, and distribute the files. This ensures that a low-resolution device will not load an image weighing 500 KB.
☑️ Import quality control
Manually adding to the Drawable folder
For ordinary images used in the interface (background, photographs, decorative elements), the folder drawableis most often used. You can simply drag and drop the file from your operating system's explorer directly into the res/drawable folder inside Android Studio. However, a more controlled method is to use the context menu.
Right-click on the folder drawable, select New → Drawable resource file. In the dialog that opens, enter the name of the resource. Remember that the file name must contain only lowercase Latin letters, numbers and underscores. Using capital letters or spaces will cause a compilation error.
After creating the stub file, you can replace its contents by copying your image there, or simply drag the image into the created folder, confirming the replacement. If you add an image manually without the Asset Wizard, you will have to create qualifier folders for different screens yourself if you want to support scaling.
Use WebP format instead of PNG for color images. It provides 25-35% better compression with the same visual quality, which is critical to the size of the final application.
When copying manually, make sure you do not break the structure of the project. The file must be located strictly inside app/src/main/res/drawable. If you put it in java or another directory, the compiler simply will not see the resource, and the method R.drawable.image_name will not work.
Working with vector graphics (VectorDrawable)
Vector graphics are becoming a standard in Android development, as they scale without loss of quality and takes up minimal space. The format VectorDrawable allows you to describe an image using XML code rather than a pixel grid. This is ideal for icons, logos and simple illustrations.
To add a vector, use the same Image Asset wizard, selecting Type Vector Asset. You can upload a file SVG or select an icon from the built-in Material Design library. Android Studio converts SVG into a native XML format that the platform understands.
| Resource type | File format | Best use | Scalability |
|---|---|---|---|
| Raster (Raster) | PNG, JPG, WebP | Photos, complex textures | Loses quality when enlarged |
| Vector (Vector) | XML (SVG) | Icons, logos, UI elements | Ideal at any resolution |
| Adaptive Icon | XML + PNG | Application icon (Android 8.0+) | Depends on the device mask |
Using vectors simplifies dark theme support. You can programmatically change the color of a vector image via an attribute android:tint in XML or in Java/Kotlin code, without creating multiple versions of the image in different colors. This significantly reduces the number of files in the project.
Limitations of vector graphics
Vectors are not suitable for complex photographs or images with a lot of gradients and shadows. In such cases, the XML file will become huge and rendering will be slower. Use raster for photos.
Setting up links in XML layouts
After the image has been added to the project, it needs to be displayed in the interface. Open the layout file (usually located in res/layout) and find the component ImageView. To set the image source, use the android:src or android:background.
attribute. The link syntax looks like @drawable/filename. Please note that the file extension (for example, .png) is not specified in the link. If you added a picture logo.png to the drawable folder, in the code you will refer to it as @drawable/logo.
<ImageViewandroid:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo"
android:contentDescription="@string/desc_logo" />
Always fill in the attribute android:contentDescription. This is critical for accessibility, allowing screen readers to describe the image to visually impaired users. If the picture is purely decorative, set this value to @null.
Frequent errors and optimization of resources
One of the most common mistakes is the lack of qualifiers density. If you put the image only in drawable (which is equivalent to drawable-anydpi), the system will scale it on the fly for each device. This can lead to blur on high DPI screens or excessive memory consumption.
Also, developers often forget about the tool Lint. It automatically analyzes the project and warns about unused resources or images that can be compressed. Running code reviews regularly helps keep your project clean. Ignoring Lint warnings can bloat your app's size by megabytes.
⚠️ Attention: Android Studio interface and menu names may vary slightly between versions (Giraffe, Hedgehog, Jellyfish). If you do not find a menu item, use the search in settings (Double Shift) and enter the name of the action.
For optimization, you can enable resource compression in the file build.gradle. Adding the parameter shrinkResources true to the block buildTypes will allow you to remove unused images when building the release version. This will automatically reduce the size of the APK without interfering with the code.
Proper organization of resources (separation into mipmap and drawable, use of vectors) is the foundation of application performance, and not just the aesthetics of the code.
Questions and answers (FAQ)
Why is my image not displayed in (Preview)?
Check the file name. It should consist only of lowercase letters of the Latin alphabet, numbers and an underscore. If the name contains capital letters, hyphens, or spaces, the resource will not compile. Also make sure that the file is in the folder res/drawableand not in assets.
What is the difference between the mipmap and drawable folders?
The folder mipmap is intended exclusively for application icons (launcher icons), which should remain in high quality regardless of the settings deleting resources. The folder is used for all other interface images and can be optimized by the system. How to add an image programmatically in Java or Kotlin? Use the method for the ImageView object. For example: drawable used for all other interface images and can be optimized by the system.
How to add an image programmatically in Java or Kotlin?
Use method setImageResource(R.drawable.image_name) for the ImageView object. For example: imageView.setImageResource(R.drawable.my_image);. Make sure you have imported the correct R class from your application package.
Is it possible to use SVG directly in Android Studio?
Natively Android does not render .svg files directly in layouts. They must be converted to VectorDrawable (XML) format using the Image Asset Studio wizard or online converters before using them in the project.