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