androidkotlinalignmenttext-alignmenthorizontal-alignment

Can't get text centered horizontaly in quadrants


I am practising Kotlin with Android Developer and got stuck with Compose quardant project. Everything is working an looks just like it is supposed to except for some of texts. The screen is devided to 4 quadrants with 2 text block in each. What bothers me is the fact, that one of texts in each quadrant is not responding for my TextAlign.Center while the other is.

Screen of desired outcome: Screen of desired outcome:

Screen of actual outcome:

Screen of actual outcome:

First texts named Title (firstTitle, secondTitle, thirdTitle, fourthTitle) are not centered. They seem aligned to left.

Second texts named Text (firstText, secondText, thirdText, fourthText) are responding as expected, originaly were TextAlign.Center but after changed to Justify.

I tried to play with Alignment through different places in the code but it never helped. Please help me find out what am I missing.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeQuadrantTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    WholePage(
                        firstTitle = stringResource(R.string.First_Title),
                        firstText = stringResource(R.string.First_Text),
                        secondTitle = stringResource(R.string.Second_Title),
                        secondText = stringResource(R.string.Second_Text),
                        thirdTitle = stringResource(R.string.Third_Title),
                        thirdText = stringResource(R.string.Third_Text),
                        fourthTitle = stringResource(R.string.Fourth_Title),
                        fourthText = stringResource(R.string.Fourth_Text),
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun WholePage(firstTitle: String, firstText: String, secondTitle: String, secondText: String, thirdTitle: String, thirdText: String, fourthTitle: String, fourthText: String, modifier: Modifier = Modifier) {
    Column(modifier = Modifier.fillMaxSize()
    ) {
        Row(modifier = Modifier.weight (1f)) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .weight (1f)
                    .background(Color(0xFFEADDFF))
                    .wrapContentSize(align = Alignment.Center)
                    .padding(16.dp)
            ){
                Text(
                    //First title is upper left corner.
                    text = firstTitle,
                    fontWeight = FontWeight.Bold,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
                Text(
                    //First text is upper left corner.
                    text = firstText,
                    textAlign = TextAlign.Justify,
                )
            }
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .weight (1f)
                    .background(Color(0xFFD0BCFF))
                    .wrapContentSize(align = Alignment.Center)
                    .padding(16.dp)
            ) {
                Text(
                    //Second title is upper right corner.
                    text = secondTitle,
                    textAlign = TextAlign.Center,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
                Text(
                    //Second text is upper right corner.
                    text = secondText,
                    textAlign = TextAlign.Justify,
                )
            }
        }
        Row(modifier = Modifier.weight (1f)) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .weight (1f)
                    .background(Color(0xFFB69DF8))
                    .padding(16.dp)
                    .wrapContentSize(align = Alignment.Center)
            ) {
                Text(
                    //Third title is lower left corner.
                    text = thirdTitle,
                    textAlign = TextAlign.Center,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
                Text(
                    //Third text is lower left corner.
                    text = thirdText,
                    textAlign = TextAlign.Justify,
                )
            }
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .weight (1f)
                    .background(Color(0xFFF6EDFF))
                    .wrapContentSize(align = Alignment.Center)
                    .padding(16.dp)
            ) {
                Text(
                    //Fourth title is lower right corner.
                    text = fourthTitle,
                    textAlign = TextAlign.Center,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
                Text(
                    //Fourth text is lower right corner.
                    text = fourthText,
                    textAlign = TextAlign.Justify,
                )
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ComposeQuadrantTheme {
        WholePage(
            firstTitle = stringResource(R.string.First_Title),
            firstText = stringResource(R.string.First_Text),
            secondTitle = stringResource(R.string.Second_Title),
            secondText = stringResource(R.string.Second_Text),
            thirdTitle = stringResource(R.string.Third_Title),
            thirdText = stringResource(R.string.Third_Text),
            fourthTitle = stringResource(R.string.Fourth_Title),
            fourthText = stringResource(R.string.Fourth_Text)
        )    }
}```

Solution

  • The Text's textAlign = TextAlign.Center only centers the multiline text inside the Text. If you want to center the Text composable itself this must be done by the container of the Text, in your case the Column.

    You can center the content of a Column with this:

    horizontalAlignment = Alignment.CenterHorizontally