This message was deleted.

# compose

[Slackbot]

This message was deleted.

screen-20250630-113912~2.mp4

[kecaroh]

So I am using Reorderable library for this purpose, as it supports grids https://github.com/Calvin-LL/Reorderable

Here's my sample code

@Composable
fun Reordering(modifier: Modifier = Modifier) {

    val hapticFeedback = LocalHapticFeedback.current

    var list by remember {
        mutableStateOf(List(10) {
            if (it == 0) {
                WidgetItemType.Big
            } else WidgetItemType.Small
        })
    }
    val lazyGridState = rememberLazyGridState()
    val reorderableLazyGridState = rememberReorderableLazyGridState(lazyGridState) { from, to ->
        list = list.toMutableList().apply {
            add(to.index, removeAt(from.index))
        }

        hapticFeedback.performHapticFeedback(HapticFeedbackType.SegmentFrequentTick)
    }

    LazyHorizontalGrid(
        rows = GridCells.Fixed(2),
        modifier = Modifier.heightIn(max = 200.dp),
        state = lazyGridState,
        contentPadding = PaddingValues(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        itemsIndexed(list, key = { index, item -> "$item$index" }, span = { index, item ->
            if (item == WidgetItemType.Big) {
                GridItemSpan(maxLineSpan)
            } else GridItemSpan(1)
        }) { index, item ->
            ReorderableItem(reorderableLazyGridState, key = "$item$index") { isDragging ->
                val elevation by animateDpAsState(if (isDragging) 4.dp else 0.dp, label = "")

                DraggableCard(elevation, item)
            }
        }
    }
}

@Composable
private fun ReorderableCollectionItemScope.DraggableCard(
    elevation: Dp,
    item: WidgetItemType
) {
    Surface(shadowElevation = elevation) {
        Row(
            modifier = Modifier
                .fillMaxSize()
                .padding(8.dp)
                .border(1.dp, Color.Black),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(item.text, Modifier.padding(horizontal = 8.dp))
            IconButton(
                modifier = Modifier.draggableHandle(),
                onClick = {},
            ) {
                Icon(<http://Icons.Default.Menu|Icons.Default.Menu>, contentDescription = "Reorder")
            }
        }
    }
}

enum class WidgetItemType(val text: String) {
    Big("Big Widget"), Small("Small Widget")
}

The animation is not very pretty - it works fine for the big items but not for the small ones. I also tried using LazyHorizontalStaggeredGrid, but it looks the same.

Does anyone have suggestions what could I change in my code / any other library, that might work well for this purpose?

Thanks!

[Dinoy Raj k]

Are you creating any launcher app?

[kecaroh]

No, its supposed to be a part of dashboard settings screen