CODEWITHSUNDEEP
android-jetpack-compose
SARRAN N
SARRAN N

Reputation: 196

How to create grid layout for images in jetpack compose?

I have tried the below code it shows error at Column

val images = (0..8).toList()
    
    LazyVerticalGrid(
        cells = GridCells.Fixed(3)
    ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Image(...)
                Image(...)
                Image(...) //Like wise eight images 
                
            }
        }

Upvotes: 1

Views: 2044

Answers (4)

Nikunj
Nikunj

Reputation: 4157

You require to add items in LazyVerticalGrid as below.

val images = (0..8).toList()
    
    LazyVerticalGrid(
        cells = GridCells.Fixed(3)
    ) {
        items(images.size) {  // ---------> You need to add this
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Image(...)
                Image(...)
                Image(...) //Like wise images 
    
            }
        }
    }

Upvotes: 1

Richard Onslow Roper
Richard Onslow Roper

Reputation: 6863

LazyList and LazyColumn are written in DSL. You cannot use Composables directly inside them. I assume the error is the same old @Composable invocations can only happen.... bla bla bla. So just like lazy column, all the lazy composables offer the item scope, which is actually a Composable scope. Hence if you need to add an item here, you could just

val images = (0..8).toList()
    
    LazyVerticalGrid(
        cells = GridCells.Fixed(3)
    ) {
          item{
            Column(horizontalAlignment = Alignment.CenterHorizontally){
                Image(...)
                Image(...)
                Image(...) //Like wise eight images 
                
            }
          }
        }

which would produce a single element in the list, that is, a column with three images. If you instead wanted these images to be the elements, you just need to remove the Column call and do something like

val images = (0..8).toList()
    
    LazyVerticalGrid(
        cells = GridCells.Fixed(3)
    ) {
            items {
                Image(...)
                Image(...)
                Image(...) //Like wise eight images 
            }
        }

This will make them direct children of the Lazy Grid

There is also a better approach

    LazyVerticalGrid(
        cells = GridCells.Fixed(3)
    ) {
           items((0..8).toList()) { element ->
                Image(...) // Pass in the element here
            }
        }

In theory, you could also,

val images = (0..8).toList()
    
    LazyVerticalGrid(
        cells = GridCells.Fixed(3)
    ) {
            repeat(8) {
                Image(images[it]
            }
        }

Upvotes: 0

Raw Hasan
Raw Hasan

Reputation: 1396

    val images = (0..8).toList()

    LazyVerticalGrid(
        cells = GridCells.Fixed(3)
    ) {
        items(images) { image ->
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Text(image.toString())
            }
        }
    }

Upvotes: 0

Phil Dukhov
Phil Dukhov

Reputation: 88257

Like with any other compose lazy view, you need to add items, not just place composables inside.

Check out methods available in LazyGridScope: you can add items by count, enumerate collection or add single item. Check out more in the documentation.

val images = (0..8).toList()

LazyVerticalGrid(
    cells = GridCells.Fixed(3)
) {
    items(8) { i ->
        Image(...)
    }
    items(images) { image ->
        Image(...)
    }
    item {
        // single item
        Image(...)
    }
}

Upvotes: 3

Related Questions