Make a Flip Card Effect in Android Studio and Kotlin

in this tutorial, I will show you how to make a cool flip card effect in Android Studio without using any external library, at the end of this tutorial, you will learn how to use animator using Kotlin.

I-Creating a new project and Create the main_activity layout

 <?xml version="1.0" encoding="utf-8"?>
<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">

 
        <TextView
            android:id="@+id/card_front"
            android:layout_width="300dp"
            android:layout_height="300dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:text="Front Card"
            android:gravity="center"
            android:background="@color/colorPrimaryDark"

            />



   
    
    <TextView
        android:id="@+id/card_back"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:layout_constraintTop_toTopOf="parent"
        android:alpha="0"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="back Card"
        android:gravity="center"
        android:background="@color/colorAccent"
        />



    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="flip card"
        app:layout_constraintTop_toBottomOf="@+id/card_front"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="15dp"

        />
</androidx.constraintlayout.widget.ConstraintLayout>

Creating the animator for the flip animation

now you should create the animator folder in the res folder for this follow these steps:

1. Right-click on the res folder and choose new > Android resource directory
2.  a window will show and choose animator like the image bellow

now we will create 2 Android Resource Files and we will call them:

• rotation.xml : for the front flip
• back_flip.xml : for the back animation

and write this inside each file

rotation.xml file

 <?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>

back_flip.xml file

 <?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>

Implementing the animation

now we need to implement the animation and make the card flip when we click on the button, go to your MainActivty.kt  file copy&paste this

MainActivity.kt

 package tn.doctorcode.flipcard

import android.animation.AnimatorInflater
import android.animation.AnimatorSet
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    lateinit var flip_anim: AnimatorSet
    lateinit var back_anim: AnimatorSet
    var isfront = true
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // setting the camera distance from the view
        val scale = applicationContext.resources.displayMetrics.density;
        card_front.cameraDistance = 8000 * scale
        card_back.cameraDistance = 8000 * scale
        // setting the front animation
       flip_anim = AnimatorInflater.loadAnimator(applicationContext, R.animator.rotation) as AnimatorSet


        //setting the back animaton
        back_anim = AnimatorInflater.loadAnimator(applicationContext, R.animator.back_flip) as AnimatorSet

        btn.setOnClickListener(View.OnClickListener {
            if(isfront){
                flip_anim.setTarget(card_front)
                back_anim.setTarget(card_back)
                flip_anim.start()
                back_anim.start()
                isfront = false

            }else{
                flip_anim.setTarget(card_back)
                back_anim.setTarget(card_front)
                back_anim.start()
                flip_anim.start()
                isfront = true
            }

        })
    }

}

and that's it, i hope that you have enjoyed this tutorial, if you face any problem you can comment below and tell us the problem and we will help you