Mobile application development is impossible without visual content. Graphic elements define the user's perception of the interface, creating atmosphere and improving navigation. In the Android Studio environment, working with graphics has its own characteristics that must be taken into account for correct display on various devices. Incorrectly adding resources can lead to build errors or incorrect display on screens with different pixel densities.
The process of integrating images involves not just copying files into the project folder, but also following strict rules for naming, choosing formats and optimizing weight. Modern versions of IDEs offer flexible tools for resource management, including support for vector graphics and responsive icons. You will have to understand the folder hierarchy res and understand the difference between raster and vector images.
In this material we will look in detail at all the ways to add graphics to your project. You'll learn how to avoid common beginner mistakes that often lead to an increase in APK file size. We will also touch on the topic of dark theme support and adaptation to different screen configurations, which is a quality standard for modern applications.
Resource folder structure and image types
Before dragging files into a project, it is important to understand the logical structure of resource storage in Android. All graphic elements are placed in the directory res, which is on the same level as the folder java or kotlin. Inside it there are several subfolders, each of which has its own strict purpose. Misunderstanding of this hierarchy is a common cause of compilation errors. Resource not found.
The main folder for regular images is called drawable. Background images, interface illustrations and other graphic elements that are not application icons are placed here. However, if your image is intended to be displayed as an application icon on the desktop, it must be placed in a folder mipmap. This separation is critical for the proper operation of device launchers.
Inside the folders drawable and mipmap you can often see additional directories with suffixes indicating screen density. For example, drawable-hdpi for high density screens or drawable-xhdpi for ultra-high density. Although modern tools allow you to use a single folder drawable, manual density control gives full control over picture quality on older devices.
When adding files, make sure that you use only lowercase letters, numbers, and underscores in file names. Spaces, capital letters, and special characters (such as a hyphen or period in the middle of a name) are strictly prohibited and will cause a build error.
⚠️ Attention: Never name resource files with Android reserved words such as
android,drawableorlayout. This will lead to a name conflict and the inability to compile the project.
The classic method of adding through Explorer
The most direct and understandable way to add an image is to use the file manager of your operating system. This method is suitable for those who prefer to work with files directly or want to bulk transfer a group of images from a graphics editor. You need to open the project folder through Windows Explorer, Finder on macOS, or Linux file manager.
Find the directory app/src/main/res. Inside it, select the desired folder, for example drawable. Just drag and drop your image files (PNG, JPG, WebP formats) into this folder. After copying the files, return to Android Studio. The development environment will automatically detect changes, but sometimes you need to synchronize the project.
To force the resource index to update, press a keyboard shortcut or use the menu. In most cases, just click File → Sync Project with Gradle Files. If files are not displayed in the Project window, try switching the project view to Project instead of Androidas the view Android hides some of the technical details of the folder structure.
This method is good for its simplicity, but it carries the risk of human error. You may accidentally put the file in mipmap instead of drawable or forget to optimize the image before copying. In addition, this approach makes it more difficult to manage image versions for different screen densities.
Before copying images into a project, be sure to compress them using services like TinyPNG. This will reduce the size of your APK without any visible loss of quality.
Using the Android Studio interface
A safer and recommended method is to use the built-in Resource Import Wizard. This tool not only copies the file, but also helps you configure its settings, check the name, and even convert the format. To use this method, right-click on the folder res in the project window.
In the context menu, select Newand then Image Asset (for icons) or simply drag the file into the IDE window if it is configured to accept resources. For regular images, the Drag-and-Drop method works best directly into the Android Studio project panel. When you drag a file, the IDE may prompt you to select a destination directory.
If you are using the menu New → Drawable Resource File, you create an XML file that references an image or describes a vector graphic. This is a more advanced approach that allows you to create adaptive resources. The Create New Resource dialog will ask you to specify the resource name and type.
The Icon Wizard Image Asset Studio is especially useful for generating responsive icons that look different on Android 8.0 and above. It allows you to load the original image and automatically creates masks and background layers required for modern Google Play standards.
Working with vector graphics (VectorDrawables)
In modern Android development, vector graphics have become the de facto standard for most interface elements. The format VectorDrawable allows you to store an image in the form of an XML code that describes paths and forms. The main advantage is scaling without loss of quality and minimal file size compared to raster analogues.
To add a vector image, prepare a file in SVG format in any graphics editor, for example Adobe Illustrator or Figma. In Android Studio, right-click on the folder drawable, select New → Vector Asset. A wizard will open where you can click the button Next and select a local SVG file.
The wizard will automatically convert the SVG to the native Android format. You can customize the size, color and name of the resource. After the process is completed, an XML file will appear in the folder drawable that can be used in layouts in the same way as a regular picture. This is ideal for menu icons, buttons and simple illustrations.
It is worth considering that support for complex vector effects may differ on very old versions of Android (below API 21). For such cases, the support library AndroidX provides backward compatibility, allowing you to use vectors even on legacy devices without converting to PNG.
⚠️ Attention: Do not use vectors for complex photographs or images with gradients and highly detailed shadows. Vector XML in such cases will be huge and will slow down the rendering of the interface.
Optimization and support for different screens
The Android ecosystem is fragmented: devices have screens from small smartphones to huge tablets with different pixel densities (DPI). To ensure your app looks sharp on any device, you need to provide images in multiple resolutions. The system will automatically select the appropriate resource depending on the characteristics of the user's screen.
There is a standard density scale that must be taken into account when preparing graphics. If you have a reference resolution (mdpi) image, you must create variations of it for other densities. Neglecting this rule will result in the system scaling pictures on the fly, which will cause blurring or artifacts.
| Screen density | Folder suffix | Scale multiplier | Resolution example |
|---|---|---|---|
| Low Density | ldpi |
0.75x | 36x36 px |
| Medium Density | mdpi |
1.0x (base) | 48x48 px |
| High Density | hdpi |
1.5x | 72x72 px |
| X-High Density | xhdpi |
2.0x | 96x96 px |
| XX-High Density | xxhdpi |
3.0x | 144x144 px |
By placing images in the appropriate folders (for example, res/drawable-hdpi), you guarantee crisp rendering. If a resolution is missing, Android will take the nearest larger one and scale it down, which is acceptable but not ideal. The opposite situation (enlarging a small image) is strictly unacceptable.
To simplify this task, you can use resource generation tools that automatically create all the necessary sizes from one high-quality source file. This saves time for the designer and developer, while ensuring a high quality user interface.
☑️ Image preparation checklist
Using images in code and XML
After resources are added to the project, their must be integrated into the application interface. In XML layouts, this is done using the android:src attribute for widgets ImageView or android:background to set the background. The file name is specified without the extension and folder prefix.
For example, if you added a file logo.png to a folder drawable, in XML you will refer to it as @drawable/logo. The system itself will find the file with the required extension in the corresponding density folder. This abstraction allows the developer not to think about physical paths to files.
In app code (Java or Kotlin), resources are accessed through a class R. This class is generated automatically and contains links to all project resources. To set an image in ImageView via code, use the method setImageResource.
imageView.setImageResource(R.drawable.logo) If you added a new image but see an "Unresolved reference" error, try building (Build → Make Project) to generate a new resource ID.
What to do if R.class is not is being updated?
Sometimes the IDE cache interferes with the correct generation of the R class. Try the following steps: File → Invalidate Caches / Restart. This will clear temporary files and force Android Studio to rescan the project resources.
Frequent errors and troubleshooting
Even experienced developers encounter problems when working with graphics. One of the most common mistakes is using invalid characters in the file name. Android is extremely sensitive to resource names: no capital letters, spaces or hyphens. Only Latin characters, numbers and underscores.
Another problem is memory "leak" due to loading images of too high a resolution into memory. If you load a 4000x3000 pixel photo into a small 50x50 pixel icon, you are wasting extra RAM, which may cause the application to crash (OutOfMemoryError). Always use the compression and resizing tools.
There are also path-related errors. Make sure that the files are located in src/main/res, and not just in the root of the module app. Files located outside the folder reswill not be generated into the class R and will not be available for use in layouts.
⚠️ Attention: The Android Studio interface and menu names may differ slightly in different versions of the IDE (Giraffe, Hedgehog, Koala). If you do not find a menu item, use the search by actions (Double Shift).
Proper organization of resources and their optimization is the key to a fast and stable application. Don't ignore creating versions for different screen densities.
Why doesn't Android Studio see the new image?
Most often the problem is in the cache. Try doing File → Sync Project with Gradle Files or Build → Clean Project. Also check the file name for prohibited characters.
Is it possible to use GIF animation in Android?
Yes, you can put the GIF in the drawable folder and use it in ImageView. However, for complex animations it is better to use AnimatedVectorDrawable or a library Lottieas they are more productive.
What is the difference between mipmap and drawable?
mipmap is intended exclusively for launcher icons, since these images are not deleted when changing the theme device. drawable Used for all other interface graphics.
How to add an image to Jetpack Compose?
Compose uses a modifier painterResource(id = R.drawable.image_name) inside the component Image. The logic for naming resources remains the same as in classic XML layouts.