https://kotlinlang.org logo
#compose
Title
# compose
r

Ryan Simon

06/23/2022, 5:00 PM
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?
h

Halil Ozercan

06/23/2022, 5:07 PM
This type of text layout currently is not possible in Compose.
r

Ryan Simon

06/23/2022, 5:08 PM
Oh darn 😕. Are you saying it's being considered? 😏 @Halil Ozercan
h

Halil Ozercan

06/23/2022, 5:10 PM
b/139326808 could use some +1s 😄
❤️ 2
r

Ryan Simon

06/23/2022, 5:12 PM
haha, i added a +1, thanks for linking it
c

chatterInDaSkull

06/23/2022, 5:15 PM
Could you use
InlineTextContent
?
r

Ryan Simon

06/23/2022, 5:36 PM
@chatterInDaSkull huh, that's an interesting idea. sounds promising 🤞🏻
👍 1
c

chatterInDaSkull

06/23/2022, 5:37 PM
If that does work please update this thread, I have 0 doubts that someone in the future will find it very useful 🙂
r

Ryan Simon

06/23/2022, 5:38 PM
absolutely, gonna give it a try in a bit
h

Halil Ozercan

06/23/2022, 5:43 PM
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 😕
😢 2
r

Ryan Simon

06/23/2022, 5:49 PM
yeah this is the best i get from
InlineTextContent
think i'm gonna try an
AndroidView
next with this library: https://github.com/deano2390/FlowTextView
s

Sean McQuillan [G]

06/23/2022, 6:33 PM
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)
It's not a great API, but if you need this layout, the above will get it 🙂
r

Ryan Simon

06/23/2022, 6:51 PM
huh interesting, thanks Sean. i may give that a shot
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
thanks for the insights / ideas though! hoping we get official support for this at some point
s

samuel

07/31/2022, 2:08 PM
Tried a rudimentary experiment with this:
Copy code
@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(),
            )
        }
    }
}
Doesn’t really scale well but fun to try out anyway 😄
r

Ryan Simon

07/31/2022, 2:50 PM
Oh nice, definitely closer to what we'd want
4 Views