Draggable Card Stack

A Jetpack Compose library for customizable draggable card stacks with smooth animations.

Features

• 🎯 Smooth spring-based animations
• 🔄 Vertical and horizontal swiping
• 📱 Responsive design
• 🎨 Customizable card alignment & spacing
• 💫 Dynamic elevation & scale animations
• ⚡ Velocity-based swipe detection
• 🔄 Automatic card reordering

Installation

dependencies {
implementation("io.github.teddko:cardstack:1.0.1")
}

Basic Usage

@Composable
funCardStackDemo() {
val items = remember { listOf("Card 1", "Card 2", "Card 3") }
DraggableCardStack(
initialItems = items,
height =200.dp,
cardSpacingRatio =0.1f,
cardAlignment =CardAlignment.BOTTOM,
dragAlignment =DragAlignment.HORIZONTAL
) { item ->Card(
modifier =Modifier
.fillMaxSize()
.padding(16.dp)
) {
Text(
text = item,
modifier =Modifier.padding(16.dp)
)
}
}
}

Advanced Usage

data classCardItem(
valtitle:String,
valdescription:String,
valimageUrl:String
)
@Composable
funAdvancedCardStack() {
val items = remember {
listOf(
CardItem("Title 1", "Description 1", "url1"),
CardItem("Title 2", "Description 2", "url2"),
CardItem("Title 3", "Description 3", "url3")
)
}
DraggableCardStack(
initialItems = items,
height =200.dp,
cardSpacingRatio =0.1f,
cardAlignment =CardAlignment.BOTTOM,
dragAlignment =DragAlignment.HORIZONTAL
) { item ->Card(modifier =Modifier.fillMaxSize()) {
Row(
modifier =Modifier
.fillMaxSize()
.padding(16.dp),
horizontalArrangement =Arrangement.spacedBy(16.dp),
verticalAlignment =Alignment.CenterVertically
) {
AsyncImage(
modifier =Modifier
.size(100.dp)
.clip(CircleShape),
model = item.imageUrl,
contentDescription = item.description,
contentScale =ContentScale.Crop,
)
Column(verticalArrangement =Arrangement.spacedBy(8.dp)) {
Text(text = item.title)
Text(text = item.description)
}
}
}
}
}

Customization

Card Alignment

CardAlignment.BOTTOM// Bottom centerCardAlignment.BOTTOM_START// Bottom leftCardAlignment.BOTTOM_END// Bottom rightCardAlignment.TOP// Top centerCardAlignment.TOP_START// Top leftCardAlignment.TOP_END// Top rightCardAlignment.START// Center leftCardAlignment.END// Center right

Drag Alignment

DragAlignment.VERTICAL// Vertical onlyDragAlignment.HORIZONTAL// Horizontal onlyDragAlignment.NONE// All directions