How can I have custom bullet point (color and size customisable), followed by multiline text, with b...

# compose

[Daniel Candeias]

How can I have custom bullet point (color and size customisable), followed by multiline text, with bullet point aligned to first line?

Something like this 👇
• This is a very long text which does
not fit in one line

[Daniel Candeias]

I was able to draw the circle and set the text. All wrapped in a Row component, but not sure how to align the circle/bullet to the first line.

[Zach Klippenstein (he/him) [MOD]]

Here’s an example of a layout implementation that does what you’re looking for

[Daniel Candeias]

Its a start, but i guess I need a different approach 🤔 This is based on a list of items, i would need to just have a text with prefix composable.

[Zach Klippenstein (he/him) [MOD]]

Ah, then I think the baseline alignment line should do what you need

[Zach Klippenstein (he/him) [MOD]]

Something like this

[Halil Ozercan]

Also, you said that everything is wrapped in a row. So alignBy from RowScope should work for you. https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifi[…]ut.HorizontalAlignmentLine)

[Daniel Candeias]

Baseline did the trick 🙂

In case some is looking for something similar, here is my code:

@Preview(widthDp = 100)
@Composable
fun BulletMultilineText() {
    Row(Modifier.wrapContentHeight()) {
        Box(
            modifier = Modifier
                .size(6.dp)
                .clip(CircleShape)
                .background(Color.Magenta)
                .alignBy {
                    it.measuredHeight
                }
        )

        Text(
            text = "my multiline text here",
            style = TextStyle(
                fontSize = 14.sp,
            ),
            color = Color.White,
            modifier = Modifier
                .wrapContentWidth()
                .wrapContentHeight()
                .padding(start = 4.dp)
                .alignByBaseline()
        )
    }
}

[Daniel Candeias]

Thanks you 🤜 🤛