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”.
<application
…
android:screenOrientation=”portrait”
…
</activity>…</activity>
</application>
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" ?>
< scale
android:fromXScale = "1.0" android:toXScale = "0.0"
android:pivotX = "50%"
android:fromYScale = "1.0" android:toYScale = "1.0"
android:pivotY = "50%"
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" ?>
< scale
android:fromXScale = "0.0" android:toXScale = "1.0"
android:pivotX = "50%"
android:fromYScale = "1.0" android:toYScale = "1.0"
android:pivotY = "50%"
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" ?>
< androidx.constraintlayout.widget.ConstraintLayout android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity" >
< LinearLayout
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:gravity = "center"
android:orientation = "vertical"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintStart_toStartOf = "parent" >
< TextView
android:id = "@+id/textView1"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_margin = "10dip"
android:text = "Simulate a 3D Flip"
android:textColor = "#000"
android:textSize = "26sp"
android:textStyle = "bold" />
< ImageView
android:id = "@+id/imageView1"
android:layout_width = "wrap_content"
android:layout_height = "300dp"
android:layout_margin = "10dp"
android:gravity = "center"
android:src = "@drawable/card_front" />
< Button
android:id = "@+id/button1"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_margin = "10dip"
android:padding = "10dip"
android:text = "Hit Me!" />
</ LinearLayout >
</ androidx.constraintlayout.widget.ConstraintLayout >
|
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
import androidx.appcompat.app.AppCompatActivity
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?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// apply animation from to_middle
animation1 = AnimationUtils.loadAnimation( this , R.anim.to_middle)
animation1.setAnimationListener( this )
// apply animation from to_middle
animation2 = AnimationUtils.loadAnimation( this , R.anim.from_middle)
animation2.setAnimationListener( this )
clickBtn = findViewById(R.id.button1)
image = findViewById(R.id.imageView1)
clickBtn.setOnClickListener {
it.isEnabled = false
// stop animation
image.clearAnimation()
image.animation = animation1
// start the animation
image.startAnimation(animation1)
}
}
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
image.setImageResource(R.drawable.card_back)
} else {
// set image from card_back to card_front
image.setImageResource(R.drawable.card_front)
}
// stop the animation of the ImageView
image.clearAnimation()
image.animation = animation2
// allow fine-grained control
// over the start time and invalidation
image.startAnimation(animation2)
} 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
Output:
Source Code: Click Here