How to split a layout into four equal parts with Kotlin in android?

Question

I'm doing a little exercise on splitting layout into four parts on android studio, even though my code is similar to the one provided here, but my code is not giving the expected result.

@Composable
fun GiaoDien() {
        Column(Modifier.fillMaxWidth()) {
            Row(Modifier.weight(1f)){
                WriteText(
                    noidung = stringResource(R.string.noi_dung_1),
                    tieude = stringResource(R.string.tieu_de_1),
                    backgroundColor = Color(0xFF8BC34A),
                    modifier = Modifier.weight(1f)
                )
                WriteText(
                    noidung = stringResource(R.string.noi_dung_2),
                    tieude = stringResource(R.string.tieu_de_2),
                    backgroundColor = Color(0xFFEADDFF),
                    modifier = Modifier.weight(1f)
                )
            }
            Row(Modifier.weight(1f)) {
                WriteText(
                    noidung = stringResource(R.string.noi_dung_3),
                    tieude = stringResource(R.string.tieu_de_3),
                    backgroundColor = Color(0xFF03A9F4),
                    modifier = Modifier.weight(1f)
                )
                WriteText(
                    noidung = stringResource(R.string.noi_dung_4),
                    tieude = stringResource(R.string.tieu_de_4),
                    backgroundColor = Color(0xFFA7900D),
                    modifier = Modifier.weight(1f)
                )
            }
        }
    }
@Composable
fun WriteText(noidung:String,
              tieude: String,
              backgroundColor: Color,
              modifier: Modifier = Modifier
) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(backgroundColor).padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = tieude,
            modifier =Modifier.padding(bottom = 16.dp),
            fontWeight = FontWeight.Bold
        )
        Text(
            text = noidung,
            textAlign = TextAlign.Justify,
        )
    }
}

Result preview code:

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun GreetingPreview() {
    Goc__phan_tuTheme {
        GiaoDien()

    }
}

Result I got:

enter image description here

I don't know where I went wrong, please help me.

Thanks in advance!

Help me edit the code.

Answer 1

In WriteText composable fun you're using Modifier instead of modifier :

@Composable
fun WriteText(noidung:String,
              tieude: String,
              backgroundColor: Color,
              modifier: Modifier = Modifier
) {
    Column( 
// You should not have Modifier here
        modifier = modifier
            .fillMaxSize()
            .background(backgroundColor).padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = tieude,
            modifier =Modifier.padding(bottom = 16.dp),
            fontWeight = FontWeight.Bold
        )
        Text(
            text = noidung,
            textAlign = TextAlign.Justify,
        )
    }
}