Pick Multiple Images from the Gallery - Android Studio - Compose

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

>> Check For Java
>> Check For Kotlin
>> Check For Compose

Code

MainActivity.kt

package com.technifysoft.myapplication

import android.net.Uri
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.rememberLauncherForActivityResult
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.activity.result.contract.ActivityResultContracts
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.BlendMode.Companion.Color
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage
import coil.compose.rememberAsyncImagePainter
import coil.request.ImageRequest
import com.technifysoft.myapplication.ui.theme.MyApplicationTheme

class MainActivityCompose : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()

        setContent {
            MainUi()
        }
    }

}

@Composable
fun MainUi() {

    val context = LocalContext.current

    // Store image URIs
    val imageUris = remember { mutableStateListOf<Uri>() }

    // Current image index
    var position by remember { mutableStateOf(0) }

    // Launcher for picking multiple images
    val imagePickerLauncher =
        rememberLauncherForActivityResult(ActivityResultContracts.GetMultipleContents()) { uris ->
            if (uris.isNotEmpty()) {
                imageUris.clear()
                imageUris.addAll(uris)
                position = 0
            } else {
                Toast.makeText(context, "Cancelled", Toast.LENGTH_SHORT).show()
            }
        }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        // Image Viewer (ImageSwitcher Replacement)
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(400.dp)
                .background(Color(0xFF959595)),
            contentAlignment = Alignment.Center
        ) {
            if (imageUris.isNotEmpty()) {
                Image(
                    painter = rememberAsyncImagePainter(imageUris[position]),
                    contentDescription = null,
                    modifier = Modifier.fillMaxSize(),
                    contentScale = ContentScale.Fit
                )
            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        // Previous & Next Row
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {

            Button(onClick = {
                if (position > 0) {
                    position--
                } else {
                    Toast.makeText(context, "No Previous images...", Toast.LENGTH_SHORT).show()
                }
            }) {
                Text("Previous")
            }

            Spacer(modifier = Modifier.weight(1f))

            Button(onClick = {
                if (position < imageUris.size - 1) {
                    position++
                } else {
                    Toast.makeText(context, "No More images...", Toast.LENGTH_SHORT).show()
                }
            }) {
                Text("Next")
            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        // Pick Images Button
        Button(
            onClick = {
                imagePickerLauncher.launch("image/*")
            },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("Pick Images")
        }
    }
}

/**
 * GreetingPreview is a composable function for previewing the MainUI in Android Studio.
 * It is annotated with @Preview to enable live preview.
 *
 */
@Preview(showBackground = true)
@Composable
private fun GreetingPreview() {
    MyApplicationTheme {
        MainUi()
    }
}

Screenshots:

Add caption