CODEWITHSUNDEEP
androidkotlinandroid-layoutandroid-jetpack-composeandroid-compose-layout
PandaPlaysAll
PandaPlaysAll

Reputation: 1377

Jetpack Compose - Centering Text

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,
                )
            }
        }

Picture of Current Content

Upvotes: 93

Views: 126501

Answers (7)

J. Doe
J. Doe

Reputation: 13103

The following is easy and works for me:

Text(modifier = Modifier.fillMaxWidth(), text = "TEST", textAlign = TextAlign.Center)

Upvotes: 8

user24765586
user24765586

Reputation: 

@Composable
private fun TextWithWrapHeightPreview() {
    Text(
        modifier = Modifier
            .fillMaxWidth()
            .height(120.dp)
            .padding(12.dp),
        textAlign = TextAlign.Center,
        text = "How many Bananas should go in my Smoothie?"
    )
}

Upvotes: 2

Ummer Siddique
Ummer Siddique

Reputation: 395

You can use textAlign = TextAlign.Center to align your text horizontal and wrapContentHeight to align your text vertical within Text composable

Horizontally center

@Preview(showBackground = true)
@Composable
private fun TextWithoutWrapHeightPreview() {
    Text(
        modifier = Modifier
            .width(200.dp)
            .height(100.dp)
            .border(
                width = 2.dp, color = Color.Gray,
                shape = RoundedCornerShape(10.dp)
            )
            .padding(16.dp),
        textAlign = TextAlign.Center,
        text = "How many Bananas should go in my Smoothie?"
    )
}

enter image description here

Vertically center

@Preview(showBackground = true)
@Composable
private fun TextWithWrapHeightPreview() {
    Text(
        modifier = Modifier
            .width(200.dp)
            .height(100.dp)
            .border(
                width = 2.dp, color = Color.Gray,
                shape = RoundedCornerShape(10.dp)
            )
            .padding(16.dp)
            .wrapContentHeight(),
        textAlign = TextAlign.Center,
        text = "How many Bananas should go in my Smoothie?"
    )
}

enter image description here

Upvotes: 2

Abhinav Chauhan
Abhinav Chauhan

Reputation: 1394

Box(
contentAlignment = Alignment.Center,
 modifier = Modifier.fillMaxHeight()
){
    Text(
      text = "Text",
      textAlign = TextAlign.Center
    )
}

Upvotes: 9

Gabriele Mariotti
Gabriele Mariotti

Reputation: 365028

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.

Upvotes: 150

Vikrant Singh Rawat
Vikrant Singh Rawat

Reputation: 119

// You can apply textAlign = TextAlign.Center

 Text( text = "My name is $name",
        color = MaterialTheme.colors.primary,
        fontSize = 32.sp,
        fontFamily = FontFamily.Cursive,
        textAlign = TextAlign.Center,
        modifier = Modifier.clickable {
            Toast.makeText(context, "Hello Friends"Toast.LENGTH_LONG).show()
        })

Upvotes: 0

Linh
Linh

Reputation: 61019

You can use textAlign to align your text horizontal and wrapContentHeight to align your text vertical within Text composable

Example centering text (both horizontal and vertical) within Text

Text(
    text = "How many cars are in the garage",
    textAlign = TextAlign.Center, // make text center horizontal
    modifier = Modifier
        .width(150.dp)
        .height(150.dp)
        .background(Color.Cyan)
        .wrapContentHeight() // make text center vertical
)

Example align bottom with center horizontal within Text

Text(
    text = "How many cars are in the garage",
    textAlign = TextAlign.Center, // make text center horizontal
    modifier = Modifier
        .width(150.dp)
        .height(150.dp)
        .background(Color.Cyan)
        .wrapContentHeight(Alignment.Bottom) // align bottom
)

Example align bottom with center horizontal within a Box

Box(modifier = Modifier
    .width(150.dp)
    .height(150.dp)
    .background(Color.Cyan),
    contentAlignment = Alignment.BottomCenter
) {
    Text(
        text = "How many cars are in the garage",
        textAlign = TextAlign.Center
    )
}

Upvotes: 82

Related Questions