Flip Card Animation in Android
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" ?> <!--We are going to use Constraintlayout--> < androidx.constraintlayout.widget.ConstraintLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:app = "http://schemas.android.com/apk/res-auto" xmlns:tools = "http://schemas.android.com/tools" android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity" > <!--Add a textView for front part of the card--> < 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" /> <!--Add a textview for back part of the card--> < 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" /> <!--Add a Button that will apply flip on the card--> < 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" ?> < set xmlns:android = "http://schemas.android.com/apk/res/android" > < 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" ?> < set xmlns:android = "http://schemas.android.com/apk/res/android" > < 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) // Now Create Animator Object // For this we add animator folder inside res // Now we will add the animator to our card // we now need to modify the camera scale 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 // Now we will set the front animation front_animation = AnimatorInflater.loadAnimator(applicationContext, R.animator.front_animator) as AnimatorSet back_animation = AnimatorInflater.loadAnimator(applicationContext, R.animator.back_animator) as AnimatorSet // Now we will set the event listener 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