Picking Images From Gallery Using Jetpack Compose

Grab a cup of coffee ☕ and let’s see how to pick images from the gallery using Jetpack Compose.

Setup

We need to use a dependency called Coil in order to display the images. To add it just open :app/build.gradle.kts and paste this into the dependencies block.

dependencies {
    implementation("io.coil-kt:coil-compose:2.4.0")
}

Pick one image

Firstly, we need to create a variable that will store the photo URI (Uniform Resource Identifier).

var imageUri by remember {
    mutableStateOf<Uri?>(null)
}

Now to open the gallery we need to use rememberLauncherForActivityResult that has a GetContent contract.

val galleryLauncher = rememberLauncherForActivityResult(
    contract = ActivityResultContracts.GetContent(),
    onResult = { uri ->
        uri?.let {
            imageUri = it
        }
    }
)

Let’s add an Image and a TextButton. The Image will show up only if the imageUri is not empty. To open the gallery, we simply need to provide the type of content to the gallery launcher.

Column {
    imageUri?.let {
        Image(
            painter = rememberAsyncImagePainter(model = imageUri),
            contentDescription =…