Jetpack Compose - Row not showing 2nd element

Question

I just started to learn Kotlin and Jetpack Compose using Androids developer pathways.

Currently I am stuck on a practice as my Row-Composable doesn't seem to work as it should as the 2nd elements in the row are not shown. All I get is a column with 2 entries (Top left and Bot left).

The result should look like this Android Developer Composables Practice

I compared my code to the solution code provided multiple times but can't find the difference which is causing this problem - hope you can help me.

@Composable
fun ComposeQuadrantApp()
{
    Column(Modifier.fillMaxWidth()) {
        Row(Modifier.weight(1f)
        )
        {
            //Top left
            ComposableInfoCard(
                title = stringResource(R.string.topleft_title),
                description = stringResource(R.string.topleft_description),
                backgroundColor = Color(0xFFEADDFF),
                modifier = Modifier.weight(1f)
            )
            //Top right
            ComposableInfoCard(
                title = stringResource(R.string.topright_title),
                description = stringResource(R.string.topright_description),
                backgroundColor = Color(0xFFD0BCFF),
                modifier = Modifier.weight(1f)
            )
        }

        Row(
            Modifier.weight(1f)
        ){
            //Bot left
            ComposableInfoCard(
                title = stringResource(R.string.botleft_title),
                description = stringResource(R.string.botleft_description),
                backgroundColor = Color(0xFFB69DF8),
                modifier = Modifier.weight(1f)
            )
            //Bot right
            ComposableInfoCard(
                title = stringResource(R.string.botright_title),
                description = stringResource(R.string.botright_description),
                backgroundColor = Color(0xFFF6EDFF),
                modifier = Modifier.weight(1f)
            )
        }
    }
}


@Composable
private fun ComposableInfoCard(
    modifier: Modifier = Modifier,
    title: String,
    description: String,
    backgroundColor: Color) {

    Column (
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier
            .fillMaxSize()
            .background(backgroundColor)
            .padding(16.dp)
        ){
            Text(
                text = title,
                fontWeight = FontWeight.Bold,
                modifier = Modifier.padding(bottom = 16.dp))
            Text(
                text = description,
                textAlign = TextAlign.Justify)
    }
}

Edit:

I found the problem. The argument in the Column Composable in my ComposableInfoCard function should be modifier = modifier.fillMaxSize()... instead of a capital written "Modifier". Could someone explain why this leads to the mentioned problem? I think I don't understand the modifier correctly yet..

Answer 1

The Problem is about your ComposableInfoCard. You did set weight to it but you dont use it. Here is my change for you:

@Composable
private fun ComposableInfoCard(
    modifier: Modifier = Modifier,
    title: String,
    description: String,
    backgroundColor: Color
) {

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center,
    modifier = modifier
        .fillMaxHeight()
        .background(backgroundColor)
        .padding(16.dp)
) {
    Text(
        text = title,
        fontWeight = FontWeight.Bold,
        modifier = Modifier.padding(bottom = 16.dp)
    )
    Text(
        text = description,
        textAlign = TextAlign.Justify
    )
}
}

Happy Coding.....