Flip Card Animation in Android - GeeksforGeeks

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 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.AnimatorInflaterimport android.animation.AnimatorSetimport androidx.appcompat.app.AppCompatActivityimport android.os.Bundleimport android.widget.Buttonimport 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
Android-Animation
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Flexbox-Layout in Android
Android UI Layouts
Kotlin Array
Retrofit with Kotlin Coroutine in Android
How to Get Current Location in Android?
Kotlin Setters and Getters