My code doesn't work - Githubissues

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() } }

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:

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
}

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. Screenshot_20230901_180419

Got it works thanks!

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:

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 }
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 https://github.com/google-developer-training/basic-android-kotlin-compose-training-practice-problems/issues/10#issuecomment-1703000404, 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>

google-developer-training / basic-android-kotlin-compose-training-practice-problems

My code doesn't work #10