This tutorial teaches master image clipping & effects in Kotlin KMP & KMM for Android and iOS apps. Explore circular and oval shapes, rounded corners, image borders, gradient effects, blend modes, camera reel effects, custom aspect ratios, tint overlays, black & white filters, and blur effects.

Master Image Clipping & Effects in Kotlin KMP KMM Compose

We are using a demo image in this tutorial. You can download the image from below for learning purposes.

After downloading, Please put the image into :

composeApp -> commonMain -> composeResource -> drawable folder.

After pasting the image, You have to Clean and rebuild the project. So the local image will be available for Local common shared resources.

Now, our image setup is complete. Let’s move to the next step, where we learn Clipping images in Kotlin Compose Multiplatform.

1. CircleShape Image:

The Image component in Kotlin Compose Multiplatform has a property clip in Modifier. The clip supports a property called CircleShape, which automatically converts our image into a circular shape.

Code explanation:

1. painter: To draw the image.
2. painterResource: To retrieve the drawable resource image of the painter.
3. Res: represents local app resource.
4. drawable: Locate the local common main resource drawable folder.
5. contentDescription: Description of the Image.
6. contentScale: How the image should be scaled within the current View.
7. clip: To apply Clipping to the image.
8. CircleShape: Apply circular shape clipping to the image.

Complete code for App.kt file:

Screenshot:

2. Rounded Corner Image:

To create a rounded corner image in KMM KMP, we will pass the RoundedCornerShape() property to the clip.

Screenshot:

3. Oval Shape Image:

In KMP, we cannot directly use the Oval shape. We must create a custom shape using Path and Rect to make the Oval shape.

1. Create a SquashedOval class that extends the Shape class. In this class, we define our Oval shape.
   
   class SquashedOval : Shape { override fun createOutline( size: Size, layoutDirection: LayoutDirection, density: Density ): Outline { val path = Path().apply { addOval( Rect( left = size.width / 4f, top = 0f, right = size.width * 3 / 4f, bottom = size.height ) ) } return Outline.Generic(path = path) } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   class SquashedOval : Shape {     override fun createOutline(         size: Size,         layoutDirection: LayoutDirection,         density: Density     ): Outline {         val path = Path().apply {             addOval(                 Rect(                     left = size.width / 4f,                     top = 0f,                     right = size.width * 3 / 4f,                     bottom = size.height                 )             )         }         return Outline.Generic(path = path)     } }

2. Calling the SquashedOval class into our Image in the clip.
   
   Image( painter = painterResource(Res.drawable.demo_image), contentDescription = "Demo Image", contentScale = ContentScale.Crop, modifier = Modifier .size(200.dp) .clip(SquashedOval()) )

   1 2 3 4 5 6 7 8

   Image(       painter = painterResource(Res.drawable.demo_image),       contentDescription = "Demo Image",       contentScale = ContentScale.Crop,       modifier = Modifier           .size(200.dp)           .clip(SquashedOval())   )

Complete source code:

Screenshot:

4. Adding a border to the Image in KMP KMM Compose Multiplatform:

To add a border to the image in KMM, KMP, we have to use a Modifier property border() and its sub-property BorderStroke().

1. Adding a border to Circle shape image:

Code explanation:

1. borderWidth: We have to define the width of the border.
2. BorderStroke(): It supports two properties: border width and border color.
3. CircleShape: Pass the shape of the Image. The border will be applied to the default image shape if not passed.

2. Adding a border to the Rounded corner shape image:

3. Adding a border to the default Rectangle shape image:

Screenshot:

4. Adding a Gradient border to the Image in KMP KMM:

To add the Gradient effect to the border on the Image, We have to create a Brush with Sweep Gradient custom component. We have to define multiple colors in a list. These colors will be applied in the gradient effect.

Now we must call this rainbowColorsBrush in our Image in Border Stroke property and pass at the place of Color.

Complete source code:

Screenshot:

 

5. Set Custom Aspect Ratio Image in KMP KMM:

To set the image in a custom aspect ratio, we will use Modifier.aspectRatio() property.

Screenshot:

6. Apply Tint on Image in KMP KMM:

To apply tint color to the image component, we will use ColorFilter.tint(Color Code) property.

Screenshot:

7. Applying Black & White Effect on Image in KMP KMM:

To apply the Back & the White effect on the Image, we will use

ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) }) property.

Screenshot:

7. Applying Blur Effect to Image in KMP KMM:

To apply the Blur effect to an Image, we will use the blur property with radius X, radius Y and edge treatment.

Screenshot:

Thanks for reading our article. If you have any questions regarding the tutorial, please comment. Happy Coding.