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
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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

  • Pingback: electrician pouch with suspenders()

  • Pingback: house blue()

  • Pingback: plumber local()

  • Pingback: locksmith las vegas yelp()

  • Pingback: anchor()

  • Pingback: electrical jobs in dublin()

  • Pingback: water ionizer pay plan loans()

  • Pingback: alkaline water brands()

  • Pingback: parking()

  • Pingback: alkaline water benefits()

  • Pingback: laan penge billigt()

  • Pingback: water ionizer()

  • Pingback: fue.mobi()

  • Pingback: car parking()

  • Pingback: lan penge online nu()

  • Pingback: DIRECTV channels()

  • Pingback: tv packages()

  • Pingback: get satellite tv()

  • Pingback: free movie downloads()

  • Pingback: weight loss techniques()

  • Pingback: Blue Coaster33()

  • 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
    Next

    }

  • http://hossein.kharazi.net hossein

    Good & Simply.
    Thank You very much.

  • 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

    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

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

  • kenyan kid

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

  • divanshu

    nice example , easy to accept this concept.

  • 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

  • Pingback: How do I draw an image inside an Android master-detail app? : Android Community - For Application Development()

  • 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!

  • http://fb.com/hansdinosourlove 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

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

  • 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

    nice and simple

  • JAVAD

    thank you sir.

  • http://[email protected] 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

    • http://[email protected] 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) {
  • http://None Loi Dang Thanh

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

  • shivani

    thanxx

  • bhavika

    thank you sir………….

  • Ajit

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

  • Nguy?n V?n To├án

    This is what i was looking for..thanks!

  • manikandan

    in this line image.setImageResource(R.drawable.android3d); i have received nullpointer exception .. pls any one help me

    • http://www.rajnikant.com Tera Baap

      tu khud ek exception wo bhi nullpointer

  • Pol

    thanks! :-)

    Pol

  • Samad

    This is what i was looking for..thanks

  • Pawel

    Hi, great tutorial, but tell me please what are parameters of emulator. When im trying to run it, i get everytime exception with one action “force close”

    • Jaydeep

      you have error in code thats way its emulator gives you force close message.

  • Dennis

    Thank you :) . Nice tutorial for image View

  • xyz

    if you want the images to change repeatedly , then ???

  • tony turner

    thank you so much a solution that worked for me

  • http://allreviewsite.com/ Jay Madonna

    A nice tutorial for Android ImageView.