Why LazyVerticalGrid is not showing two columns with first all containing all images and second with all the names in android jetpack compose?

Question

I am trying to display a list of images and the it's names , where the first all column should contain all the images from the list and second column should contain all the names. But , it's only showing names in both the columns like this

I want all these names to be in second column and the images in first column. Below is the code for my Composable PlayScreen

// Play Screen to practice the learnt words

@Composable
fun PlayScreen() {
    // Create a ViewModel to handle the logic and data for the Composable
    val viewModel: PractiseViewModel = viewModel()
    val imageInfoList = viewModel.imageInfoList.value

    LazyVerticalGrid(cells = GridCells.Fixed(2)) {
        items(imageInfoList.size) { index ->
            ImageInfoCard(imageInfoData = imageInfoList[index])
            Text(
                text = imageInfoList[index].name,
                modifier = Modifier
                    .padding(8.dp)
                    .background(Color.Red)
                    .fillMaxWidth()
                    .height(100.dp),
                style = TextStyle(fontSize = 16.sp),
                textAlign = TextAlign.Center,
            )
        }
    }
}

fun generateImageList(): List<ImageInfoData> {
    val images = listOf(
        R.drawable.apple,
        R.drawable.mango,
        R.drawable.banana,
        R.drawable.coconut,
        R.drawable.orange
    )

    val imageNames = listOf("Apple", "Mango", "Banana", "Coconut", "Orange")
    val shuffledNames = imageNames.shuffled()

    return images.zip(shuffledNames) { image, name ->
        ImageInfoData(image, name)
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ImageInfoCard(imageInfoData: ImageInfoData) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp),
        onClick = {
            // Handle click event here
        }
    ) {
        Column {
            Image(
                painter = painterResource(id = imageInfoData.imageResId),
                contentDescription = imageInfoData.name,
                modifier = Modifier
                    .background(Color.Green)
                    .width(180.dp)
                    .height(100.dp),
                contentScale = ContentScale.Inside
            )
        }
    }
}

@Preview
@Composable
fun PlayScreenPreview() {
    PlayScreen()
}

Below is the viewmodel that is used in PlayScreen PractiseViewModel

class PractiseViewModel:ViewModel() {

    //MutableStateFlow to hold the list of ImageInfoData

    private val _imageInfoList = MutableStateFlow<List<ImageInfoData>>(emptyList())
    val imageInfoList:StateFlow<List<ImageInfoData>> get() = _imageInfoList

    init {
        viewModelScope.launch {
            _imageInfoList.value = generateImageList()
        }
    }
}

Below is the data class that is used ImageInfoData

data class ImageInfoData(val imageResId:Int, val name:String)

I have tried using LazyverticalGrid and LazyColumns inside a LazyColumn but I am getting the same issue.

Answer 1

You need to separate the items, like

if (index % 2 == 0) {
  ImageInfoCard(...)
} else {
  Text(...)
}

Answer 2

I have copiled your code and get this result by changing the height of the text which you have given 100.dp was occupying all the heights of the item.

You can find the complete example from the GITs.

https://gist.github.com/chiragthummar/31689d97dbb5579199a1e556d21a40d9

Code Output