Wrap content to a text with clipped shape in Compose?

Question

I have a text compose and I want to apply a triangle shape on it, I applied the tringle successfully but the text doesn't wrap inside the triangle shape, it seems that the shape doesn't cut the view to be tringle, it only draws above it or thing like that.

here is the code:

Text(
 modifier = Modifier
       .clip(TriangleShape)
        .background(
            Brush.horizontalGradient(
               listOf(
                  Color(0xff4F0D37),
                  Color(0xffD73046)
                 )
               )
            ),
  text = "150",
  color = Color.White,
)

Any tip will be appreciated :)

Answer 1

BoxWithConstraints{
val constraints = size
Text(
    modifier = Modifier
        .clip(TriangleShape)
        .background(
            Brush.horizontalGradient(
                listOf(
                    Color(0xff4F0D37),
                    Color(0xffD73046)
                )
            )
        ),
    text = "150",
    color = Color.White,
    fontSize = (constraints.width / 2) // ... Modify if necessary
)
}

Here I am using the size parameter exposed by BoxWithConstraints. This is the size of the box, which I am storing in a variable to later re-use to set the font size of the text accordingly. Text positioning can be done easily. Use Modifier.align(TopStart)

Answer 2

Here's how I did it:

Text(
    modifier = Modifier
        .clip(TriangleShape)
        .background(
            Brush.horizontalGradient(
                listOf(
                    Color(0xff4F0D37),
                    Color(0xffD73046)
                )
            )
        )
        .layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)

            layout(placeable.width * 2, placeable.height * 2) {
                placeable.placeRelative(0, 0)
            }
        },
    text = "150",
    color = Color.White,
)

I used the layout lambda expression to double the width and the height of the composable, while keeping the everything else the same. Took some messing around with rows and columns but I think this is a fitting solution.

Here's the result: