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

Chris Johnson

12/06/2021, 10:15 PM
When using the
Text
composable, it seems the text is wrapping to a new line when it does not need to because the the text is so long and has no spaces in between. I noticed if I add spaces to the text it will wrap correctly. First image is wrong (current behavior) second image is what I want. Is this a bug with how Text calculates its
MultiParagraph
object? Or is there a setting I'm missing... Code and images in 🧵
Copy code
val annotatedString = buildAnnotatedString {
    append(stringResource(id = R.string.attachment))
    withStyle(SpanStyle(ColorPrimary())) {
        append("sample file name here that is long but wraps correctly because I added spaces.pdf")
    }
}
Text(text = annotatedString, style = typography.body1, color = ColorSecondary(), modifier = Modifier
    .clickableNoIndication { onPdfClicked() }
    .clip(RoundedCornerShape(spacing_standard))
    .background(ColorSurfaceVariant())
    .padding(spacing_standard))
c

Casey Brooks

12/06/2021, 10:28 PM
I feel like that's how pretty much everything handles text wrapping, that doesn't look wrong to me at all. The text layout algorithm will not break a word in the middle unless absolutely necessary, which is really only when the word is longer than a full line. For example, see how the same thing happens in both the editor and the page for this HTML snippet
c

Chris Johnson

12/06/2021, 10:32 PM
Totally makes sense when I think about it holistically. I wouldn't have a problem with the implementation except that the old
TextView
seems to handles it differently and I'm trying to reproduce that 😕 .
e

efemoney

12/07/2021, 5:53 PM
Where is an example of this old textview behavior because I think it handles it just like compose does by default
c

Chris Johnson

12/07/2021, 6:43 PM
Copy code
<TextView
    android:id="@+id/messageBubble"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
  
    android:paddingStart="10dp"
    android:paddingTop="5dp"
    android:paddingEnd="10dp"
    android:paddingBottom="6dp"
    tools:visibility="visible" />
This ^. I noticed if I remove the padding it behaves like compose does. But if I add that same padding to my composable it still wraps prematurely