Android ImageView


Android ImageView widget allows us to add good looking & vivid images in your Application. Android ImageView is enriched with different configuration options to support different size & densities of screens. We simply have to create separate images inside drawable folders supporting various screens & Android System automatically selects the best image from all the available options.



Adding Images to our Project supporting multiple Screens  :-

Expanding res folder you will see multiple drawable folders named as drawables-hdpi / ldpi / mdpi / xhdpi , etc. All these folders are based on screen density. We need to make multiple copies with different resolution for same image & place them in these folders. We should maintain a ratio for all images as follows :

  • xhdpi : 2 (e.g. ic_launcher.png – 96 * 96)
  • hdpi : 1.5 (e.g. ic_launcher.png – 72 * 72)
  • mdpi : 1   (e.g. ic_launcher.png – 48 * 48) – baseline for all images
  • ldpi : 0.75 (e.g. ic_launcher.png – 36 * 36)

android imageview drawable supporting multiple screens


Make it clear that these images are based on densities & not on screen length-width. Say for e.g. device-1 having very fine & large number of dots per inch with 5.4 Inch screen will load xHDPI, whereas device-2 with very low density dots per inch despite being 10 Inch will still load LDPI image.



DownloadSource Code :

Now Let us work on Project : (Refer – Configuring Existing AndroidStudioProject) ImageView which you might have downloaded from above or you can follow the scripts below by copying it to implement in your Project. To launch Downloaded project, Extract the zip, copy it into AndroidStudioProjects. Now from Android Studio click open Existing Android Studio Project and select the path to extracted file we just copied in AndroidStudioProjects directory. If Sync SDK path prompt comes just click OK and you are ready to work. If still you get error check for AndroidStudioProjects/ImageView/app/build.gradle , it will contain different SDK Version. Change it to SDK Version which you have.



1. activity_main.xml : Layout file

<LinearLayout xmlns:android=""

<!-- Adding Image designating it from Drawable Folder -->    
<!-- Adding Image with Background Color -->    
        android:background="#FFAA2A" />
<!-- Adding Image which will call "showImage" method on clicking it -->    
		android:text="Click our 3rd Image to add image below"/>    
<!-- Adding empty ImageView which will get filled when we click 3rd image from -->    


Explaining above Code :

  •  Line 9-13  We have added our 1st ImageView. Setting it layout height-width to wrap content which means that it will occupy the screen dynamically as per size of the image. android:src=”@drawable/ic_launcher”  i.e. providing ImageView with path of our image ic_launcher which is inside drawable folder.
  • Line 17-22  We declared our 2nd ImageView in similar manner we declared 1st ImageView. Just we have added background to it in form of 6- digit Hexadecimal Colour Code.
  • Line 26-31 We have added our 3rd ImageView which will listen to user-click. When we click, it will invoke method written inside onclick  i.e. ‘showImage‘ method. Inside this we have a code which adds image to our 4th ImageView from Java file.
  • Line 42-45 Over here we have just declared an empty ImageView. We will fill this with image when user clicks on 3rd-Image from method ‘showImage’ inside file.




package com.nestedif.imageview;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends Activity {

	ImageView img_view4 ;
	protected void onCreate(Bundle savedInstanceState) {
		img_view4 = (ImageView) findViewById(;
	//	This method will be called when we click our 3rd imageview
	public void showImage(View v)
		//	This will add Image to our 4th ImageView 


Explaining above Code :

  • Line 11 & 18 Initially we have declared our 4th ImageView in, then linked it with ImageView we added in our activity_main.xml Layout file.
  • Line 24 We have made a method which will be invoked when we click on 3rd Button. This method will add image to our 4th ImageView which is empty so far.
  • Line 27 Over here we are adding image to 4th ImageView. In order to use images of drawable folders which are inside ‘res’ ( Resource ) folder, we need to use method setImageResource(R.drawable.ImageName). So in our case it is setImageResource(R.drawable.adt).
  • You will note a text ( LDPI / MDPI / HDPI / XHDPI ) to top-left corner of the 4th image, this will make you clear that which image has been loaded in your App based on your device. Change the device screen density of your AVD & you will see that without doing anything, system will select the correct option automatically.



Final Output :

android imageview                                        android imageview after clicking 3rd image



Do It Yourself :

Create AVD with different screen density & run this application & see how images are loaded. Make few more images supporting all densities and add them to this project. This will make you clear on how to develop your app. supporting various devices.


Trouble-Shooting :

  • GIF Images are not showing animations as they usually display in web-browsers  or  Animated GIF are shown as a still image. 
    In android you won’t be able to use GIF images for animations. Instead you will have to animate in separate manner. This will be taught to you later.
  • PSD Images are not working 
    You will not be able to use PSD images directly, convert them into PNG & then use them.Or simply develop images directly in PNG format


Report Errors + Bugs & Become Insider for

We would like to hear you, if you find any error or misspelled phrase while reading our tutorials. By reporting mistakes through email to you could help other peers.