I'm following this tutorial : .android%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-3-pathway-2%3Fhl%3Den%23codelab-https%3A%2F%2Fdeveloper.android%2Fcodelabs%2Fbasic-android-kotlin-compose-practice-grid&hl=en#0

I use the LazyVerticalGrid object to display cards. My code is not working. The "it" (in { it ->) is seen as an Integer. It should be seen as a "Topic". I do not understand what I'm doing wrong.

package com.example.buildagrid

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activitypose.setContent
import androidx.activity.enableEdgeToEdge
import androidxpose.foundation.Image
import androidxpose.foundation.border
import androidxpose.foundation.layout.Column
import androidxpose.foundation.layout.Row
import androidxpose.foundation.layout.fillMaxSize
import androidxpose.foundation.layout.padding
import androidxpose.foundation.layout.size
import androidxpose.foundation.lazy.grid.GridCells
import androidxpose.foundation.lazy.grid.LazyVerticalGrid
import androidxpose.material3.Card
import androidxpose.material3.Icon
import androidxpose.material3.MaterialTheme
import androidxpose.material3.Scaffold
import androidxpose.material3.Text
import androidxpose.runtime.Composable
import androidxpose.ui.Alignment
import androidxpose.ui.Modifier
import androidxpose.ui.graphics.Color
import androidxpose.ui.res.painterResource
import androidxpose.ui.res.stringResource
import androidxpose.ui.tooling.preview.Preview
import androidxpose.ui.unit.dp
import com.example.buildagrid.data.DataSource
import com.example.buildagrid.data.DataSource.topics
import com.example.buildagrid.model.Topic
import com.example.buildagrid.ui.theme.BuildAGridTheme

@Composable
fun TopicGrid(modifier: Modifier = Modifier) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(3)
    ) {
        items(topics) { it ->
            TopicCard(it)
        }

    }
}

@Composable
fun TopicCard(topic: Topic, modifier: Modifier = Modifier) {
    Card(
        modifier = modifier
        //.height(68.dp)
    ) {
        Row {
            Column {
                Image(
                    painter = painterResource(topic.imageRes),
                    contentDescription = "",
                    modifier = Modifier
                        .size(68.dp)
                )
            }
            Column {
                Row {
                    Text(
                        text = stringResource(topic.name),
                        style = MaterialTheme.typography.bodyMedium,
                        modifier = Modifier
                            .padding(top = 16.dp, start = 16.dp, end = 16.dp, bottom = 8.dp)
                    )
                }
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier
                        .border(1.dp, Color.Blue)
                ) {
                    Icon(
                        painter = painterResource(R.drawable.ic_grain),
                        contentDescription = "",
                        modifier = Modifier
                            .padding(start = 16.dp, end = 8.dp)
                    )
                    Text(
                        text = topic.availableCourses.toString(),
                        style = MaterialTheme.typography.labelMedium
                    )
                }
            }
        }
    }
}

The "it" (in { it ->) is seen as an Integer. It should be seen as a "topic".

object DataSource {
    val topics = listOf(
        Topic(R.string.architecture, 58, R.drawable.architecture),
        Topic(R.string.crafts, 121, R.drawable.crafts),
        Topic(R.string.business, 78, R.drawable.business),
        Topic(R.string.culinary, 118, R.drawable.culinary),
        Topic(R.string.design, 423, R.drawable.design),
        Topic(R.string.fashion, 92, R.drawable.fashion),
        Topic(R.string.film, 165, R.drawable.film),
        Topic(R.string.gaming, 164, R.drawable.gaming),
        Topic(R.string.drawing, 326, R.drawable.drawing),
        Topic(R.string.lifestyle, 305, R.drawable.lifestyle),
        Topic(R.string.music, 212, R.drawable.music),
        Topic(R.string.painting, 172, R.drawable.painting),
        Topic(R.string.photography, 321, R.drawable.photography),
        Topic(R.string.tech, 118, R.drawable.tech)
    )
}

data class Topic(
    @StringRes val name: Int,
    val availableCourses: Int,
    @DrawableRes val imageRes: Int
)

I'm following this tutorial : https://developer.android/codelabs/basic-android-kotlin-compose-practice-grid?continue=https%3A%2F%2Fdeveloper.android%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-3-pathway-2%3Fhl%3Den%23codelab-https%3A%2F%2Fdeveloper.android%2Fcodelabs%2Fbasic-android-kotlin-compose-practice-grid&hl=en#0

I use the LazyVerticalGrid object to display cards. My code is not working. The "it" (in { it ->) is seen as an Integer. It should be seen as a "Topic". I do not understand what I'm doing wrong.

package com.example.buildagrid

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activitypose.setContent
import androidx.activity.enableEdgeToEdge
import androidxpose.foundation.Image
import androidxpose.foundation.border
import androidxpose.foundation.layout.Column
import androidxpose.foundation.layout.Row
import androidxpose.foundation.layout.fillMaxSize
import androidxpose.foundation.layout.padding
import androidxpose.foundation.layout.size
import androidxpose.foundation.lazy.grid.GridCells
import androidxpose.foundation.lazy.grid.LazyVerticalGrid
import androidxpose.material3.Card
import androidxpose.material3.Icon
import androidxpose.material3.MaterialTheme
import androidxpose.material3.Scaffold
import androidxpose.material3.Text
import androidxpose.runtime.Composable
import androidxpose.ui.Alignment
import androidxpose.ui.Modifier
import androidxpose.ui.graphics.Color
import androidxpose.ui.res.painterResource
import androidxpose.ui.res.stringResource
import androidxpose.ui.tooling.preview.Preview
import androidxpose.ui.unit.dp
import com.example.buildagrid.data.DataSource
import com.example.buildagrid.data.DataSource.topics
import com.example.buildagrid.model.Topic
import com.example.buildagrid.ui.theme.BuildAGridTheme

@Composable
fun TopicGrid(modifier: Modifier = Modifier) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(3)
    ) {
        items(topics) { it ->
            TopicCard(it)
        }

    }
}

