Jetpack Compose - Centering Text

Issue

I am using Jetpack Compose to create a simple flash card. The idea is that you click the flash card and it will give you the answer. However, I am stuck on a basic problem.

Unfortunately... I could not even find the official documentation, so my learning style has been trusting the autocorrect system...

Anyway, I believe the issue is either with Box() or Text(). I have added a Align.CenterEnd for the Gravity of the box. However, this seems to be the only way for centering in terms for the box. On the other hand, Text() does not give any methods to do so (It has gravity but it doesnt seem to be changing anything)

A hand in the right direction would be amazing.

On a side note, I know this would be giving free answers. But how would I change the text of $question inside the on click. As I thought Composables refresh?... thus, should regenerate on the screen? maybe not?

Thanks!

 val typography = MaterialTheme.typography

        val context = ContextAmbient.current
        var question = "How many Bananas should go in my Smoothie?"


        Column(modifier = Modifier.padding(30.dp).then(Modifier.fillMaxWidth())
                .then(Modifier.wrapContentSize(Alignment.Center))
                .clickable(onClick = { Toast.makeText(context, "3 Bananas are needed!", Toast.LENGTH_LONG).show()} ) /*question = "3 Bananas required"*/
                .clip(shape = RoundedCornerShape(16.dp))) {
            Box(modifier = Modifier.preferredSize(350.dp)
                    .gravity(align = Alignment.CenterHorizontally)
                    .border(width = 4.dp, color = Gray, shape = RoundedCornerShape(16.dp)),
            shape = RoundedCornerShape(2.dp),
            backgroundColor = DarkGray,
            gravity = Alignment.CenterEnd) {
                Text("$question",
                style = typography.h4,
                )
            }
        }

Solution

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("Question 1 : How many cars are in the garage?",
                Modifier.padding(16.dp),
                textAlign = TextAlign.Center,
                style = typography.h4,
        )

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.

Answered By - Gabriele Mariotti