In the view system, a child view in a FrameLayout ...

# compose

[fengdai]

In the view system, a child view in a FrameLayout can be bigger than its parent, and be clipped to show only part of its content. How can I achieve this effect in Jetpack Compose?

[Ben Trengrove [G]]

Modifier.clipToBounds() or get fancy with Modifier.clip(CircleShape)

[fengdai]

The problem is that the child can’t be bigger than its parent’s bounds in Jetpack Compose, so you have nothing to clip.

[fengdai]

Here is a simplest example:

Box(
    modifier = Modifier.fillMaxSize()
) {
    Text(
        text = "Very Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong",
        modifier = Modifier.width(1000.dp),
        fontSize = 38.sp
    )
}

[fengdai]

Oh. I found wrapContentWidth(unbound = true) works:

Box(
    modifier = Modifier.fillMaxSize()
        .wrapContentWidth(unbounded = true)
) {
    Text(
        text = "Very Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong",
        modifier = Modifier.width(1000.dp),
        fontSize = 38.sp
    )
}

[Tobias Suchalla]

There's also the possibility of modifying the constraints of the child:

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clipToBounds
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layout
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.singleWindowApplication

fun main() = singleWindowApplication {
    Box(
        modifier = Modifier
            .size(100.dp, 100.dp)
            .border(Dp.Hairline, Color.Black)
            .clipToBounds(),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Loooooooooooooooooooooooong",
            modifier = Modifier.withoutWidthConstraints()
        )
    }
}

// <https://github.com/JetBrains/compose-jb/blob/master/examples/widgets-gallery/common/src/commonMain/kotlin/org/jetbrains/compose/demo/widgets/ui/utils/LayoutModifiers.kt>
fun Modifier.withoutWidthConstraints() = layout { measurable, constraints ->
    val placeable = measurable.measure(constraints.copy(maxWidth = Int.MAX_VALUE))
    layout(constraints.maxWidth, placeable.height) {
        placeable.place(0, 0)
    }
}

It does feel somewhat hacky, though :D

[fengdai]

@Tobias Suchalla Thanks!

[Adam Powell]

If this weren't possible then it also wouldn't be possible to write scrolling containers and modifiers 🙂