Site icon Howtodoandroid

How to pick Image from gallery in jetpack compose

Pick Image From Gallery poster

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 }
Code language: JavaScript (javascript)

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") }
Code language: JavaScript (javascript)

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 }
Code language: HTML, XML (xml)

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 { } ) } }
Code language: JavaScript (javascript)

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"
Code language: CSS (css)

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 { } ) } } } }
Code language: HTML, XML (xml)

the output,

Also, you can download this example on GitHub.

Android-Example/PickImageFromGalleryInJetpackCompose at master · velmurugan-murugesan/Android-Example (github.com)

Exit mobile version