Threads Invitation Card with Jetpack Compose

This article aims to create an animation and UI copy of the Threads Invitation Card with Jetpack Compose in the Android project. This project includes a combination of these three (3) different animations; Always Turning Animation, Rotating Card to near Axis-Y Animation after Dragging, Animation Rotating after Quick Dragging.

The story has a GitHub project. You can follow the topic commit by commit: https://github.com/canerkaseler/jetpack-compose-threads-card

Note: If you are a new android developer or not familiar with Jetpack Compose, starting from Necessary Topics might be helpful. If you feel comfortable, you can jump Main Topics part.

Table of contents:

A) Necessary topics:

1. User Data Model & Design Images
2. Front Side of the Card
3. Back Side of the Card

B) Main Topics:

1. Card Turning with Dragging
2. Always Turning Animation & Stop Animation
3. Rotating Card to near Axis-Y Animation after Dragging
4. Animation Rotating after Quick Dragging then Infinite Turning Animation

Final output will be this:

Final version of the card animation.

A) Part 1/3 — User Data Model & Design Images

Firstly, related commit is here. I would like to skip this part quickly. I added user image and QR code image in android project. Then, there is a hardcoded user data model for card:

data class User(
    val username: String = "CANERKASELER",
    val instagram: String = "canerkaseler",
    val userId: String = "071030501",
    val date: String = "WED JUL 7",
    val time: String = "03:24 P.M.",
    val userImage: Int = R.drawable.ic_user_avatar,
    val userQrCode: Int = R.drawable.ic_qr_code,
)

A) Part 2/3 — Front Side of the Card

Related commit is here. In the commit, We create an UI for front side card. I tried to create separated composable…