June 30, 2020

How to choose an image from the gallery in android

By Mohit Agrawal

Choose an image from the gallery and show it in the image view

image_from_gallery_thumb

Introduction

In this android tutorial, you will learn how to choose an image from the gallery. I will guide you to develop an android app in Kotlin. The app will have only two UI components and they are:

  • Image View, I will use to display the image from the gallery.
  • Button: This is to open the android gallery.

Implementation

Let’s start with step by step guide on how to choose an image from the gallery in android 🤩.

STEP 1 Create a new android project and give it a nice name like ‘Image_from_gallery”. If you have an existing project then you can ignore STEP 2 where we will design the UI.

STEP 2 In this step we will design a basic UI as discussed in introduction. Open the activity_main.xml and copy the below code.

<?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="250dp"
        android:layout_height="250dp"
        android:layout_marginStart="25dp"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="25dp"
        android:layout_marginEnd="25dp"
        android:layout_marginRight="25dp"
        android:scaleType="centerInside"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@android:drawable/ic_menu_gallery" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="157dp"
        android:layout_marginLeft="157dp"
        android:layout_marginTop="104dp"
        android:layout_marginEnd="166dp"
        android:layout_marginRight="166dp"
        android:text="Open Gallery"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>

The output of this XML will contain a image view and a button.

image_from_gallary_android_1
The main UI

STEP 3 In order to access the gallery and images, you need to set proper permission. Open the AndroidManifest.xml file and copy these permissions before <application/> tag.

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Now run the app and give the storage access permission from the device settings.

STEP 4 Let’s do the logical part now in MainActivity.kt. On the click of the button, I will open an ACTION_PICK intent.

button.setOnClickListener {
            val i = Intent(
                Intent.ACTION_PICK,
                MediaStore.Images.Media.EXTERNAL_CONTENT_URI)
            startActivityForResult(i, RESULT_LOAD_IMAGE)
        }

This will open the gallery. After that when you choose an image then onActivityResult(…) will be called.

Check out the complete source code for MainActivity.kt below.

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.provider.MediaStore
import kotlinx.android.synthetic.main.activity_main.*

var RESULT_LOAD_IMAGE = 1

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        button.setOnClickListener {
            val i = Intent(
                Intent.ACTION_PICK,
                MediaStore.Images.Media.EXTERNAL_CONTENT_URI)
            startActivityForResult(i, RESULT_LOAD_IMAGE)
        }
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)

        if (requestCode == RESULT_LOAD_IMAGE && resultCode == RESULT_OK && null != data) {
            var uri = data.data
            imageView.setImageURI(uri)
        }
    }
}

If you have done everything correctly till here then you should get it working. Please let me know in the comment section if you are facing any issues.

Help me to grow our YouTube Channel: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!

android android beginners tutorial android tutorial Animation API call API call in iOS async asynchronous cardview custom switch custom ui dark web dark web links deep web deep web links Dynamic gradient view facebook messenger firebase hosting firebase hosting tutorial firebase remote config firebase tutorials flutter flutter for beginner flutter tutorial flutter UI tutorial hacking hacking tutorial hashcat iOS ios tutorial ios ui tutorial kotlin listview in flutter Lottie animation Messenger for kids review onion links Roll the Dice app swift tech news tor tor browser tor links UISwitch wifi wifi hacking