Jetpack Compose align Text content to center of the Scaffold

Question

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:

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

Answer 1

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

Answer 2

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

Answer 3

The content in Scaffold is a Composable function. There is no position info for items in the Composable function. In your case, the default position of Text is the top left of its parent view. The solution above putting the Text inside the Box/Colum works, as now Text can be put in the center of the Box or Colum, which takes the whole screen. Then we see Text is in the center of the screen, while actually, the truth is Text is in the center of Box or Colum.

Answer 4

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

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