ScratchCardCompose

This project provides a customizable flashcard component in Jetpack Compose. The flashcard supports interactive features such as flipping on tap and swiping left or right. The design and functionality of the flashcard component were inspired by the popular Quizlet app. For a real-world usage example, see this component in the full project here.

⭐️ Features

Flip Animation:

Uses rotation along the Y-axis to create a flipping effect with cameraDistance.

• Rotation values range from 0f to 180f to simulate a full flip.
• Alpha blending ensures only one side is visible at a time when the animation is complete.

Swipe Animation:

Swipe animations with rotation on the Z-axis.

• Card Slide Out of View: Cards smoothly slide out of the screen when swiped.
• Border Color Indications: Highlights the card border when approaching a swipe threshold.

Customizable Design:

Modify text, colors, shapes, and more to match your app's theme.

🖼️ Here are some overview photos:

🎥 Here are some overview videos:

⚙️Installation

To use this component in your Jetpack Compose project, simply copy the Flashcard composable into your project and customize it with your own text and styling.

📝Usage Example

Here’s an example of how to use the ScratchCard component:

  Flashcard(
    frontText = "Front of the card",
    backText = "Back of the card",
    height = 480.dp,
    width = 320.dp,
    onSwipeLeft = { /* Handle swipe left */ },
    onSwipeRight = { /* Handle swipe right */ }
)

🔍How it works

The flashcard component is built using a layered rendering approach:

1. Flip Animation (Front and Back Sides):

• Rotation (Y-Axis):
  • The card rotates around the Y-axis when flipped. Initially, the card shows the front side, and upon flip, it rotates 180°, revealing the back side.
• Alpha Animation (Opacity Transition):
  • The front side fades out (opacity 0) as the card rotates.
  • Simultaneously, the back side fades in (opacity 1), creating a seamless transition between the two sides.

2. Swipe Animation::

• Drag Detection:
  • The card’s position (cardOffsetX, cardOffsetY) is updated using detectDragGestures.
  • The border color changes based on drag direction, and the swipe direction (left or right) is determined by the drag threshold (SWIPE_GESTURE_THRESHOLD).
• Swipe Completion:
  • If the drag exceeds the threshold, the card moves off-screen horizontally by 1.5 times the screenWidth and rotates back to 0°. The appropriate callback (onSwipeLeft or onSwipeRight) is triggered, and the card resets.
• Reset Position:
  • After the swipe, the card’s position and border color reset to their initial state.

🎨 Customize Options

| Parameter | Description | Default | |---------------------------------|---------------------------------------------------------------------------------------------------------------|------------------------------| | modifier | Modifier applied to the flashcard container. | Modifier | | frontText | Text displayed on the front side of the card. | Required | | backText | Text displayed on the back side of the card. | Required | | height | Height of the flashcard. | 480.dp | | width | Width of the flashcard. | 320.dp | | borderStrokeWidth | Width of the border stroke. | 2.dp | | rightSwipeColor | Color indicating a right swipe. | Green | | leftSwipeColor | Color indicating a left swipe. | Red | | backgroundColor | Background color of the flashcard. | Blue | | textColor | Text color on the flashcard. | Color.White | | shape | Shape of the flashcard (e.g., rounded corners). | RoundedCornerShape(16.dp) | | topButtonRow | Optional composable to display buttons at the top of the card. | None | | flipDuration | Duration of the flip animation in milliseconds. | 400 | | alphaDuration | Duration of the alpha animation in milliseconds. | 250 | | swipeDuration | Duration of the swipe animation in milliseconds. | 200 | | swipeThreshold | Threshold for detecting a swipe gesture. | 70f | | onSwipeLeft | Callback triggered when the card is swiped to the left. | {} (empty lambda) | | onSwipeRight | Callback triggered when the card is swiped to the right. | {} (empty lambda) | | onRightSwipeApproach | Callback triggered when the card is near a right swipe threshold. | {} (empty lambda) | | onLeftSwipeApproach | Callback triggered when the card is near a left swipe threshold. | {} (empty lambda) | | onNeutralPosition | Callback triggered when the card is in a neutral (centered) position. | {} (empty lambda) |

📋Requirements

Minimum version: Android 7.0 (API level 24) or later📱

Target version: Android 14 (API level 34) or later📱

✍️Author

Adam Dawidziuk🧑‍💻