Pick Multiple Images from the Gallery - Android Studio - Kotlin

How to pick multiple images from the Gallery?

There are some scenarios in which we need to pick multiple images from the Gallery. For example, on Facebook, you are familiar with adding multiple images in a single Post. In this tutorial, we will learn how can upload multiple images from the Gallery. You can pick single or as well as multiple images after learning this tutorial. After picking images, we will show those images in ImageSwitcher.

If you want to learn to pick a single Image from the Gallery, you can check for Java OR Kotlin OR Compose

Video:

Step 1: Create a new project OR Open your existing project

Code

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context=".MainActivity">

    <!--Picked images will be shown here-->
    <ImageSwitcher
        android:id="@+id/imagesIs"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        tools:background="#959595" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginVertical="8dp"
        android:orientation="horizontal">

        <!--Show previous image on ImageSwitcher clicking this button-->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/previousBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Previous" />

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

        <!--Show Next image on ImageSwitcher clicking this button-->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/nextBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Next" />

    </LinearLayout>


    <!--Pick images clicking this button-->
    <com.google.android.material.button.MaterialButton
        android:id="@+id/pickImagesBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Pick Images" />

</LinearLayout>

MainActivity.kt

package com.technifysoft.myapplication

import android.content.Intent
import android.net.Uri
import android.os.Bundle
import android.util.Log
import android.widget.ImageView
import android.widget.Toast
import androidx.activity.enableEdgeToEdge
import androidx.activity.result.contract.ActivityResultContracts
import androidx.appcompat.app.AppCompatActivity
import com.technifysoft.myapplication.databinding.ActivityMainBinding

class MainActivityKt : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    private val TAG = "MAIN_TAG"

    //store image uris in this array list
    private lateinit var imageUris: ArrayList<Uri>

    //position of selected image
    var position = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //init list
        imageUris = ArrayList()

        //setup image switcher
        binding.imagesIs.setFactory {
            val imageView = ImageView(this)
            imageView
        }

        //click handle, pick images
        binding.pickImagesBtn.setOnClickListener { pickImageGallery() }

        //click handle, show previous image
        binding.previousBtn.setOnClickListener {
            if (position > 0) {
                position--
                binding.imagesIs.setImageURI(imageUris[position])
            } else {
                Toast.makeText(this, "No Previous images...", Toast.LENGTH_SHORT).show()
            }
        }


        //click handle, show next image
        binding.nextBtn.setOnClickListener {
            if (position < imageUris.size - 1) {
                position++
                binding.imagesIs.setImageURI(imageUris[position])
            } else {
                Toast.makeText(this, "No More images...", Toast.LENGTH_SHORT).show()
            }
        }
    }

    private fun pickImageGallery() {
        Log.d(TAG, "pickImageGallery: ")
        //Intent to launch Images Picker e.g. Gallery
        val intent = Intent(Intent.ACTION_GET_CONTENT)
        intent.setType("image/*")
        intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true)
        galleryActivityResultLauncher.launch(intent)
    }

    private val galleryActivityResultLauncher = registerForActivityResult(
        ActivityResultContracts.StartActivityForResult()
    ) { result ->
        //Check if image is picked or not
        if (result.resultCode == RESULT_OK) {
            //Image Picked from Gallery, get data/intent from ActivityResult
            val data = result.data
            if (data!!.clipData != null) {
                //picked multiple images
                //get number of picked images
                val count = data.clipData!!.itemCount
                for (i in 0 until count) {
                    val imageUri = data.clipData!!.getItemAt(i).uri
                    //add image to list
                    imageUris.add(imageUri)
                }
                //set first image from list to image switcher
                binding.imagesIs.setImageURI(imageUris[0])
                position = 0
            } else {
                //picked single image
                val imageUri = data.data
                //set image to image switcher
                binding.imagesIs.setImageURI(imageUri)
                position = 0
            }
        } else {
            //Cancelled
            Log.d(TAG, "onActivityResult: Cancelled...")
            Toast.makeText(this, "Cancelled", Toast.LENGTH_SHORT).show()
        }
    }

}

Screenshots:


Pick Multiple Images from the Gallery – Android Studio - Kotlin

Pick Multiple Images from the Gallery – Android Studio - Kotlin
Add caption

Comments

Popular posts from this blog

Picture In Picture - Android Studio - Kotlin

Manage External Storage Permission - Android Studio - Kotlin

How to add AIDL folder | Android Studio