Flip Card Animation in Android
Last Updated :
25 Aug, 2021
In this article, we are going to see how to build a Flip Card Animation app in Android Studio. Animation makes our app more attractive, convincing, and user-friendly. A sample GIF is given below to get an idea about what we are going to do in this article. Please note that we will be using Kotlin as the programming language.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Working with the activity_main.xml file
Go to res > layout > activity_main.xml file and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< androidx.constraintlayout.widget.ConstraintLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity" >
< TextView
android:id = "@+id/card_back"
android:layout_width = "300dp"
android:layout_height = "300dp"
android:textAlignment = "center"
android:gravity = "center"
android:text = "Back Card"
android:textSize = "22sp"
android:background = "#BF3030"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toTopOf = "parent" />
< TextView
android:id = "@+id/card_front"
android:layout_width = "300dp"
android:layout_height = "300dp"
android:textAlignment = "center"
android:gravity = "center"
android:text = "Front Card"
android:textSize = "22sp"
android:background = "#326314"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toTopOf = "parent" />
< Button
android:id = "@+id/flip_btn"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Flip Me"
tools:ignore = "MissingConstraints"
android:layout_marginTop = "380dp"
tools:layout_editor_absoluteX = "142dp"
tools:layout_editor_absoluteY = "559dp"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toTopOf = "parent" />
</ androidx.constraintlayout.widget.ConstraintLayout >
|
Step 3: Create a New Directory
Create a new directory with the name animator where we will deal with the card’s front and back animation part. To create a new directory please follow the images given below.
Step 4: Create a New Animator Resource File
Create a New Animator Resource File with the name front_animator.xml that will handle the flip card’s front animation. To create a new Animator Resource File follow the images given below.
Step 5: Working with the front_animator.xml file
Navigate to res > animator > front_animator.xml and add the below code to that file. Here we will be using objectAnimator tag for animation of the front part of the flipping card. Below is the code for the front_animator.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< objectAnimator
android:valueFrom = "0"
android:valueTo = "180"
android:propertyName = "rotationY"
android:duration = "1000"
/>
< objectAnimator
android:valueFrom = "1.0"
android:valueTo = "0.0"
android:propertyName = "alpha"
android:startOffset = "500"
android:duration = "1"
/>
</ set >
|
Step 6: Again Create a New Animator Resource File
Again Create a New Animator Resource File with the name back_animator.xml that will be handling animation of the back part of the flip card. To create a new Animator Resource File follow the same images as shown earlier for creating the front_animator.xml file.
Step 7: Working with the back_animator.xml file
Navigate to res > animator > back_animator.xml and add the below code to that file. Here we will be using the objectAnimator tag for animation of the front part of the flipping card. Below is the code for the back_animator.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< objectAnimator
android:valueFrom = "1.0"
android:valueTo = "0.0"
android:propertyName = "alpha"
android:duration = "0"
/>
< objectAnimator
android:valueFrom = "180"
android:valueTo = "0"
android:propertyName = "rotationY"
android:repeatMode = "reverse"
android:duration = "1000"
/>
< objectAnimator
android:valueFrom = "0.0"
android:valueTo = "1.0"
android:propertyName = "alpha"
android:startOffset = "500"
android:duration = "0"
/>
</ set >
|
Step 8: Working with the MainActivity.kt file
Go to MainActivity.kt file and add the code below to that file. Below is the code for MainActivity.kt file. Here we will see how to operate the front and back animation part of the flip card. Comments are added inside the code to understand the code in more detail.
Kotlin
package com.example.flippingcard
import android.animation.AnimatorInflater
import android.animation.AnimatorSet
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
class MainActivity : AppCompatActivity() {
lateinit var front_anim:AnimatorSet
lateinit var back_anim: AnimatorSet
var isFront = true
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
var scale = applicationContext.resources.displayMetrics.density
val front = findViewById<TextView>(R.id.card_front) as TextView
val back =findViewById<TextView>(R.id.card_back) as TextView
val flip = findViewById<Button>(R.id.flip_btn) as Button
front.cameraDistance = 8000 * scale
back.cameraDistance = 8000 * scale
front_animation = AnimatorInflater.loadAnimator(applicationContext, R.animator.front_animator) as AnimatorSet
back_animation = AnimatorInflater.loadAnimator(applicationContext, R.animator.back_animator) as AnimatorSet
flip.setOnClickListener{
if (isFront)
{
front_animation.setTarget(front);
back_animation.setTarget(back);
front_animation.start()
back_animation.start()
isFront = false
}
else
{
front_animation.setTarget(back)
back_animation.setTarget(front)
back_animation.start()
front_animation.start()
isFront = true
}
}
}
}
|
Output:
You can get the source code of the project from this link: Click Here
Share your thoughts in the comments
Please Login to comment...