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 version = "1.0" encoding = "utf-8" ?>
<!--We are going to use Constraintlayout--> < androidx.constraintlayout.widget.ConstraintLayout 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 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 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.
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