How we can show this RED view offset 30% from below ?

# compose

[Kulwinder Singh]

How we can show this RED view offset 30% from below ?

[Kulwinder Singh]

@Composable
fun TicketCard() {
    Box(
        modifier = Modifier.fillMaxSize(),
    ) {
        ....background...
        Box(
            modifier = Modifier
                .padding(bottom = 300.dp)
                .size(100.dp)
                .background(Color.Red)
                .align(Alignment.BottomCenter)
        ) {

        }
    }
}

This is current implementation

[joney]

You could try using ConstraintLayout 👉 https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/main/java/com/example/jetpackcompose/layout/ConstraintLayoutActivity.kt#L192

[nitrog42]

I think you can make your own Modifier.offset() modifier

[Kulwinder Singh]

@nitrog42 how can i create ?

[Kulwinder Singh]

Any reference ?

[nitrog42]

yes here's my code :

[nitrog42]

@Composable
fun TicketCard() {
    Box(
        modifier = Modifier.fillMaxSize(),
    ) {
        Box(
            modifier = Modifier
                .offsetPercent(0.70f)
                .size(100.dp)
                .background(Color.Red)
        ) {
        }
    }
}

private fun Modifier.offsetPercent(vertical: Float) = this.then(OffsetModifier(vertical))

private class OffsetModifier(
    val vertical: Float
) : LayoutModifier {
    override fun MeasureScope.measure(
        measurable: Measurable,
        constraints: Constraints
    ): MeasureResult {
        val placeable = measurable.measure(constraints)
        return layout(placeable.width, placeable.height) {
            placeable.placeRelative(0, (constraints.maxHeight * vertical).roundToInt())
        }
    }
}

[nitrog42]

it's a very rough way to do it, I'm not sure it would be compose-approved 😄 Using ConstraintLayout might be "safer" to do but it's awesome how quickly I could make it work

[nitrog42]

you can also do :

modifier = Modifier
    .align(Alignment.BottomCenter)
    .offsetPercent(-0.30f)
    .size(100.dp)
    .background(Color.Red)

[Kulwinder Singh]

looks good, i’m checking. i will let you know if it worked. @nitrog42 thanks

[nitrog42]

btw you don't have to use a "custom" modifier, you can also just do :

Box(
            modifier = Modifier
                .layout {
        measurable, constraints ->          
        val placeable = measurable.measure(constraints)
        return layout(placeable.width, placeable.height) {
            placeable.placeRelative(0, (constraints.maxHeight * 0.7f).roundToInt())
        }
                }
                .size(100.dp)
                .background(Color.Red)
        ) {
        }

[Kulwinder Singh]

@nitrog42 actually i think it is using Parent View’s Size, can we change it to specific view/composable ?

[nitrog42]

I don't think we can

[Cicero]

create a view with fillHeight(percentage), add your component inside and orient it to bottom

[Kulwinder Singh]

@joney Thanks, I am able to achieve it with ConstraintLayout