Jetpack Compose: Getting Started
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
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.
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.
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.
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.
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.