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 that how we 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 Single Image from Gallery you can check for Java OR Kotlin 

Check For Java

Video:

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

Step 2: Code

activity_main.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">
    <!--Picked images will be shown here-->
    <ImageSwitcher
        android:id="@+id/imageSwitcher"
        android:layout_width="match_parent"
        android:layout_height="400dp"/>
    <!--Show previous image in ImageSwitcher clicking this button-->
    <Button
        android:id="@+id/previousBtn"
        android:text="Previous"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_below="@id/imageSwitcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <!--Show next image in ImageSwitcher clicking this button-->
    <Button
        android:id="@+id/nextBtn"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_below="@id/imageSwitcher"
        android:text="Next"/>
    <!--Pick images clicking this button-->
    <Button
        android:id="@+id/pickImagesBtn"
        android:text="Pick Images"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

MainActivity.kt

package com.blogspot.atifsoftwares.imagespicker_kotlin

import android.app.Activity
import android.content.Intent
import android.net.Uri
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    //store uris of picked images
    private var images: ArrayList<Uri?>? = null

    //current position/index of selected images
    private var position = 0

    //request code to pick image(s)
    private val PICK_IMAGES_CODE = 0

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

        //init list
        images = ArrayList()

        //setup image switcher
        imageSwitcher.setFactory { ImageView(applicationContext) }

        //pick images clicking this button
        pickImagesBtn.setOnClickListener {
            pickImagesIntent()
        }

        //switch to next image clicking this button
        nextBtn.setOnClickListener {
            if (position < images!!.size-1){
                position++
                imageSwitcher.setImageURI(images!![position])
            }
            else{
                //no more images
                Toast.makeText(this, "No More images...", Toast.LENGTH_SHORT).show()
            }
        }

        //switch to previous image clicking this button
        previousBtn.setOnClickListener {
            if (position > 0){
                position--
                imageSwitcher.setImageURI(images!![position])
            }
            else{
                //no more images
                Toast.makeText(this, "No More images...", Toast.LENGTH_SHORT).show()
            }

        }

    }

    private fun pickImagesIntent(){
        val  intent = Intent()
        intent.type = "image/*"
        intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true)
        intent.action = Intent.ACTION_GET_CONTENT
        startActivityForResult(Intent.createChooser(intent, "Select Image(s)"), PICK_IMAGES_CODE)
    }

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

        if (requestCode == PICK_IMAGES_CODE){

            if (resultCode == Activity.RESULT_OK){

                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
                        images!!.add(imageUri)
                    }
                    //set first image from list to image switcher
                    imageSwitcher.setImageURI(images!![0])
                    position = 0;
                }
                else{
                    //picked single image
                    val imageUri = data.data
                    //set image to image switcher
                    imageSwitcher.setImageURI(imageUri)
                    position = 0;
                }

            }

        }
    }
}

Step 3:Run Project


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

Manage External Storage Permission | Android Studio | Kotlin

Manage External Storage Permission | Android Studio | Java

Add a Back Button to Action Bar Android Studio (Kotlin)