How to pick Image from gallery in jetpack compose

In this tutorial, I am explaining how to pick images from a gallery in jetpack compose and display the picked images in a Lazy grid view.

Before getting started into details. if you are new to jetpack compose, I strongly recommend you learn the basics of jetpack compose for a better understanding of this example.

Getting started with jetpack compose – Layouts – Howtodoandroid

Jetpack compose – Retrofit with Recyclerview – Howtodoandroid

Image Slider with the indicator Using Jetpack compose – Howtodoandroid

let’s get started,

Steps to pick images from gallery in jetpack compose

1. Prepare the launcher to get multiple images
2. Launch the launcher with that desired input type
3. Select the images from the gallery
4. Set the images into a Lazy grid

Prepare the launcher to get multiple images

The first step is to create a launcher to pick multiple images from the gallery. For the launcher, we need to use ActivityResultContracts.GetMultipleContents() along with the rememberLauncherForActivityResult.

Check more about ActivityResultContracts to use the correct result contracts.

val galleryLauncher =
            rememberLauncherForActivityResult(ActivityResultContracts.GetMultipleContents()) { uriList ->
                // process eith the received image uri
            }

Launch the launcher with that desired input type

Now the launcher is ready, we need to call the launcher with the click of a button. To launch the launcher we need to pass input types like images or files along with the launcher.

Button(
    onClick = { galleryLauncher.launch("image/*") },
    modifier = Modifier
    .wrapContentSize()
    .padding(10.dp)
    ) {
        Text(text = "Pick Image From Gallery")
    }

Select the images from the gallery

The launcher will redirect the screen to the gallery. In that, you can select all the images you want. and click open to direct back to the application.

Set the images into a Lazy grid

The selected images will be received as a URI in the launcher callback. as a list of URI To store the list of URI, I have created mutableStateOf(listOf()) variable.

var selectImages by remember { mutableStateOf(listOf<Uri>()) }
    val galleryLauncher =
        rememberLauncherForActivityResult(ActivityResultContracts.GetMultipleContents()) {
            selectImages = it
        }

Once the value is set into the mutableState variable. we need to set the LazyVerticalGrid as below,

LazyVerticalGrid(cells = GridCells.Fixed(3)) {
        items(selectImages) { uri ->
            Image(
                painter = rememberImagePainter(uri),
                contentScale = ContentScale.FillWidth,
                contentDescription = null,
                modifier = Modifier
                    .padding(16.dp, 8.dp)
                    .size(100.dp)
                    .clickable {

                    }
            )
        }
    }

here, I set the grid size using LazyVerticalGrid(cells = GridCells.Fixed(3)). Also, I am using the coil library rememberImagePainter(URI) method to loading images from URI.

implementation "io.coil-kt:coil-compose:1.3.2"

That’s it. I am done with the explanation, the complete source code of this example,

class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                PickImageFromGalleryInJetpackComposeTheme {
                    // A surface container using the 'background' color from the theme
                    Surface(
                        modifier = Modifier.fillMaxSize(),
                        color = MaterialTheme.colors.background
                    ) {
                        AppContent()
                    }
                }
            }
        }
    }

    @OptIn(ExperimentalCoilApi::class, ExperimentalFoundationApi::class)
    @Composable
    fun AppContent() {

        var selectImages by remember { mutableStateOf(listOf<Uri>()) }

        val galleryLauncher =
            rememberLauncherForActivityResult(ActivityResultContracts.GetMultipleContents()) {
                selectImages = it
            }

        Column(
            Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(
                onClick = { galleryLauncher.launch("image/*") },
                modifier = Modifier
                    .wrapContentSize()
                    .padding(10.dp)
            ) {
                Text(text = "Pick Image From Gallery")
            }

            LazyVerticalGrid(cells = GridCells.Fixed(3)) {
                items(selectImages) { uri ->
                    Image(
                        painter = rememberImagePainter(uri),
                        contentScale = ContentScale.FillWidth,
                        contentDescription = null,
                        modifier = Modifier
                            .padding(16.dp, 8.dp)
                            .size(100.dp)
                            .clickable {

                            }
                    )
                }
            }

        }

    }

the output,

Also, you can download this example on GitHub.