Is there something like ConstraintLayout's "dimensionRatio" property in Jetpack Compose?

user_12198870 0
Viewed 1785

I wanna constraint the Image's start to parent's start, top to top, end to end when its width/height is 4/3, just like app:layout_constraintDimensionRatio="H,3:4" in Android Xml.

Here's my code below :

ConstraintLayout(
        modifier = Modifier
            .wrapContentHeight()
            .width(162.dp)
            .clip(RoundedCornerShape(10.dp))
            .background(color = Color.White)
            .clickable {
                //do something
            }
    ) {
        val (coverImg, title, status, date) = createRefs()

        Image(
            "some ignored properties",
            modifier = Modifier
                .constrainAs(coverImg) {
                    linkTo(start = parent.start, end = parent.end)
                    top.linkTo(parent.top)
                    width = Dimension.fillToConstraints
                }
                .height(102.dp)//I don't want to specify its height
        )
        
        Text(...)
        AnyOtherLayout(...)
}
android-jetpack android-constraintlayout android-jetpack-compose android
3 Answers

You can use aspectRatio modifier in jetpack compose.

modifier = Modifier.aspectRatio(0.75f)

It takes two parameters first one is a single float value that represents that aspect ratio. Like If you want to use 3:4 you have to input 3/4f or 3/4 = .75f.

2nd one is optional by default it's false. If you send true it will consider Constraints.maxHeight first.

matchHeightConstraintsFirst: Boolean = false
user_132529810

The problem with using Modifier.aspectRatio is that it doesn't seem to be taken into account when using other constraints. Aspect ratios are actually supported by ConstraintLayout itself

Take this layout for example, we constrain one dimension as a ratio of 16:9

ConstraintLayout(modifier = Modifier.fillMaxSize()) {

    val (box) = createRefs()
    val guidelineBottom = createGuidelineFromBottom(0.1f)

    Box(modifier = Modifier
        .background(Color.Blue)
        .constrainAs(box) {
            linkTo(parent.start, parent.end, startMargin = 32.dp, endMargin = 32.dp)
            linkTo(parent.top, guidelineBottom)

            width = Dimension.ratio("16:9")
            height = Dimension.fillToConstraints
        }
    )
}

That gives us this

enter image description here

If we then change the offset of guidelineBottom to decrease the available height we end up with this

val guidelineBottom = createGuidelineFromBottom(0.9f)

enter image description here

user_18437370

You can use the aspectRatio modifier:

    Image(
        painter = painterResource(id = R.drawable.xxx),
        "some ignored properties",
        contentScale = ContentScale.FillBounds,
        modifier = Modifier
            .constrainAs(coverImg) {
                linkTo(start = parent.start, end = parent.end)
                top.linkTo(parent.top)
                width = Dimension.fillToConstraints
            }
            .aspectRatio(4f/3f)
    )
user_20165620
Related