Android ImageView example

In Android, you can use “android.widget.ImageView” class to display an image file. Image file is easy to use but hard to master, because of the various screen and dpi in Android devices.

Note
Please refer to this official Android’s “Drawable Resource” and “Screen Support” article for better understand of how image works in Android.

In this tutorial, we didn’t go in deep about dpi and various screen issue, we just use ImageView to display a “png” image, when user click on a button, it will change to another “png” image.

P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.

1. Add Image to Resources

Put your images into folder “res/drawable-ldpi“, “res/drawable-mdpi” or “res/drawable-hdpi“.

See figure below, no matter which folder you put, Android will find your image automatically. In this case, both “android.png” and “android3d.png” images are used for demonstration.

android image drawable
Note
Again, read official Android’s “Drawable Resource” and “Screen Support” article to understand what is dpi and resources in Android.

2. Add ImageView

Open “res/layout/main.xml” file, just add an ImageView and Button for demonstration. By default, imageView1 will display “android.png”.

File : res/layout/main.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/android" />

    <Button
        android:id="@+id/btnChangeImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Change Image" />
    
</LinearLayout>

3. Code Code

Simple, when button is clicked, change it to “android3d.png”.

File : MyAndroidAppActivity.java


package com.mkyong.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ImageView;
import android.view.View;
import android.view.View.OnClickListener;

public class MyAndroidAppActivity extends Activity {

	Button button;
	ImageView image;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		addListenerOnButton();

	}

	public void addListenerOnButton() {

		image = (ImageView) findViewById(R.id.imageView1);

		button = (Button) findViewById(R.id.btnChangeImage);
		button.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				image.setImageResource(R.drawable.android3d);
			}

		});

	}

}

4. Demo

Run the application.

1. Result, “android.png” is displayed.

android imageview demo1

2. Click on the button, image will changed to “android3d.png”.

android imageview demo2

Download Source Code

Download it – Android-ImageView-Example.zip (57 KB)

References

  1. Android ImageView example
  2. Android drawable resource
  3. Another Android screens support

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
38 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
38 Comment authors
Guy286Trang ??didi kikosonuatul sewag Recent comment authors
newest oldest most voted
trackback
How do I draw an image inside an Android master-detail app? : Android Community - For Application Development

[…] Tutorial on using ImageView can be found here: http://www.mkyong.com/android/android-imageview-example/ […]

Guy286
Guest
Guy286

Very Good Example

Trang ??
Guest
Trang ??

How do i get name of picture? Thanks!

didi kiko
Guest
didi kiko

could someone help me with a tutorial that teaches the addition of a photo in the SQLite database from a registration form. thank you in advance

didi kiko
Guest
didi kiko

how to ensure that when I click ChangeImage upload from my storage. memory card or camera?

sonu
Guest
sonu

not working huh…..

atul sewag
Guest
atul sewag

package com.example.thoughoftheday;

import java.io.FileNotFoundException;

import java.io.InputStream;

import java.util.Calendar;

import android.app.Activity;

import android.content.Intent;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.net.Uri;

import android.os.Bundle;

import android.provider.CalendarContract.Calendars;

import android.widget.AnalogClock;

import android.widget.ImageView;

import android.widget.TextView;

public class MainActivity extends Activity {

public AnalogClock A;

public TextView a, b, c;

public ImageView imageView;

// private final int SELECT_PHOTO = 1;

// private ImageView imageView;

public Calendar cal;

public String[] arr_month = { “Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”,

“Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec” };

public int[] images = {R.drawable.dow,R.drawable.th};

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

cal = Calendar.getInstance();

// imageView = (ImageView) findViewById(R.id.imageView);

a = (TextView) findViewById(R.id.date);

b = (TextView) findViewById(R.id.month);

c = (TextView) findViewById(R.id.year);

imageView = (ImageView) findViewById(R.id.thought);

a.setText(“” + cal.get(Calendar.DATE));

b.setText(arr_month[cal.get(Calendar.MONTH)]);

c.setText(“” + cal.get(Calendar.YEAR));

imageView.setImageBitmap(images[cal.get(Calendar.DAY_OF_YEAR)]);

mounika banuri
Guest
mounika banuri

how an imageview can be fallen when clicked a button ?
pls anyone can help me?

NastyNash
Guest
NastyNash

Thanks. Simple and easy. I miss an example like yours in developer.android.com concerning the imageView.

Wannabe Geek
Guest
Wannabe Geek

You are Awesome

muhammed hassan
Guest
muhammed hassan

thanks mkyong, that was helpful and straight to the point

Sesh
Guest
Sesh

package com.example.myandroidview; import android.os.Bundle; import android.app.Activity; import android.view.View; import android.widget.ImageView; import android.view.View.OnClickListener; public class MyAndroidAppActivity extends Activity { ImageView imageview; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my_android_app); addListenerOnButton(); } public void addListenerOnButton() { imageview =(ImageView) findViewById(R.id.imageView1);****** Here I am getting error.imageView1 field cannot be resolved or a field. Please help me. **** } My R.Java file it is declared. public static final class string { public static final int action_settings=0x7f050001; public static final int app_name=0x7f050000; public static final int hello_world=0x7f050002; public static final int imageView1=0x7f050003; public static final int btnChangeImage=0x7f050004; } My string.xml file Myandroidview Settings Hello world! Image… Read more »

