Android Project to Select Image From Gallery and Display it inside ImageView in Java

Welcome folks today in this blog post we will be building an android app where we will allow the user to select images from gallery and display it using the imageView widget in java. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new android project inside the android studio and then you will see the below directory structure as shown below

Now we need to edit the activity_main.xml file and copy paste the below code

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"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <!--Button to open the image selector-->
    <Button
        android:id="@+id/BSelectImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="32dp"
        android:text="SELECT IMAGE"
        android:textColor="@android:color/white"
        android:textSize="18sp" />

    <!--ImageView to preview the selected image-->
    <ImageView
        android:id="@+id/IVPreviewImage"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_below="@id/BSelectImage"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp" />

</RelativeLayout>

<?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"

tools:context=".MainActivity"

tools:ignore="HardcodedText">

<Button

android:id="@+id/BSelectImage"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_marginTop="32dp"

android:text="SELECT IMAGE"

android:textColor="@android:color/white"

android:textSize="18sp" />

<ImageView

android:id="@+id/IVPreviewImage"

android:layout_width="match_parent"

android:layout_height="300dp"

android:layout_below="@id/BSelectImage"

android:layout_marginStart="16dp"

android:layout_marginTop="16dp"

android:layout_marginEnd="16dp" />

</RelativeLayout>

As you can see we have the RelativeLayout and inside it we have the simple button where we allow the user to select the image from the gallery and then we have the imageView section where we will show the live preview of the image which is selected by the user.

Now we need to copy paste the below code inside the MainActivity.java file

MainActivity.java

package com.example.imagecropper;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    // One Button
    Button BSelectImage;

    // One Preview Image
    ImageView IVPreviewImage;

    // constant to compare
    // the activity result code
    int SELECT_PICTURE = 200;

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

        // register the UI widgets with their appropriate IDs
        BSelectImage = findViewById(R.id.BSelectImage);
        IVPreviewImage = findViewById(R.id.IVPreviewImage);

        // handle the Choose Image button to trigger
        // the image chooser function
        BSelectImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                imageChooser();
            }
        });
    }

    // this function is triggered when
    // the Select Image Button is clicked
    void imageChooser() {

        // create an instance of the
        // intent of the type image
        Intent i = new Intent();
        i.setType("image/*");
        i.setAction(Intent.ACTION_GET_CONTENT);

        // pass the constant to compare it
        // with the returned requestCode
        startActivityForResult(Intent.createChooser(i, "Select Picture"), SELECT_PICTURE);
    }

    // this function is triggered when user
    // selects the image from the imageChooser
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        if (resultCode == RESULT_OK) {

            // compare the resultCode with the
            // SELECT_PICTURE constant
            if (requestCode == SELECT_PICTURE) {
                // Get the url of the image from data
                Uri selectedImageUri = data.getData();
                if (null != selectedImageUri) {
                    // update the preview image in the layout
                    IVPreviewImage.setImageURI(selectedImageUri);
                }
            }
        }
    }
}

package com.example.imagecropper;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;

import android.net.Uri;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

// One Button

Button BSelectImage;

// One Preview Image

ImageView IVPreviewImage;

// constant to compare

// the activity result code

int SELECT_PICTURE = 200;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// register the UI widgets with their appropriate IDs

BSelectImage = findViewById(R.id.BSelectImage);

IVPreviewImage = findViewById(R.id.IVPreviewImage);

// handle the Choose Image button to trigger

// the image chooser function

BSelectImage.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

imageChooser();

}

});

}

// this function is triggered when

// the Select Image Button is clicked

void imageChooser() {

// create an instance of the

// intent of the type image

Intent i = new Intent();

i.setType("image/*");

i.setAction(Intent.ACTION_GET_CONTENT);

// pass the constant to compare it

// with the returned requestCode

startActivityForResult(Intent.createChooser(i, "Select Picture"), SELECT_PICTURE);

}

// this function is triggered when user

// selects the image from the imageChooser

public void onActivityResult(int requestCode, int resultCode, Intent data) {

super.onActivityResult(requestCode, resultCode, data);

if (resultCode == RESULT_OK) {

// compare the resultCode with the

// SELECT_PICTURE constant

if (requestCode == SELECT_PICTURE) {

// Get the url of the image from data

Uri selectedImageUri = data.getData();

if (null != selectedImageUri) {

// update the preview image in the layout

IVPreviewImage.setImageURI(selectedImageUri);

}

As you can see we have the button where we are executing the imageChooser() method and inside it we are opening the gallery of the android device using the Intent and then when the user selects the image we are previewing the image using the URI using the setImageURI() method.