Android ImageView Tutorial with Examples

What is ImageView?
Display image from Image resource
Display Image from URL
Display Image from File
Appendix: Interface design

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.

Using image assets and icon assets of Android Studio

2. Display image from Image resource

No ADS

We will start with a simple example, an ImageView displaying the image in the "drawable" directory of the project.

Create a Project named AndroidImageView.

File > New > New Project > Empty Activity
- Name: AndroidImageView
- Package name: org.o7planning.androidimageview
- Language: Java

You need some image files for this example:


triceratops_1.png	triceratops_2.png

Copy the images and paste to drawable folder of project.

Apps interface:

If you are interested in the steps to design this application interface, please see the appendix at the end of the article.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="375dp"
        android:layout_height="207dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="17dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_launcher_foreground"
        tools:ignore="VectorDrawableCompat" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView">

        <Space
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:text="Show Image 1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:text="Show Image 2" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package org.o7planning.androidimageview;

import androidx.appcompat.app.AppCompatActivity;

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

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);
    }

}

3. Display Image from URL

No ADS

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:

Android Networking

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);

}