Skip to content

SubhadeepSantra1998/mirror

Repository files navigation

mirror

Mirror is a powerful android library that allows you to effortlessly create stunning mirror effects on images in your android applications. Whether you're building a photo editing app or simply want to add a unique touch to your images, mirror is the perfect jetpack compose tool for the job.

Tech Stack

  • Kotlin
  • Jetpack Compose
  • Material Design 3

Installation

You can add the library to your project using jitpack.io

  • Add the code below to your project's settings.gradle file
repositories {
    ...
    maven { url "https://jitpack.io" }
}
  • In build.gradle of app module, include this dependency
  
dependencies {
    implementation 'com.github.SubhadeepSantra1998:mirror:$latest_version'
}

Usage

Wrap the content to display mirror effect in Mirror

Mirror(
    content = {
        //your composable
    }
)

Example

// images are taken from Pixabay website: "https://pixabay.com/"

val imageUrls = listOf(
    "https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058_1280.jpg", 
    "https://cdn.pixabay.com/photo/2023/07/22/10/50/ship-8143169_1280.jpg",
    "https://cdn.pixabay.com/photo/2018/04/12/15/51/nature-3313832_1280.jpg",
    "https://cdn.pixabay.com/photo/2016/10/09/05/49/autumn-1725205_1280.jpg",
)

Scaffold(
modifier = Modifier
.fillMaxSize(),
topBar = {
    TopAppBar(
        title = {
            Text(text = "Mirror Efect")
        }
    )
}
) { paddingValue ->

    LazyRow(
        modifier = Modifier
            .fillMaxSize()
            .padding(paddingValue)
            .padding(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {

        items(imageUrls) { url ->

            Mirror(
                content = {
                    Image(
                        painter = rememberCoilPainter(
                            request = ImageRequest.Builder(LocalContext.current)
                                .crossfade(durationMillis = 1000)
                                .data(url)
                                .placeholder(R.drawable.ic_placeholder)
                                .error(R.drawable.ic_placeholder)
                                .build()
                        ),
                        contentDescription = null,
                        modifier = Modifier
                            .fillParentMaxWidth()
                            .height(300.dp)
                            .clip(RoundedCornerShape(14.dp)),
                        contentScale = ContentScale.Crop
                    )
                }
            )
        }
    }
}

Screenshots

Image 1 Image 2
Image 3 Image 4

Customization

The opacity of the Mirror can be changed according to the needs

Mirror(
    opacity = 0.60f,
    content = {
        //your composable
    }
)

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐
Also, follow me on github and linkedIn to stay updated with my projects! 🤩

About

Mirror effect on images with jetpack compose

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages