CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpack-compose-text
Ranjithkumar
Ranjithkumar

Reputation: 18386

Jetpack Compose align Text content to center of the Scaffold

My Problem:

I want to place my Text() content to center of the page in Scaffold.

I tried "textAlign = TextAlign.Center" - It align the text in horizontal area alone. Not align the text in vertical area.

My code:

@Composable
fun ScaffoldWithTopBar() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Top App Bar")
                },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Filled.ArrowBack, "backIcon")
                    }
                },
                backgroundColor = MaterialTheme.colors.primary,
                contentColor = Color.White,
                elevation = 10.dp
            )
        }, content = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color(0xff8d6e63)),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {

            }
            Text(
                text = "Content of the page",
                fontSize = 30.sp,
                color = Color.White
            )
        })
}

Note: I haven't place this text into Column. I used directly.

My output:

enter image description here

Question: How to place the text into the center of the parent?

Upvotes: 3

Views: 7756

Answers (4)

Android Developer
Android Developer

Reputation: 9643

Box(
        modifier = Modifier
            .fillMaxSize()
    ) {
        Text(
            text = stringResource(id = R.string.social_list_empty),
            style = TextStyle(fontSize = 16.sp),
            modifier = Modifier
                .padding(8.dp)
                .align(Alignment.Center),
            textAlign = TextAlign.Center
        )
    }

enter image description here

Reference : For more sample codes of Jetpack Compose, check this

Upvotes: 1

Freddie
Freddie

Reputation: 210

The content in Scaffold is a Composable function in which there is no position info for items by default. In your case, the default position of Text is the top left of its parent view. The solutions putting the Text inside the Box/Colum works, as now Text is put in the center of the Box or Colum, which takes the whole screen. We see Text is in the center of the screen, while the truth is Text is in the center of Box or Colum.

Upvotes: 0

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363825

Assign the fillMaxSize() to the parent container, not to the Text:

   Box(Modifier.fillMaxSize(),
       contentAlignment = Center
   ) {
       Text(
           text = "Content of the page",
           fontSize = 30.sp,
           modifier = Modifier
               .background(Color(0xffb3e5fc)),
       )
   }

or:

Column(Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(
        text = "Content of the page",
        fontSize = 30.sp,
        modifier = Modifier
            .background(Color(0xffb3e5fc)),
    )
}

enter image description here

Upvotes: 8

Phil Dukhov
Phil Dukhov

Reputation: 87804

You need to place it inside a Box, and specify contentAlignment

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier
        .fillMaxSize()
) {
    Text(
        text = "Content of the page",
        fontSize = 30.sp,
        modifier = Modifier
            .background(Color(0xffb3e5fc)),
    )
}

If you wanna align different Box children differently, you can use .align modifier for each item. Note that it's only available inside BoxScope, also there's same modifier for Column and Row.

Box(
    modifier = Modifier
        .fillMaxSize()
) {
    Text(
        text = "Content of the page", textAlign = TextAlign.Center,
        fontSize = 30.sp,
        modifier = Modifier
            .background(Color(0xffb3e5fc))
            .align(Alignment.Center)
    )
}

Upvotes: 2

Related Questions