@Composable
fun TopicCard(topic: Topic, modifier: Modifier = Modifier) {
    Card(
        modifier = modifier
        //.height(68.dp)
    ) {
        Row {
            Column {
                Image(
                    painter = painterResource(topic.imageRes),
                    contentDescription = "",
                    modifier = Modifier
                        .size(68.dp)
                )
            }
            Column {
                Row {
                    Text(
                        text = stringResource(topic.name),
                        style = MaterialTheme.typography.bodyMedium,
                        modifier = Modifier
                            .padding(top = 16.dp, start = 16.dp, end = 16.dp, bottom = 8.dp)
                    )
                }
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier
                        .border(1.dp, Color.Blue)
                ) {
                    Icon(
                        painter = painterResource(R.drawable.ic_grain),
                        contentDescription = "",
                        modifier = Modifier
                            .padding(start = 16.dp, end = 8.dp)
                    )
                    Text(
                        text = topic.availableCourses.toString(),
                        style = MaterialTheme.typography.labelMedium
                    )
                }
            }
        }
    }
}

The "it" (in { it ->) is seen as an Integer. It should be seen as a "topic".

object DataSource {
    val topics = listOf(
        Topic(R.string.architecture, 58, R.drawable.architecture),
        Topic(R.string.crafts, 121, R.drawable.crafts),
        Topic(R.string.business, 78, R.drawable.business),
        Topic(R.string.culinary, 118, R.drawable.culinary),
        Topic(R.string.design, 423, R.drawable.design),
        Topic(R.string.fashion, 92, R.drawable.fashion),
        Topic(R.string.film, 165, R.drawable.film),
        Topic(R.string.gaming, 164, R.drawable.gaming),
        Topic(R.string.drawing, 326, R.drawable.drawing),
        Topic(R.string.lifestyle, 305, R.drawable.lifestyle),
        Topic(R.string.music, 212, R.drawable.music),
        Topic(R.string.painting, 172, R.drawable.painting),
        Topic(R.string.photography, 321, R.drawable.photography),
        Topic(R.string.tech, 118, R.drawable.tech)
    )
}

data class Topic(
    @StringRes val name: Int,
    val availableCourses: Int,
    @DrawableRes val imageRes: Int
)

• android
• android-jetpack-compose

• I have updated my code: ``` @Composable fun TopicGrid(modifier: Modifier = Modifier) { LazyVerticalGrid( columns = GridCells.Fixed(2) ) { items(topics.size) { topic -> TopicCard(topics[topic]) } } } ``` The solution code (github/google-developer-training/…) is different. Could somebody explain me why the solution code is working, and the difference with my code? Thanks – Fabrice Commented Mar 9 at 15:51
• Can you edit your question and share what imports you have? – tomerpacific Commented Mar 9 at 15:56

1 Answer 1

Hard to be 100% sure without the imports, but I suspect you imported the wrong items method or didn't import it at all.

So for your code, that'd mean adding this import:

import androidxpose.foundation.lazy.grid.items