Compose - Aspect Ratio Reference

What?

Jetpack Compose Modifier.aspectRatio does not let you choose the dimens used to compute the ratio.

Goal. Be able to choose the reference of the ratio based on:

• parent width
• parent height
• min(parent width, parent height)
• max(parent width, parent height)

How to integrate?

Step 1. In project root build.gradle or build.gradle.kts, add:

allprojects {
    repositories {
        maven { url 'https://jitpack.io' } // Groovy: build.gradle
        maven(url = "https://jitpack.io") // Kotlin: build.gradle.kts
    }
}

Step 2. Add the dependency in app build.gradle or build.gradle.kts:

dependencies {
    implementation("com.github.Mercandj:compose-aspect-ratio-reference:1.00.04")
}

How to use it?

Box(modifier = Modifier.width(300.dp).height(200.dp)) { // Parent
    Surface( // Child
        color = Color.Red,
        modifier = Modifier
            .aspectRatioReference(
                aspectRatioWidth = 1f,
                aspectRatioHeight = 1f,
                aspectRatioReference = AspectRatioReference.MIN_PARENT_WIDTH_PARENT_HEIGHT
            )
            .align(Alignment.Center)
    ) {}
}

Preview

About

How to support:

• Star ⭐️ this git project 🙏
• Clap 👏 on Medium 🙏