
Responsive swipe-to-delete component inspired by Material 3 expressive notifications, offering drag coordination, dismiss callbacks, smooth animations, customizable shapes/settings, and easy list integration.
A snappy swipe to delete component inspired by Material 3 Expressive notifications
https://github.com/user-attachments/assets/048bd432-1858-45ca-b781-19507885682b
First add the dependency to your module's build.gradle:
implementation("io.github.klassenkonstantin:snappyswipe:<version>")val items = remember {
buildList {
repeat(10) { add("Item $it") }
}
}
val dragCoordinatorState = rememberSnappyDragCoordinatorState(
items = items, // Same as items of LazyColumn
key = { it }, // Same as key of LazyColumn item
)
val settings = rememberSnappyDragSettings()
LazyColumn(
verticalArrangement = Arrangement.spacedBy(2.dp),
) {
items(
items = items,
key = { it }
) { item ->
SnappyItem(
key = item, // Same as key of LazyColumn item
dragCoordinatorState = dragCoordinatorState,
onDismissed = {
// Remove item
},
settings = settings
) { provideShape ->
ListItem(
colors = ListItemDefaults.colors(
containerColor = MaterialTheme.colorScheme.primaryContainer
),
modifier = Modifier.padding(horizontal = 16.dp)
.graphicsLayer {
shape = provideShape()
clip = true
},
headlineContent = {
Text(
text = item,
)
},
)
}
}
}A snappy swipe to delete component inspired by Material 3 Expressive notifications
https://github.com/user-attachments/assets/048bd432-1858-45ca-b781-19507885682b
First add the dependency to your module's build.gradle:
implementation("io.github.klassenkonstantin:snappyswipe:<version>")val items = remember {
buildList {
repeat(10) { add("Item $it") }
}
}
val dragCoordinatorState = rememberSnappyDragCoordinatorState(
items = items, // Same as items of LazyColumn
key = { it }, // Same as key of LazyColumn item
)
val settings = rememberSnappyDragSettings()
LazyColumn(
verticalArrangement = Arrangement.spacedBy(2.dp),
) {
items(
items = items,
key = { it }
) { item ->
SnappyItem(
key = item, // Same as key of LazyColumn item
dragCoordinatorState = dragCoordinatorState,
onDismissed = {
// Remove item
},
settings = settings
) { provideShape ->
ListItem(
colors = ListItemDefaults.colors(
containerColor = MaterialTheme.colorScheme.primaryContainer
),
modifier = Modifier.padding(horizontal = 16.dp)
.graphicsLayer {
shape = provideShape()
clip = true
},
headlineContent = {
Text(
text = item,
)
},
)
}
}
}