My code doesn't work

[ctedltd]

I am missing something in my code that doesn't allow for Compose Quadrant to come out 2 on top and 2 on the bottom but all side by side. What am I missing? Thanks!
package com.example.composableinfo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.composableinfo.ui.theme.ComposableInfoTheme

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposableInfoTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background,
) {
ComposeInfoApp()
}
}
}
}
}

data class ComposableInfo(val title: String, val description: String)

@composable
fun ComposableCard(composableInfo: ComposableInfo) {
Card(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
.weight(1f)
.background(Color.White),
elevation = 4.dp
) {
Column(
modifier = Modifier
.padding(16.dp)
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = composableInfo.title,
fontWeight = FontWeight.Bold,
fontSize = 18.sp,
color = Color.Blue,
modifier = Modifier.padding(bottom = 16.dp)
)
Text(
text = composableInfo.description,
fontSize = 14.sp
)
}
}
}

@composable
fun ComposeInfoApp() {
val composables = listOf(
ComposableInfo(
title = "Text Composable",
description = "Displays text and follows the recommended Material Design guidelines."
),
ComposableInfo(
title = "Image Composable",
description = "Creates a composable that lays out and draws a given Painter class object."
),
ComposableInfo(
title = "Row Composable",
description = "A layout composable that places its children in a horizontal sequence."
),
ComposableInfo(
title = "Column Composable",
description = "A layout composable that places its children in a vertical sequence."
)
)

Column(
    modifier = Modifier.fillMaxSize()
) {
    Row(
        modifier = Modifier.fillMaxWidth().weight(1f)
    ) {
        composables.subList(0, 2).forEach { composable ->
            ComposableCard(composable)
        }
    }

    Row(
        modifier = Modifier.fillMaxWidth().weight(1f)
    ) {
        composables.subList(2, 4).forEach { composable ->
            ComposableCard(composable)
        }
    }
}

}

@Preview(showBackground = true)
@composable
fun ComposeInfoAppPreview() {
ComposableInfoTheme {
ComposeInfoApp()
}
}

[entropia9]

Hi, could you format the code for better readability?
I ended up copying it to new Android project and I found the issue. In Card Composable you have .weight(1f). The problem is that there are two .weight() One is for RowScope, the other for ColumnScope, I was getting error because in ComposableCard function it is not know which should be used. I solved it this way:

1. I added optional modifier parameter to ComposableCard:

fun ComposableCard(composableInfo: ComposableInfo, modifier: Modifier=Modifier) {
    Card(
        modifier = modifier
            .fillMaxSize()
            .padding(16.dp)
            .background(Color.White),
           elevation = 4.dp
    ) {
// rest of the code
}

2. I passed Modifier.weight(1f) as modifier when calling ComposableCard

        Row(
            modifier = Modifier.fillMaxWidth().weight(1f)
        ) {
            composables.subList(0, 2).forEach { composable ->
                ComposableCard(composable, Modifier.weight(1f))
            }
        }

        Row(
            modifier = Modifier.fillMaxWidth().weight(1f)
        ) {
            composables.subList(2, 4).forEach { composable ->
                ComposableCard(composable, Modifier.weight(1f))
            }
        }

This way it's using RowScope .weight() and shows all four cards.

[ctedltd]

Got it works thanks!

[ctedltd]

Cool Thanks, got it.

…

On Fri, Sep 1, 2023 at 9:17 AM entropia ***@***.***> wrote: Hi, could you format the code for better readability? I ended up copying it to new Android project and I found the issue. In Card Composable you have .weight(1f). The problem is that there are two .weight() One is for RowScope, the other for ColumnScope, I was getting error because in ComposableCard function it is not know which should be used. I solved it this way: 1. I added optional modifier parameter to ComposableCard: fun ComposableCard(composableInfo: ComposableInfo, modifier: Modifier=Modifier) { Card( modifier = modifier .fillMaxSize() .padding(16.dp) .background(Color.White), elevation = 4.dp ) { // rest of the code } 1. I passed Modifier.weight(1f) as modifier when calling ComposableCard Row( modifier = Modifier.fillMaxWidth().weight(1f) ) { composables.subList(0, 2).forEach { composable -> ComposableCard(composable, Modifier.weight(1f)) } } Row( modifier = Modifier.fillMaxWidth().weight(1f) ) { composables.subList(2, 4).forEach { composable -> ComposableCard(composable, Modifier.weight(1f)) } } This way it's using RowScope .weight() and shows all four cards. [image: Screenshot_20230901_180419] <https://user-images.githubusercontent.com/66324640/265074081-55a6ea29-459a-4484-88ec-478839cbbd86.png> — Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BCGAI7K7YGHMTIZRS3IVV6LXYIDBNANCNFSM6AAAAAA4GAZPBE> . You are receiving this because you authored the thread.Message ID: <google-developer-training/basic-android-kotlin-compose-training-practice-problems/issues/10/1703000404 @github.com>