Blog Infos
Author
Published
Topics
,
Published

Have you ever wondered about having a mirror effect for the images in a list or general? With the powerful Jetpack Compose UI toolkit it’s simple and easy.

 

 

Well as you can see that this effect includes the following things
1. Inverted image
2. 50% visibility of the inverted image
3. Blurred inverted image
4. Same edges just like the original image

Now let’s see how each of them is done using Jetpack Compose

That’s the original image composable that includes an image with a fixed height of 300 dp now let’s see how can we make a mirror image for this.

Inverted image
The first step is to rotate the image to 180 degrees and the best part is that it’s directly supported through the modifier.

50% visibility of the inverted image
Now let’s see how can we trim this rotated image to 50% of the height, well for that also we are going to use a modifier but as no direct support is available to trim to 50% of height so we are going to build a custom shape modifier.

The HalfSizeShape will be called with the clip modifier like this

Blurred inverted image
Now comes the tricky part, a blurriness is projected over an inverted image so as to look like a mirror effect but not just blur even gradient is also added to provide smooth texture like below
Same edges just like the original image
As the same composable is called once again to draw the mirror-effect hence the same modifier property is continued alongside that means when the original image has a rounded edge corner then the mirror image will also have the same property.
@Composable
fun Mirror(content: @Composable () -> Unit) {
Column {
content()
Box(modifier = Modifier
.graphicsLayer {
alpha = 0.99f
rotationZ = 180f
}
.drawWithContent {
val colors = listOf(Color.Transparent, Color.White)
drawContent()
drawRect(brush = Brush.verticalGradient(colors),
blendMode = BlendMode.DstIn)
}
.blur(radiusX = 1.dp, radiusY = 3.dp, BlurredEdgeTreatment.Unbounded)
.clip(
HalfSizeShape
)
) {
content()
}
}
}
view raw mirror.kt hosted with ❤ by GitHub

Now whenever you need to have a mirror-effect for any of the composable like an image here in this sample then you may call Mirror composable like following

That’s all with just a few lines you get a mirror-effect all thanks to the powerful Jetpack Compose toolkit.

This article was originally published on proandroiddev.com on June 10, 2022

Job Offers

Job Offers

There are currently no vacancies.

OUR VIDEO RECOMMENDATION

No results found.

Jobs

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog
In the world of Jetpack Compose, where designing reusable and customizable UI components is…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE
Menu