Photo Picker in Android 13 with Example Project

In many android applications, we get to see that they are picking images from the user’s device and displaying that images within the android application. For image picking, android applications use intent within the android application. In this article, we will take a look at How to implement Photo Picker in Android 13. A sample video is given below to get an idea about what we are going to do in this article.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Updating SDK version in build.gradle file

Navigate to Gradle Scripts>module level build.gradle file and add change compile sdk and target sdk to 33. After that simply sync your project to install it. 

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">

    <!--creating image view on below line-->
    <ImageView
        android:id="@+id/idIVImage"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:layout_margin="10dp" />

    <!--creating button on below line to pick image-->
    <Button
        android:id="@+id/idBtnPickImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/idIVImage"
        android:layout_centerInParent="true"
        android:text="Pick Image"
        android:textAlignment="center"
        android:textAllCaps="false"
        app:background="@color/edt_back_color"
        app:backgroundTint="@color/edt_back_color" />

</RelativeLayout>

Step 4: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.example.gptapp

import android.R.attr
import android.content.Intent
import android.net.Uri
import android.os.Bundle
import android.provider.MediaStore
import android.widget.Button
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    // creating variables on below line.
    lateinit var pickImageBtn: Button
    lateinit var imageIV: ImageView

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

        // initializing variables on below line.
        pickImageBtn = findViewById(R.id.idBtnPickImage)
        imageIV = findViewById(R.id.idIVImage)

        // adding click listener for button on below line.
        pickImageBtn.setOnClickListener {
            // calling intent on below line.
            val intent = Intent(MediaStore.ACTION_PICK_IMAGES)
            // starting activity on below line.
            startActivityForResult(intent, 1)
        }

    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if (resultCode === RESULT_OK) {
            // compare the resultCode with the
            // constant
            if (requestCode === 1) {
                // Get the url of the image from data
                val selectedImageUri: Uri = data?.data!!
                if (null != selectedImageUri) {
                    // update the image view in the layout
                    imageIV.setImageURI(selectedImageUri)
                }
            }
        }
    }

}

Now run your application to see the output of it. 

Output: