Kotlin Pick Multiple Images From Gallery & Display Into Recyclerview Example

Kotlin Pick Multiple Images From Gallery & Display Into Recyclerview Example

Step 1:

Open build.gradle(:app) and add following dependency and rebuild the project.

implementation 'androidx.recyclerview:recyclerview:1.2.1'

build.gradle(:app)

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    compileSdk 32

    defaultConfig {
        applicationId "com.kotlinkatta.demo"
        minSdk 21
        targetSdk 32
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures{
        dataBinding true;
        viewBinding true
    }
}

dependencies {
    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.appcompat:appcompat:1.4.1'
    implementation 'com.google.android.material:material:1.5.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    //recyclerview
    implementation 'androidx.recyclerview:recyclerview:1.2.1'
}

Step 2:

Create new class GetContentWithMultiFilter.kt and add following code.

package com.kotlinkatta.demo

import android.content.Context
import android.content.Intent
import androidx.activity.result.contract.ActivityResultContracts

class GetContentWithMultiFilter : ActivityResultContracts.GetMultipleContents() {

    override fun createIntent(context: Context, input: String): Intent {
        val inputArray = input.split(";").toTypedArray()
        val myIntent = super.createIntent(context, "*/*")
        myIntent.putExtra(Intent.EXTRA_MIME_TYPES, inputArray)
        myIntent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE,true)
        return myIntent
    }
}

Step 3:

Create new layout xml imagerow.xml and add following code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <ImageView
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:id="@+id/imgdata"
        android:layout_width="200dp"
        android:layout_height="200dp"/>
</LinearLayout>

Step 4:

Create new adapter class ImageDataAdapter.kt and add following code.

package com.kotlinkatta.demo

import android.net.Uri
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.recyclerview.widget.RecyclerView

class ImageDataAdapter(val userList: List<Uri>) :
    RecyclerView.Adapter<ImageDataAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val v = LayoutInflater.from(parent.context).inflate(R.layout.imagerow, parent, false)
        return ViewHolder(v)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val usermodel: Uri = userList[position]
        holder.imgdata.setImageURI(usermodel)
    }

    override fun getItemCount(): Int {
        return userList.size
    }

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imgdata: ImageView = itemView.findViewById(R.id.imgdata)
    }
}

Step 5:

Open activity_main.xml layout xml and add following code.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnselect"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#FF6200EE"
        android:text="Pick Images"
        android:textAllCaps="false"
        android:textColor="@color/white" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

Step 6:

Open MainActivity.kt activity class and add following code.

package com.kotlinkatta.demo

import android.net.Uri
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import com.kotlinkatta.demo.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    lateinit var activityMainBinding: ActivityMainBinding

    // define ActivityResultLauncher to launch : using custom GetContentWithMultiFilter
    val getContent = registerForActivityResult(GetContentWithMultiFilter()) { uriList: List<Uri> ->
        if (uriList.size != 0) {
            val adapter = ImageDataAdapter(uriList)
            activityMainBinding.recyclerview.adapter = adapter
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        val view = activityMainBinding.root
        setContentView(view)

        val layoutManager = LinearLayoutManager(this)
        activityMainBinding.recyclerview.layoutManager = layoutManager

        activityMainBinding.btnselect.setOnClickListener {
            val inputString = "image/*"
            getContent.launch(inputString)
        }
    }
}

Output: