An interactive 3D Flip Card library for Android that supports smooth touch rotation, glossy effects, and shadows.
Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url '[https://jitpack.io](https://jitpack.io)' }
}
}
Add the dependency to your app/build.gradle:
dependencies {
implementation 'com.github.labsisouleimen:TouchFlip3D:v1.1'
}Smooth 3D Rotation: Interactive touch-based card flipping.
Glossy Effect: Dynamic light reflections while moving.
Shadow System: Realistic 3D depth shadows.
RecyclerView Ready: Fixed touch interception for seamless scrolling.
You must place exactly two children inside RotateView2:
- The first child is the Back Side.
- The second child is the Front Side.
<com.labsisouleimanedev.touchflip3d.RotateView2
android:id="@+id/flipView"
android:layout_width="320dp"
android:layout_height="220dp"
app:flipDirection="horizontal"
app:showGlossyEffect="true"
app:showShadows="true"
app:enableRotateX="true"
app:enableRotateY="true"
app:autoRotate="false">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardBackgroundColor="#F1F1F1" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardBackgroundColor="#FFFFFF" />
</com.labsisouleimanedev.touchflip3d.RotateView2>Use these attributes in your layout file to customize the behavior:
| Attribute | Description | Default |
|---|---|---|
app:flipDirection |
0 for Vertical, 1 for Horizontal |
1 |
app:showShadows |
Toggle 3D depth shadows | true |
app:showGlossyEffect |
Toggle shiny light reflection | false |
app:enableRotateX |
Enable/Disable X-axis rotation | true |
app:enableRotateY |
Enable/Disable Y-axis rotation | true |
app:autoRotate |
Full 180° flip on click | false |
RotateView2 flipView = findViewById(R.id.flipView);
// Reset card to original flat state flipView.resetRotation();
// Change axis: 0 (Vertical) | 1 (Horizontal) flipView.setFlipDirection(1);
// Lock or unlock rotation axes flipView.setEnableRotateX(true); flipView.setEnableRotateY(true);
Since v1.1, the library handles touch events using requestDisallowInterceptTouchEvent. This means you can use the card inside lists or pagers without any scrolling issues. It's plug-and-play!
This project is licensed under the MIT License - meaning you can freely use, modify, and distribute it, provided you give credit to the original author.
