0

I have the below 4 strings to be aligned side by side in a FlowRow. This is the code I have. I am not sure why even though there is some space in each line, text justification is not happening. I do not want any space after any of the lines. I want everything to be aligned with text justification.

In the following image as you see after 1st line it has some additional space which could have been taken by 2nd string and used '-' at the end.

@OptIn(ExperimentalLayoutApi::class)
@Preview
@Composable
fun JustifiedFlowRowExample() {
    val items = listOf(
        "This part will have an icon and text.",
        "Another example of a lengthy text.",
        "Short text.",
        "A very long piece of text that will wrap to the next line."
    )

    FlowRow {
        items.forEach { item ->
            JustifiedText(item)
        }
    }
}

@Composable
fun JustifiedText(text: String) {
    Row(
        modifier = Modifier.padding(4.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = buildAnnotatedString {
                withStyle(style = SpanStyle()) {
                    append(text)
                }
            },
            style = TextStyle(
                textIndent = TextIndent(firstLine = 0.5.em),
            ),
            overflow = TextOverflow.Ellipsis,
            textAlign = TextAlign.Justify,
            modifier = Modifier
                .wrapContentWidth()
                .wrapContentSize(align = Alignment.Center)
        )
    }
}

Is there any other way where in I can solve this problem? We can consider this Row to include Icons and text. For simplification i have mentioned only strings.

Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
Shriharsha Bhagwat
  • 1
  • `FlowRow` doesn't work how you expect. It cannot split view in two peaces and move it next line. If view doesn't fit, it's fully moved next line. It knows nothing about your content, and moving it next line if it's not text makes not much sense, and may be hard technically - you probably have to draw the view two times in this case. Why don't you use a single text view for all your text? why do you need it to be placed in separate views? – Phil Dukhov May 16 '23 at 12:36
  • @PhilDukhov This Row will include Icons and text. For simplification i have mentioned only strings. So Row will have something like : icon, text, icon, text, text. And I want text to use all available space in a line. – Shriharsha Bhagwat May 16 '23 at 13:21
  • check out [this answer](https://stackoverflow.com/a/70086799/3585796) – Phil Dukhov May 16 '23 at 13:37

0 Answers0