Android ImageView Tutorial

1- What is ImageView?

ImageView is a view  used to display images, in which  image files can be sourced on application, device, or from a URL.

2- Example: Display resource Image

Create a Project named AndroidImageView.
You need some image files for this example:
  • triceratops_1.jpg
  • triceratops_2.jpg
Copy the images and paste to  drawable folder of project.
Apps interface:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="org.o7planning.androidimageview.MainActivity"
    android:orientation="vertical">


    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="250dp"
        android:id="@+id/imageView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Image 1"
        android:id="@+id/button1"
        android:layout_below="@+id/imageView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="38dp"
        android:layout_marginStart="38dp"
        android:layout_marginTop="40dp" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Image 2"
        android:id="@+id/button2"
        android:layout_alignTop="@+id/button1"
        android:layout_toRightOf="@+id/button1"
        android:layout_toEndOf="@+id/button1" />
    
</RelativeLayout>
MainActivity.java
package org.o7planning.androidimageview;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

import java.net.URL;

public class MainActivity extends AppCompatActivity {


    private ImageView imageView;
    private Button button1;
    private Button button2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        this.button1 = (Button) this.findViewById(R.id.button1);
        this.button2 = (Button) this.findViewById(R.id.button2);

        this.button1.setOnClickListener(new Button.OnClickListener() {

            @Override
            public void onClick(View v) {
                showImage1();
            }
        });

        this.button2.setOnClickListener(new Button.OnClickListener() {

            @Override
            public void onClick(View v) {
                showImage2();
            }
        });
    }


    private void showImage1() {
         this.imageView.setImageResource(R.drawable.triceratops_1);
    }

    private void showImage2() {
        this.imageView.setImageResource(R.drawable.triceratops_2);
    }

}
Running apps:

3- Display Image from URL

You can also display images from a URL to the ImageView. The principle is that you need to download the image file from the URL, and then displays it on ImageView:
URL url = new URL(imageUrl);
HttpURLConnection httpConn = (HttpURLConnection) url.openConnection();

httpConn.connect();
int resCode = httpConn.getResponseCode();

if (resCode == HttpURLConnection.HTTP_OK) {
  InputStream in = httpConn.getInputStream();
  Bitmap bitmap = BitmapFactory.decodeStream(in);

  this.imageView.setImageBitmap(bitmap);
}
Getting data from URL sources related to network programming in Android, you can find examples that display images from a URL on ImageView in documentation guides to program Android here:

4- Display Image from File

You can also display an image file  on the device to ImageView, such as images in memory card. First of all, you need to authorize to read and write data on the device:

Add the following configuration in AndroidManifest.xml:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
File imgFile = new  File("/sdcard/Images/mypicture.png");

if(imgFile.exists()) {

   Bitmap myBitmap = BitmapFactory.decodeFile(imgFile.getAbsolutePath());

   this.imageView.setImageBitmap(myBitmap);

}
  • TODO