Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create bulleted text list in Android Jetpack Compose?

I want something like this:

• Hey this is my first paragraph.
• Hey this is my second paragraph.
  And this is the second line.
• Hey this is my third paragraph.
like image 470
CodeWithVikas Avatar asked Sep 09 '25 17:09

CodeWithVikas


2 Answers

Found it while brainstorming. Just another approach with annotated string and only one Text.

val bullet = "\u2022"
    val messages = listOf(
        "Hey This is first paragraph",
        "Hey this is my second paragraph. Any this is 2nd line.",
        "Hey this is 3rd paragraph."
    )
    val paragraphStyle = ParagraphStyle(textIndent = TextIndent(restLine = 12.sp))
    Text(
        buildAnnotatedString {
            messages.forEach {
                withStyle(style = paragraphStyle) {
                    append(bullet)
                    append("\t\t")
                    append(it)
                }
            }
        }
    )

update: screenshot of output enter image description here

like image 179
CodeWithVikas Avatar answered Sep 13 '25 09:09

CodeWithVikas


I don't know if it can meet expectations,please try

@Preview(showBackground = true)
@Composable
fun TestList() {
    val list = listOf(
        "Hey This is first paragraph",
        "Hey this is my second paragraph. Any this is 2nd line.",
        "Hey this is 3rd paragraph."
    )
    LazyColumn {
        items(list) {
            Row(Modifier.padding(8.dp),verticalAlignment = Alignment.CenterVertically) {
                Canvas(modifier = Modifier.padding(start = 8.dp,end = 8.dp).size(6.dp)){
                    drawCircle(Color.Black)
                }
                Text(text = it,fontSize = 12.sp)
            }
        }
    }
}
like image 40
Yshh Avatar answered Sep 13 '25 09:09

Yshh