{"id":3741,"date":"2025-04-24T06:33:48","date_gmt":"2025-04-24T06:33:48","guid":{"rendered":"https:\/\/alsaeeddev.com\/?p=3741"},"modified":"2025-04-25T12:06:35","modified_gmt":"2025-04-25T12:06:35","slug":"card-animation-in-jetpack-compose","status":"publish","type":"post","link":"https:\/\/alsaeeddev.com\/shop\/card-animation-in-jetpack-compose\/","title":{"rendered":"Swipe and Tap Card Animation in Jetpack Compose"},"content":{"rendered":"
\nCreating an interactive card-based interface in Jetpack Compose is easier than ever. Today, we will explore how to implement a smooth Card Animation in Jetpack using swipe or tap gestures on cards with the CardSwipeOrTap composable. This approach is perfect for modern UI designs where users interact with content via gestures.<\/p>\n

Main Activity Setup<\/strong><\/p>\n

We start by setting up the MainActivity that uses a Scaffold layout inside the RecyclerViewTheme. This ensures that our UI fills the entire screen while providing padding to our card interactions.<\/p>\n

class MainActivity : ComponentActivity() {\r\n    override fun onCreate(savedInstanceState: Bundle?) {\r\n        super.onCreate(savedInstanceState)\r\n        setContent {\r\n            RecyclerViewTheme {\r\n                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->\r\n                    CardSwipeOrTap(modifier = Modifier.padding(innerPadding))\r\n                }\r\n            }\r\n        }\r\n    }\r\n}<\/code><\/pre>\n
Building the Card Swipe or Tap Composable<\/h3>\n
The CardSwipeOrTap<\/code> composable manages the card stack. It uses a Box<\/code> to overlay cards on top of each other and applies a slight rotation and vertical offset for a realistic stacked effect.<\/p>\n
Each card is individually rendered using the CardItem<\/code> composable. We use a simple CoroutineScope<\/strong> to delay actions and allow for smooth animations between swipe or tap events.<\/p>\n
@Composable\r\nfun CardSwipeOrTap(modifier: Modifier = Modifier) {\r\n    val scope = rememberCoroutineScope()\r\n    var cards by remember { mutableStateOf(listOf(0, 1, 2)) }\r\n    var isAnimating by remember { mutableStateOf(false) }\r\n\r\n    val cardColors = listOf(\r\n        Color(0xFFFF9800), \/\/ Orange\r\n        Color(0xFFF44336), \/\/ Red\r\n        Color(0xFF00E676)  \/\/ Light Green\r\n    )\r\n\r\n    Box(\r\n        modifier = modifier.fillMaxSize().padding(32.dp),\r\n        contentAlignment = Alignment.Center\r\n    ) {\r\n        cards.reversed().forEachIndexed { index, cardIndex ->\r\n            CardItem(\r\n                index = cardIndex,\r\n                color = cardColors[cardIndex % cardColors.size],\r\n                rotation = if (index == 0) 0f else if (index == 1) -10f else 10f,\r\n                offsetY = (index * 20).dp,\r\n                isTop = index == cards.size - 1,\r\n                isAnimating = isAnimating,\r\n                onSwiped = {\r\n                    if (!isAnimating) {\r\n                        isAnimating = true\r\n                        scope.launch {\r\n                            kotlinx.coroutines.delay(300)\r\n                            val updated = cards.toMutableList()\r\n                            val removed = updated.removeAt(0)\r\n                            updated.add(removed)\r\n                            cards = updated\r\n                            isAnimating = false\r\n                        }\r\n                    }\r\n                }\r\n            )\r\n        }\r\n    }\r\n}<\/code><\/pre>\n
Animating Card Movement with CardItem<\/h3>\n
The CardItem<\/code> composable handles the animation when a user swipes or taps a card. It uses animateDpAsState<\/strong> and animateFloatAsState<\/strong> to animate the card’s offset and opacity, giving the appearance of a disappearing card when an interaction occurs.<\/p>\n
@Composable\r\nfun CardItem(\r\n    index: Int,\r\n    color: Color,\r\n    rotation: Float,\r\n    offsetY: Dp,\r\n    isTop: Boolean,\r\n    isAnimating: Boolean,\r\n    onSwiped: () -> Unit\r\n) {\r\n    val animatedOffsetX by animateDpAsState(\r\n        targetValue = if (isAnimating && isTop) 500.dp else 0.dp,\r\n        animationSpec = if (isAnimating && isTop) tween(durationMillis = 500, easing = FastOutLinearInEasing) else snap(),\r\n        label = \"OffsetXAnimation\"\r\n    )\r\n\r\n    val animatedAlpha by animateFloatAsState(\r\n        targetValue = if (isAnimating && isTop) 0f else 1f,\r\n        animationSpec = if (isAnimating && isTop) tween(durationMillis = 3000) else snap(),\r\n        label = \"AlphaAnimation\"\r\n    )\r\n\r\n    Card(\r\n        modifier = Modifier\r\n            .fillMaxWidth(0.7f)\r\n            .aspectRatio(1f)\r\n            .offset(x = animatedOffsetX, y = offsetY)\r\n            .graphicsLayer {\r\n                rotationZ = rotation\r\n                alpha = animatedAlpha\r\n            }\r\n            .pointerInput(isTop) {\r\n                if (isTop && !isAnimating) {\r\n                    detectDragGestures(\r\n                        onDragEnd = { onSwiped() },\r\n                        onDrag = { change, _ -> change.consume() }\r\n                    )\r\n                }\r\n            }\r\n            .pointerInput(isTop) {\r\n                if (isTop && !isAnimating) {\r\n                    detectTapGestures(\r\n                        onTap = { onSwiped() }\r\n                    )\r\n                }\r\n            },\r\n        elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),\r\n        shape = RoundedCornerShape(20.dp),\r\n        colors = CardDefaults.cardColors(\r\n            containerColor = color,\r\n            contentColor = Color.White\r\n        )\r\n    ) {\r\n        Box(\r\n            modifier = Modifier.fillMaxSize(),\r\n            contentAlignment = Alignment.Center\r\n        ) {\r\n            Text(\r\n                text = \"Card #$index\",\r\n                style = MaterialTheme.typography.titleLarge,\r\n                color = Color.White\r\n            )\r\n        }\r\n    }\r\n}<\/code><\/pre>\n
\n