Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Simulate a 3D Flip by Using Android’s ScaleAnimation

  • Last Updated : 25 Aug, 2021

In this article, we will learn to flip an image to another image like the card’s front and the card’s back as we see the virtual card in Paytm. For this, we will use Android’s ScaleAnimation. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin 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 Kotlin as the programming language.

Step 2: Set orientation to Portrait mode

Because this is a graphics-intensive application, we expect the orientation to be maintained throughout, navigate to AndroidManifest.xml file and add the android:screenOrientation=”portrait”.





Step 3: Create a new folder anim under res folder

Here we will include two XML files representing our two transitional animations. Navigate to the app > res > anim > to_middle.xml and add the below code to that file. Below is the code for the to_middle.xml file.


<?xml version="1.0" encoding="utf-8"?>
    android:fromXScale="1.0" android:toXScale="0.0"
    android:fromYScale="1.0" android:toYScale="1.0"
    android:duration="250" />

Now, Navigate to the app > res > anim > from_middle.xml and add the below code to that file. Below is the code for the from_middle.xml file.


<?xml version="1.0" encoding="utf-8"?>
    android:fromXScale="0.0" android:toXScale="1.0"
    android:fromYScale="1.0" android:toYScale="1.0"
    android:duration="250" />

Step 4: Set any image(card front) object in the layout

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.


<?xml version="1.0" encoding="utf-8"?>
            android:text="Simulate a 3D Flip"
            android:textStyle="bold" />
            android:src="@drawable/card_front" />
            android:text="Hit Me!" />

Step 5: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.


import android.os.Bundle
import android.view.animation.Animation
import android.view.animation.AnimationUtils
import android.widget.Button
import android.widget.ImageView
class MainActivity : AppCompatActivity(), Animation.AnimationListener {
    private lateinit var animation1: Animation
    private lateinit var animation2: Animation
    private var isFrontOfCardShowing = true
    private lateinit var image: ImageView
    private lateinit var clickBtn: Button
    override fun onCreate(savedInstanceState: Bundle?) {
        // apply animation from to_middle
        animation1 = AnimationUtils.loadAnimation(this, R.anim.to_middle) 
        // apply animation from to_middle
        animation2 = AnimationUtils.loadAnimation(this, R.anim.from_middle) 
        clickBtn = findViewById(
        image = findViewById(
        clickBtn.setOnClickListener {
            it.isEnabled = false
              // stop animation
            image.animation = animation1
              // start the animation
    override fun onAnimationEnd(animation: Animation) {
        if (animation === animation1) {
            // check whether the front of the card is showing
            if (isFrontOfCardShowing) {
                // set image from card_front to card_back
            } else {
                // set image from card_back to card_front
            // stop the animation of the ImageView
            image.animation = animation2
              // allow fine-grained control 
              // over the start time and invalidation
        } else {
            isFrontOfCardShowing = !isFrontOfCardShowing
            clickBtn.isEnabled = true
    override fun onAnimationRepeat(animation: Animation?) {
        // TODO Auto-generated method stub
    override fun onAnimationStart(animation: Animation?) {
        // TODO Auto-generated method stub

Now, run the app


Source Code: Click Here

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!