Jetpack Compose – Centering Text

by

To define how to align the text horizontally you can apply textAlign = TextAlign.Center in the Text:

Column(modifier = Modifier
            .padding(30.dp)
            .fillMaxWidth()
            .wrapContentSize(Alignment.Center)
            .clickable(onClick = { } ) /*question = "3 Bananas required"*/
            .clip(shape = RoundedCornerShape(16.dp)),
) {
    Box(modifier = Modifier
            .preferredSize(350.dp)
            .border(width = 4.dp, color = Gray, shape = RoundedCornerShape(16.dp)),
             alignment = Alignment.Center
    ) {
        Text(
           text = "Question 1 : How many cars are in the garage?",
           modifier = Modifier.padding(16.dp),
           textAlign = TextAlign.Center,
           style = typography.h4,
        )
      //... 
   }
}

enter image description here

About the text.

You can use something like:

var text by remember { mutableStateOf(("How many cars are in the garage?")) }

In your clickable item:

.clickable(onClick = { text= "After clicking"} )

in your Text:

  Text(text, 
        textAlign = TextAlign.Center,
        ...)

It is just a simple. Instead of a static String you can use a dynamic structure to store and update the value.

Leave a Comment