Jetpack Compose - how to center text in ClickableText

Question

In Jetpack Compose, when using Text, we can center text using TextAlign:

Text(
    text = "How many cars are in the garage",
    textAlign = TextAlign.Center
)

But if we're looking to get the position of a click within a Text composable, we use ClickableText:

ClickableText(
        text = AnnotatedString("Click Me"),
        onClick = { offset ->
            Log.d("ClickableText", "$offset -th character is clicked.")
        }
    )

However I don't see how to center text in ClickableText? I can use gravity, but that will only center the component, not the text inside of it.

Answer 1

You can define the textAlign in the style parameter:

ClickableText(
    text = AnnotatedString("Click Me"),
    style = TextStyle(
        textAlign = TextAlign.Center),
    onClick = { offset ->

    }
)