Jetpack Compose: Getting Started

A very popular way of keeping your UI lively is by displaying images. In Jetpack Compose, we can use the Image Composable to display images in the app.

The Image Composable is part of the core library. We do not need to opt into any library in order to use the Image Composable.

This Composable has two Mandatory parameters:

• painter: This is used to specify the image to display. It is of type Painter and has no default value.
• contentDescription: This is used to specify the content description of the image. It is of type String? and has a default value of null.

This is very similar to how we used the Icon Composable to display icons in the app.

This Composable also has a number of Optional parameters that we can use to customize the appearance of the image. Some of these input parameters include:

• modifier: This is used to modify the image. It is of type Modifier and has a default value of Modifier.
• alignment: This is used to specify the alignment of the image. It is of type Alignment and has a default value of Center.
• contentScale: This is used to specify the content scale of the image. It is of type ContentScale and has a default value of Fit.

The painter parameter is used to specify the image to display. It is of type Painter and has no default value.

We have a number of options when it comes to loading images in Jetpack Compose. We can load images from the disk, from the network, from the assets folder, etc.

To load an image (for example: PNG, JPEG, WEBP) or vector resource from the disk, use the painterResource API with your image reference. You don’t need to know the type of the asset, just use painterResource in Image or paint modifiers.

Painter

Let us add an image to the app. In our TestPage Composable, we will add an image.

@Composable
fun TestPage() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_burger),
            contentDescription = "Burger Image",
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 16.dp)
        )
    }
}

contentDescription

The contentDescription parameter is used to specify the content description of the image. It is of type String? and has a default value of null.

The contentDescription is used to describe the image to the user. This is very important for accessibility. It is used by accessibility services to help visually impaired users understand the content of the image.

We can load translated texts from the strings.xml file as the contentDescription of the image.

Loading these texts can be done using the standard stringResource API.

contentDescription

@Composable
fun TestPage() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_burger),
            contentDescription = stringResource(id = R.string.burger_image),
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 16.dp)
        )
    }
}

contentScale

The contentScale parameter is used to specify the content scale of the image. It is of type ContentScale and has a default value of Fit.

The following are the ContentScale options you can use:

• Fill: This is used to scale the image to fill the width and height of the container. This may cause the image to be stretched.
• Inside: This is used to scale the image to be contained within the width and height of the container. This may cause the image to be smaller than the container.
• Crop: This is used to scale the image to fill the width and height of the container. This may cause the image to be cropped.
• FillWidth: This is used to scale the image to fill the width of the container. This may cause the image to be stretched.
• FillHeight: This is used to scale the image to fill the height of the container. This may cause the image to be stretched.
• Fit: This is used to scale the image to fit the width and height of the container. This may cause the image to be smaller than the container.

contentScale

@Composable
fun TestPage() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_burger),
            contentDescription = stringResource(id = R.string.burger_image),
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 16.dp)
        )
    }
}

colorFilter

The colorFilter parameter is used to specify the color filter of the image. It is of type ColorFilter? and has a default value of null.

The colorFilter is used to apply a color filter to the image. This is very useful when we want to tint the image.

colorFilter

@Composable
fun TestPage() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_burger),
            contentDescription = stringResource(id = R.string.burger_image),
            contentScale = ContentScale.Crop,
            colorFilter = ColorFilter.tint(
                color = Color.Red, 
                blendMode = BlendMode.Difference),
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 16.dp)
        )
    }
}

Conclusion

In this lesson, we learned how to use the Image Composable to display images in the app. We also learned about the various parameters of the Image Composable.

Now that we know how to display images in the app, we can go ahead and add images to our app.

In our next episode, we will look at how to use CheckBoxes and RadioButtons in Jetpack Compose.