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


    Android App Developer

    sipgate GmbH
    Düsseldorf, Remote
    • Full Time
    apply now

    Talent Acquisition Manager – Technology

    FanDuel
    New York, NY; Atlanta, GA
    • Full Time
    apply now

    Android Engineer

    ASOS
    London
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

, ,

The Evolution of Android Graphics in Android 12/13

Android 12 and 13 both added significant new capabilities to Android platform graphics, including RenderEffect, RuntimeShader, and more. At the same time, RenderScript has been deprecated and we’ve introduced the RenderScript Intrinsics Replacement Toolkit. This…
Watch Video

The Evolution of Android Graphics in Android 12/13

Daniel Galpin
Android Developer Advocate and Fast Talking YouTuber
Google

The Evolution of Android Graphics in Android 12/13

Daniel Galpin
Android Developer Ad ...
Google

The Evolution of Android Graphics in Android 12/13

Daniel Galpin
Android Developer Advocat ...
Google

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

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE
blog
Yes! You heard it right. We’ll try to understand the complete OTP (one time…
READ MORE

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.

Menu