Hello :android-wave: , I'm currently trying to wra...

# compose

[Ryan Simon]

Hello 👋 , 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?

[Halil Ozercan]

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

[Ryan Simon]

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

[Halil Ozercan]

b/139326808 could use some +1s 😄

[Ryan Simon]

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

[chatterInDaSkull]

Could you use InlineTextContent?

[Ryan Simon]

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

[chatterInDaSkull]

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

[Ryan Simon]

absolutely, gonna give it a try in a bit

[Halil Ozercan]

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 😕

[Ryan Simon]

yeah this is the best i get from InlineTextContent

[Ryan Simon]

think i'm gonna try an AndroidView next with this library: https://github.com/deano2390/FlowTextView

[Sean McQuillan [G]]

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)

[Sean McQuillan [G]]

It's not a great API, but if you need this layout, the above will get it 🙂

[Ryan Simon]

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

[Ryan Simon]

didn't really like any of the potential solutions here. they either didn't work well with existing Composables / Theming or presented issues that weren't worth the time to figure out

[Ryan Simon]

thanks for the insights / ideas though! hoping we get official support for this at some point

[samuel]

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(),
            )
        }
    }
}

[samuel]

Doesn’t really scale well but fun to try out anyway 😄

[Ryan Simon]

Oh nice, definitely closer to what we'd want