In today’s tutorial, we will learn the Image scaling guide in Kotlin KMM KMP Kotlin Compose Multiplatform for both Android & iOS platforms. We will discuss how to apply different scaling types to the image.
Image Customization Scaling in KMM KMP Kotlin Tutorial:
1. First, you must download the two images mentioned below. We are using Local pictures in this tutorial. So you will also learn about using Local common resource images for all the platforms.
Landscape demo image:
Portrait demo image:
2. Paste the images into,
composeApp -> commonMain -> composeResource -> drawable folder.
3. To use the images, you must Clean and then Rebuild the project.
4. After rebuilding the project. We can call these images into our local code using the Image component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Image( painter = painterResource(Res.drawable.portrait_demo_plant), contentDescription = "Demo Portrait Image", modifier = Modifier .size(300.dp) .background(Color.Yellow) ) Image( painter = painterResource(Res.drawable.landscape_demo_plant), contentDescription = "Demo Landscape Image", modifier = Modifier .size(300.dp) .background(Color.Yellow) ) |
Code explanation:
- painterResource: To draw images in the Image widget.
- Res: Here, Res represents your local resource. Make sure to add it.
- Size: Set the fixed size of the image.
- background: Set the image background color.
Complete source code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
package com.app.test import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import org.jetbrains.compose.resources.painterResource import testapp.composeapp.generated.resources.Res import testapp.composeapp.generated.resources.landscape_demo_plant import testapp.composeapp.generated.resources.portrait_demo_plant @Composable fun App() { MaterialTheme { Column( modifier = Modifier .padding(12.dp) .fillMaxWidth(), verticalArrangement = Arrangement.Top, horizontalAlignment = Alignment.CenterHorizontally ) { Text( text = "Customize Image in KMP(KMM)", style = MaterialTheme.typography.h6, textAlign = TextAlign.Center ) Spacer(modifier = Modifier.height(16.dp)) Text( text = "Portrait Image", style = MaterialTheme.typography.h4, textAlign = TextAlign.Center ) Spacer(modifier = Modifier.height(12.dp)) Image( painter = painterResource(Res.drawable.portrait_demo_plant), contentDescription = "Demo Portrait Image", modifier = Modifier .size(300.dp) .background(Color.Yellow) ) Spacer(modifier = Modifier.height(12.dp)) Text( text = "Landscape Image", style = MaterialTheme.typography.h4, textAlign = TextAlign.Center ) Image( painter = painterResource(Res.drawable.landscape_demo_plant), contentDescription = "Demo Landscape Image", modifier = Modifier .size(300.dp) .background(Color.Yellow) ) } } } |
Screenshot:
Image Content Scaling Properties Guide:
The Image component in Kotlin Compose Multiplatform has a property contentScale that supports various scaling methods. The content scale decides how the image should scale within its defined boundaries. If we don’t use contentScale, then Image’s default property is ContentScale.Fit.
1. ContentScale.Crop: Crop the image from the center and fill the whole container space.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Image( painter = painterResource(Res.drawable.portrait_demo_plant), contentDescription = "Demo Portrait Image", modifier = Modifier .size(300.dp) .background(Color.Yellow), contentScale = ContentScale.Crop ) Image( painter = painterResource(Res.drawable.landscape_demo_plant), contentDescription = "Demo Landscape Image", modifier = Modifier .size(300.dp) .background(Color.Yellow), contentScale = ContentScale.Crop ) |
Screenshot:
2. ContentScale.Fit: Scales the image uniformly while maintaining the aspect ratio. In this case, if the Image is smaller than the given size, it scales the image and fits the View.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Image( painter = painterResource(Res.drawable.portrait_demo_plant), contentDescription = "Demo Portrait Image", modifier = Modifier .size(300.dp) .background(Color.Yellow), contentScale = ContentScale.Fit ) Image( painter = painterResource(Res.drawable.landscape_demo_plant), contentDescription = "Demo Landscape Image", modifier = Modifier .size(300.dp) .background(Color.Yellow), contentScale = ContentScale.Fit ) |
Screenshot:
3. ContentScale.FillBounds: Scales the image vertically and horizontally into the whole space without maintaining the image aspect ratio. This will make the image stretched.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Image( painter = painterResource(Res.drawable.portrait_demo_plant), contentDescription = "Demo Portrait Image", modifier = Modifier .size(300.dp) .background(Color.Yellow), contentScale = ContentScale.FillBounds ) Image( painter = painterResource(Res.drawable.landscape_demo_plant), contentDescription = "Demo Landscape Image", modifier = Modifier .size(300.dp) .background(Color.Yellow), contentScale = ContentScale.FillBounds ) |
Screenshot:
4. ContentScale.FillHeight: Scales the image vertically, maintaining the image aspect ratio to fill the vertical space.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Image( painter = painterResource(Res.drawable.portrait_demo_plant), contentDescription = "Demo Portrait Image", modifier = Modifier .size(300.dp) .background(Color.Yellow), contentScale = ContentScale.FillHeight ) Image( painter = painterResource(Res.drawable.landscape_demo_plant), contentDescription = "Demo Landscape Image", modifier = Modifier .size(300.dp) .background(Color.Yellow), contentScale = ContentScale.FillHeight ) |
Screenshot:
5. ContentScale.FillWidth: Scale the image horizontally into the remaining space while maintaining the image aspect ratio.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Image( painter = painterResource(Res.drawable.portrait_demo_plant), contentDescription = "Demo Portrait Image", modifier = Modifier .size(300.dp) .background(Color.Yellow), contentScale = ContentScale.FillWidth ) Image( painter = painterResource(Res.drawable.landscape_demo_plant), contentDescription = "Demo Landscape Image", modifier = Modifier .size(300.dp) .background(Color.Yellow), contentScale = ContentScale.FillWidth ) |
Screenshot:
6. ContentScale.Inside: Scale the Image to the space while maintaining the image aspect ratio. If the image is smaller than the size of the container, then it works as ContentScale.NONE.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Image( painter = painterResource(Res.drawable.portrait_demo_plant), contentDescription = "Demo Portrait Image", modifier = Modifier .size(300.dp) .background(Color.Yellow), contentScale = ContentScale.Inside ) Image( painter = painterResource(Res.drawable.landscape_demo_plant), contentDescription = "Demo Landscape Image", modifier = Modifier .size(300.dp) .background(Color.Yellow), contentScale = ContentScale.Inside ) |
Screenshot:
7. ContentScale.None: Do not apply any scaling of content to the image. If the image is smaller than the container, show it as its size.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Image( painter = painterResource(Res.drawable.portrait_demo_plant), contentDescription = "Demo Portrait Image", modifier = Modifier .size(300.dp) .background(Color.Yellow), contentScale = ContentScale.None ) Image( painter = painterResource(Res.drawable.landscape_demo_plant), contentDescription = "Demo Landscape Image", modifier = Modifier .size(300.dp) .background(Color.Yellow), contentScale = ContentScale.None ) |
Screenshot:
Above mentioned are the 7 image content scale types in Kotlin compose multiplatform.
