Hello :android-wave: , I'm currently trying to wrap some text around an image like the screenshot below. Does anyone have an idea if there's an API that exists in Compose to do this? Or is this a custom Canvas thing that I need to look into?

This type of text layout currently is not possible in Compose.

Oh darn 😕. Are you saying it's being considered? 😏 @Halil Ozercan

b/139326808 could use some +1s 😄

haha, i added a +1, thanks for linking it

Could you use

InlineTextContent

?

@chatterInDaSkull huh, that's an interesting idea. sounds promising 🤞🏻

If that does work please update this thread, I have 0 doubts that someone in the future will find it very useful 🙂

absolutely, gonna give it a try in a bit

I'm sorry that you are going to be kind of disappointed.

InlineTextContent

does exactly what its name suggests; it inlines the content. So, content is placed on a single line, other lines do not wrap around it 😕

yeah this is the best i get from

InlineTextContent

BIY version (two frame layout): 1. Constraint the text to the right region to have a maximum height 2. Use TextLayoutResult to determine what text was drawn in first text region 3. Draw rest of text below (this will be delayed a frame)

huh interesting, thanks Sean. i may give that a shot

Tried a rudimentary experiment with this:

@Preview
@Composable
private fun TextWrappedAroundBox() {
    val text = remember {
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor " +
            "incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisss nostrud " +
            "exercitation ullamco laboris nisi ut aliquip ex ea nisi commodo consequat. Duis aute " +
            "irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla " +
            "pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia " +
            "deserunt mollit anim id est laborum."
    }
    var overflowingText by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
    ) {
        Row(
            modifier = Modifier
                .height(50.dp)
                .fillMaxWidth()
        ) {
            Box(
                modifier = Modifier
                .size(50.dp)
                .background(color = Color.Red)
            )
            Text(
                text = text,
                maxLines = 3,
                modifier = Modifier.weight(1f).padding(start = 2.dp),
                overflow = TextOverflow.Clip,
                onTextLayout = { textLayoutResult ->
                    if (textLayoutResult.hasVisualOverflow) {
                        val lineEndIndex = textLayoutResult.getLineEnd(
                            lineIndex = 2, // Max lines - 1
                            visibleEnd = true
                        )

                        overflowingText = text.substring(lineEndIndex)
                    }
                },
            )
        }

        if (overflowingText.isNotBlank()) {
            Text(
                text = overflowingText,
                modifier = Modifier.fillMaxWidth(),
            )
        }
    }
}

Oh nice, definitely closer to what we'd want