Hi folks, I’m trying to resolve the issue when car...

# compose

[Andrei Kovalev]

Hi folks, I’m trying to resolve the issue when cards overlap in grid view with zIndex, but the problem is that in lazy LazyGrid Implementation

val rows = (scope.totalSize + nColumns - 1) / nColumns
    LazyColumn(
        modifier = modifier,
        state = state,
        contentPadding = contentPadding
    ) {
        items(rows) { rowIndex ->
            Row {
                for (columnIndex in 0 until nColumns) {
                    val itemIndex = rowIndex * nColumns + columnIndex
                    if (itemIndex < scope.totalSize) {
                        Box(
                            modifier = Modifier.weight(1f, fill = true),
                            propagateMinConstraints = true
                        ) {
                            scope.contentFor(itemIndex, this@items).invoke()
                        }
                    } else {
                        Spacer(Modifier.weight(1f, fill = true))
                    }
                }
            }
        }
    }

our composable items are wrapped in a Box, but zIndex only works for direct children of the composable node.

How would you resolve this issue? Any suggestions are welcome

[Andrei Kovalev]

came up with custom lazy grid implementation and providing values to the parent Box via local composition

[patrick]

Sounds interesting! Do you mind sharing it here for other people to find should the question come up again?

[Andrei Kovalev]

yeah, sure

LazyColumn(
        modifier = modifier,
        state = state,
        contentPadding = contentPadding
    ) {
        items(rows) { rowIndex ->
            CompositionLocalProvider(
                LocalSwipableIndex provides mutableStateOf(-1),
            ) {
                Row {
                    for (columnIndex in 0 until nColumns) {
                        val itemIndex = rowIndex * nColumns + columnIndex
                        if (itemIndex < scope.totalSize) {
                            Box(
                                modifier = Modifier
                                    .weight(1f, fill = true)
                                    .zIndex(if (itemIndex == LocalSwipableIndex.current.value) 1f else 0f),
                                propagateMinConstraints = true
                            ) {
                                scope.contentFor(itemIndex, this@items).invoke()
                            }
                        } else {
                            Spacer(Modifier.weight(1f, fill = true))
                        }
                    }
                }
            }
        }
    }

So I provide state of the swipeable card for each row

and in my SwipabeCard I set current index of the card which is being swiped:

@Composable
fun SwipableProfileCard(
    index: Int,
    model : ProfileCardModel
) {
    if (swipeState.swipeProgress.value.absoluteValue > 0) {
        LocalSwipableIndex.current.value = index
    }
}

[Andrei Kovalev]

this is what I was trying to solve

device-2021-10-08-121710.webm

[Andrey Kulikov]

It is not yet done, but the plan is to introduce a more low level api LazyLayout where you can provide different layout managers, similarly to how it works in RecyclerView, and after that LazyGrid will be reimplemented without adding extra Box for the item to support use cases like this

[Andrei Kovalev]

thanks for the update, @Andrey Kulikov

[Alex]

Hey @Andrey Kulikov, is this already done? Or is there any update on this? 🙂

[Andrei Kovalev]

I’ve seen 1.1.0 beta LazyGrid is re-implemented, but I haven’t tried it yet

[Andrey Kulikov]

it is still in progress