Hii, I want to center align last item if it is single item in LazyVerticalGrid. Is that possible usi...

# compose

[gowtham 6674]

Hii, I want to center align last item if it is single item in LazyVerticalGrid. Is that possible using LazyVerticalGrid or i need to use custom layout?

[Jonas de Faria Alves]

You can increase the last item's horizontal span based on its index and the number of columns.

[gowtham 6674]

I'm using LazyVerticalGrid like shown below

LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            modifier = Modifier
                .wrapContentSize()
                .background(color = MaterialTheme.cliqColors.surface.white1),
            contentPadding = PaddingValues(vertical = 12.dp, horizontal = 12.dp),
            horizontalArrangement = Arrangement.spacedBy(12.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp),
        ) {
            items(3){
     MyCard()
}

[gowtham 6674]

@Jonas de Faria Alves increasing last item's span possible in my usage?

[Jonas de Faria Alves]

span is an argument of items(). It's available to any usages of LazyVerticalGrid.

[Jonas de Faria Alves]

Be prepared to calculate margins so the item is centered within the available width

[gowtham 6674]

ooh k @Jonas de Faria Alves i will try that

[Albert Chang]

Have you tried horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterHorizontally)?

[Stylianos Gakis]

Wait so does this work for lazy grids?
I’ve been using this for the longest time now since I thought it wasn’t quite possible. Or maybe this wasn’t possible back in compose 1.0 since these APIs didn’t exist yet?
If you figure it out and you post a full snippet that’d be amazing gowtham 👀

[Albert Chang]

This is possible since the refactoring of LazyVerticalGrid in 1.2.0.

[Stylianos Gakis]

And I guess in the case where you know you got 3 items, going with the lazy isn’t a big deal still right? Cause it feels like a waste to go with the lazy one for such a simple layout which will never make proper use of the “lazy” part of it if it only has 3 items max.

[gowtham 6674]

@Albert Chang
I tried horizontalArrangement as you said. still it shows the last element at the start of the grid. this is what i tried

LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        modifier = Modifier
            .wrapContentSize(),
        horizontalArrangement  = Arrangement.spacedBy(12.dp, Alignment.CenterHorizontally),
        verticalArrangement = Arrangement.spacedBy(12.dp),
    ) {
        items(3) {
            Text("Hello")
        }
    }

[gowtham 6674]

@Stylianos Gakis Jonas's solution did help. here is the snippet

var size = DeviceConfig.deviceWidth.pxTodp()

        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            modifier = Modifier
                .wrapContentSize(),
        ) {
            items(3, span = {
                GridItemSpan(it)
            }) {
                // last item check
                if (it == 2) {
                    Text("Hello", modifier =
                    Modifier.padding(horizontal = (size / 4).dp)
                        .background(color= Color.Red))

                } else {
                    Text("Hello", modifier = Modifier.background(color= Color.Red))
                }
            }
        } }

[gowtham 6674]

@Albert Chang @Jonas de Faria Alves @Stylianos Gakis thanks guys for your help☺️❤️

[gowtham 6674]

@Jonas de Faria Alves could you check is this what you suggested?

[Jonas de Faria Alves]

Yes, that's the idea.

[gowtham 6674]

var size = DeviceConfig.deviceWidth.pxTodp()

        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            modifier = Modifier
                .wrapContentSize(),
        ) {
            items(list.size, span = {
                      if(list.size % 2 != 0){
                val value= if(list.lastIndex==it) 2 else 1
                GridItemSpan(value)
            }else {
                GridItemSpan(1)
            }
            }) {
                // last item check
                if (list.lastIndex== it && list.size%2!=0) {
                    Text("Hello", modifier =
                    Modifier.padding(horizontal = (size / 4).dp)
                        .background(color= Color.Red))

                } else {
                    Text("Hello", modifier = Modifier.background(color= Color.Red))
                }
            }
        } }

updated answer. i made some changes in griditem span;