hossein
Guest
hossein

Good & Simply.
Thank You very much.

ahmad bilal khan
Guest
ahmad bilal khan

I dont have any imageview in my XML file .. and i wan to add an image through coding in my java file .. i am doing this

ImageView iv=new ImageView(this);
iv.setImageResource(R.drawable.anyimage);
iv.setX(1);
iv.setY(1);

it is not working … no image is appearing on my screen .. please help me out with this one ???

ahmad bilal khan
Guest
ahmad bilal khan

I dont have any imageview in my XML file .. and i wan to add an image through coding in my java file .. i am doing this
ImageView iv=new ImageView(this);

iv.setImageResource(R.drawable.anyimage);
iv.setX(1);
iv.setY(1);

it is not working … no image is appearing on my screen .. please help me out with this one ???

Vaibhavi
Guest
Vaibhavi

Sir, Is it possible to insert the whole ImageView mannually ? By java file ?
How ?

kenyan kid
Guest
kenyan kid

what if i want the image to change automatically after a second or so

divanshu
Guest
divanshu

nice example , easy to accept this concept.

Raul
Guest
Raul

Thanks… I’d erase de line ”android:src=”@drawable/android” in the XML file. You gave the address after in the java code ‘image.setImageResource(R.drawable.pic_in_drawable_folder)’.
Thanks

Devyn
Guest
Devyn

Great tutorial! One note you may have to cntrl click the folder you just added you images to and refresh it to get the images to show up!

rupinderjeet
Guest
rupinderjeet

Help me recover the error

package com.rupinderjeet.GothGirls;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ImageView;
import android.view.View;
import android.view.View.OnClickListener;

public class MainActivity extends Activity
{

Button button;
ImageView image;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

addListenerOnButton();
}

public void addListenerOnButton()

{

; image = (ImageView)findViewById(R.id.imageView1); button = (Button)findViewById(R.id.nextImage); button.setOnClickListener(new OnClickListener() { @Override public void OnClick(View v) { image.setImageResource(R.drawable.ic_launcher); } }); }}

muthuraj
Guest
muthuraj

thank you….. this is very helpful for me……

Dave Lumley
Guest
Dave Lumley

Perfect Example – had to mess about with Java compatibility though. See –
http://stackoverflow.com/questions/7637144/android-requires-compiler-compliance-level-5-0-or-6-0-found-1-7-instead-plea

I also re pasted code in from the web site ( was using the downloaded example ) to trigger a recompile

ravi
Guest
ravi

nice and simple

JAVAD
Guest
JAVAD

thank you sir.

DulciePercy
Guest
DulciePercy

This is great and I understand it. But the line

 button = (Button) findViewById(R.id.btnChangeImage); 

breaks it. I get “R cannot be resolved or is not a field”. There is no mention of the button in R.java

Can anybody help?
Thanks

DulciePercy
Guest
DulciePercy

OK it runs with the downloaded version, but can’t for the life of me work out what was wrong. I did have to delete @override in this

@Override
			public void onClick(View arg0) {
Loi Dang Thanh
Guest
Loi Dang Thanh

Thank you , sir , it’s really basic but also useful.

shivani
Guest
shivani

thanxx

bhavika
Guest
bhavika

thank you sir………….

Ajit
Guest
Ajit

Awesome:):) Your way of explanation is very nice…

Nguy?n V?n Toàn
Guest
Nguy?n V?n Toàn

This is what i was looking for..thanks!