How to Pick Images from Gallery in Jetpack Compose¶

In this tutorial, we will explore how to pick images from the gallery in Jetpack Compose and display them in a Lazy Grid View. This guide is ideal for developers who want to integrate an image picker into their Jetpack Compose applications.

If you're new to Jetpack Compose, I strongly recommend checking out these resources for a better understanding:

Let's dive into the implementation!

Steps to Pick Images from the Gallery in Jetpack Compose¶

Prepare the launcher to select multiple images
Launch the image picker when a button is clicked
Select images from the gallery
Display the selected images in a Lazy Grid View

1. Prepare the Launcher to Select Multiple Images¶

The first step is to create a launcher to pick multiple images from the gallery using ActivityResultContracts.GetMultipleContents() and rememberLauncherForActivityResult.

val galleryLauncher =
    rememberLauncherForActivityResult(ActivityResultContracts.GetMultipleContents()) { uriList ->
        // Process the received image URIs
    }

Learn more about ActivityResultContracts to choose the right result contract for your needs.

2. Launch the Image Picker on Button Click¶

Now that the launcher is ready, we need to trigger it when the user clicks a button. We launch it by passing "image/*" as the input type.

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

3. Select Images from the Gallery¶

When the user clicks the button, the gallery opens, allowing them to select multiple images. After selection, clicking "Open" will return to the application with the selected image URIs.

Select Images from Gallery

4. Display the Selected Images in a Lazy Grid View¶

The selected images are received as a list of URIs. To store and update them dynamically, we use mutableStateOf(listOf()).

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

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

Once the images are stored, we display them using LazyVerticalGrid:

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

Adding Dependencies¶

We use the Coil image library to load images from URIs:

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

Full Source Code¶

Below is the complete implementation:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PickImageFromGalleryTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    AppContent()
                }
            }
        }
    }
}

@Composable
fun AppContent() {
    var selectedImages by remember { mutableStateOf(listOf<Uri>()) }

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

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

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

Output Screenshots¶

Selecting Images from Gallery
Displaying Picked Images in Lazy Grid View

Conclusion¶

That's it! In this tutorial, we learned how to:

✔️ Set up an image picker in Jetpack Compose using ActivityResultContracts.GetMultipleContents() ✔️ Launch the picker with a button click ✔️ Select multiple images from the gallery ✔️ Display selected images in a LazyVerticalGrid ✔️ Use the Coil library to load images efficiently

You can find the complete source code on GitHub.

Hope this helps! Let me know if you have any questions in the comments below. 🚀