Animations in Android play an important role in the user experience. This makes the user focus on the main content, which they want. And also helps in user interactivity. Animations communicate with the user to really get engaged in application usage. So in this article, one of the animations in android which is the most popular one, Circular reveal animation is discussed. Have a look at the following image to get an idea of how the circular animation looks like. Note that we are going to implement this project using the Kotlin language.
Steps to Implement the Circular Animation in Android
Step 1: Create an empty activity project
- Create an empty activity Android Studio Project. Or refer to Android | How to Create/Start a New Project in Android Studio? to know how to create an empty activity Android Studio project. Note that select Kotlin as the programming language.
Step 2: Working with the activity_main.xml file
- To implement the application’s main layout in which includes only a single button, which when clicked on it triggers the Circular reveal animation.
- To implement the UI invoke the following code inside the activity_main.xml file.
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout android:id = "@+id/mainLayout"
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:fitsSystemWindows = "true"
tools:context = ".MainActivity"
tools:ignore = "HardcodedText" >
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_marginTop = "16dp"
android:gravity = "center"
android:text = "GeeksforGeeks"
android:textColor = "@color/green_500"
android:textSize = "24sp"
android:textStyle = "bold" />
<!--The layout which is invisible initially-->
< LinearLayout
android:id = "@+id/revealLayout"
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:background = "@color/green_200"
android:gravity = "center"
android:orientation = "vertical"
android:visibility = "gone" >
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:backgroundTint = "@android:color/white"
android:text = "LEARN PROGRAMMING"
android:textColor = "@android:color/black" />
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:backgroundTint = "@android:color/white"
android:text = "CONTRIBUTE"
android:textColor = "@android:color/black" />
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:backgroundTint = "@android:color/white"
android:text = "VISIT WEBSITE"
android:textColor = "@android:color/black" />
</ LinearLayout >
<!--The Fab to toggle the visibility of circular reveal animation-->
< com.google.android.material.floatingactionbutton.FloatingActionButton
android:id = "@+id/fab"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_alignParentEnd = "true"
android:layout_alignParentBottom = "true"
android:layout_gravity = "bottom|end"
android:layout_marginEnd = "16dp"
android:layout_marginBottom = "16dp"
app:srcCompat = "@drawable/ic_add" />
</ RelativeLayout >
|
Output UI:
Now revealing the same layout from the bottom of the screen
Step 3: Working with the MainActivity.kt file
- Firstly, the code is for the circular reveal animation from the right bottom of the screen.
- Invoke the following code and refer to its output for better understanding, the comments are added for better understanding.
import android.animation.Animator
import android.annotation.SuppressLint
import android.content.res.ColorStateList
import android.os.Build
import android.os.Bundle
import android.view.View
import android.view.ViewAnimationUtils
import androidx.annotation.RequiresApi
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.res.ResourcesCompat
import com.google.android.material.floatingactionbutton.FloatingActionButton
import kotlin.math.hypot
import kotlin.math.max
class MainActivity : AppCompatActivity() {
private lateinit var mRevealLayout: View
private lateinit var mFab: FloatingActionButton
// boolean variable to check whether the
// reveal layout is visible or not
private var isRevealed = false
@RequiresApi (Build.VERSION_CODES.M)
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
mRevealLayout = findViewById(R.id.revealLayout)
mFab = findViewById(R.id.fab)
// initially the color of the FAB should be green
mFab.backgroundTintList = ColorStateList.valueOf(
ResourcesCompat.getColor(
resources,
R.color.green_500,
null
)
)
// upon clicking the FAB the reveal should be
// toggled according to the boolean value
mFab.setOnClickListener {
revealLayoutFun()
}
}
// this function is triggered when
// the FAB is clicked
@RequiresApi (Build.VERSION_CODES.M)
@SuppressLint ( "ResourceAsColor" )
private fun revealLayoutFun() {
// based on the boolean value the
// reveal layout should be toggled
if (!isRevealed) {
// get the right and bottom side
// lengths of the reveal layout
val x: Int = mRevealLayout.right
val y: Int = mRevealLayout.bottom
// here the starting radius of the reveal
// layout is 0 when it is not visible
val startRadius = 0
// make the end radius should match
// the while parent view
val endRadius = hypot(
mRevealLayout.width.toDouble(),
mRevealLayout.height.toDouble()
).toInt()
// and set the background tint of the FAB to white
// color so that it can be visible
mFab.backgroundTintList = ColorStateList.valueOf(
ResourcesCompat.getColor(
resources,
R.color.white,
null
)
)
// now set the icon as close for the FAB
mFab.setImageResource(R.drawable.ic_close)
// create the instance of the ViewAnimationUtils to
// initiate the circular reveal animation
val anim = ViewAnimationUtils.createCircularReveal(
mRevealLayout,
x,
y,
startRadius.toFloat(),
endRadius.toFloat()
)
// make the invisible reveal layout to visible
// so that upon revealing it can be visible to user
mRevealLayout.visibility = View.VISIBLE
// now start the reveal animation
anim.start()
// set the boolean value to true as the reveal
// layout is visible to the user
isRevealed = true
} else {
// get the right and bottom side lengths
// of the reveal layout
val x: Int = mRevealLayout.right
val y: Int = mRevealLayout.bottom
// here the starting radius of the reveal layout is its full width
val startRadius: Int = max(mRevealLayout.width, mRevealLayout.height)
// and the end radius should be zero
// at this point because the layout should be closed
val endRadius = 0
// now set the background tint of the FAB to green
// so that it can be visible to the user
mFab.backgroundTintList = ColorStateList.valueOf(
ResourcesCompat.getColor(
resources,
R.color.green_500,
null
)
)
// now again set the icon of the FAB to plus
mFab.setImageResource(R.drawable.ic_add)
// create the instance of the ViewAnimationUtils to
// initiate the circular reveal animation
val anim = ViewAnimationUtils.createCircularReveal(
mRevealLayout,
x,
y,
startRadius.toFloat(),
endRadius.toFloat()
)
// now as soon as the animation is ending, the reveal
// layout should also be closed
anim.addListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animator: Animator) {}
override fun onAnimationEnd(animator: Animator) {
mRevealLayout.visibility = View.GONE
}
override fun onAnimationCancel(animator: Animator) {}
override fun onAnimationRepeat(animator: Animator) {}
})
// start the closing animation
anim.start()
// set the boolean variable to false
// as the reveal layout is invisible
isRevealed = false
}
}
} |
Output:
Now revealing the same layout from the center of the screen
Note: The layout of the application remains same only the code from the MainActivity.kt file are changed.
- Invoke the following code inside the MainActivity.kt file to reveal the same layout from the center of the screen.
import android.animation.Animator
import android.annotation.SuppressLint
import android.content.res.ColorStateList
import android.os.Build
import android.os.Bundle
import android.view.View
import android.view.ViewAnimationUtils
import androidx.annotation.RequiresApi
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.res.ResourcesCompat
import com.google.android.material.floatingactionbutton.FloatingActionButton
import kotlin.math.hypot
import kotlin.math.max
class MainActivity : AppCompatActivity() {
private lateinit var mRevealLayout: View
private lateinit var mFab: FloatingActionButton
// boolean variable to check whether
// the reveal layout is visible or not
private var isRevealed = false
@RequiresApi (Build.VERSION_CODES.M)
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
mRevealLayout = findViewById(R.id.revealLayout)
mFab = findViewById(R.id.fab)
// initially the color of the FAB should be green
mFab.backgroundTintList = ColorStateList.valueOf(
ResourcesCompat.getColor(
resources,
R.color.green_500,
null
)
)
// upon clicking the FAB the reveal should
// be toggled according to the boolean value
mFab.setOnClickListener {
revealLayoutFun()
}
}
// this function is triggered when
// the FAB is clicked
@RequiresApi (Build.VERSION_CODES.M)
@SuppressLint ( "ResourceAsColor" )
private fun revealLayoutFun() {
// based on the boolean value the
// reveal layout should be toggled
if (!isRevealed) {
// get the right and bottom side
// lengths of the reveal layout
val x: Int = mRevealLayout.right / 2
val y: Int = mRevealLayout.bottom / 2
// here the starting radius of the reveal
// layout is 0 when it is not visible
val startRadius = 0
// make the end radius should
// match the while parent view
val endRadius = hypot(
mRevealLayout.width.toDouble(),
mRevealLayout.height.toDouble()
).toInt()
// and set the background tint of the FAB to white
// color so that it can be visible
mFab.backgroundTintList = ColorStateList.valueOf(
ResourcesCompat.getColor(
resources,
R.color.white,
null
)
)
// now set the icon as close for the FAB
mFab.setImageResource(R.drawable.ic_close)
// create the instance of the ViewAnimationUtils to
// initiate the circular reveal animation
val anim = ViewAnimationUtils.createCircularReveal(
mRevealLayout,
x,
y,
startRadius.toFloat(),
endRadius.toFloat()
)
// make the invisible reveal layout to visible
// so that upon revealing it can be visible to user
mRevealLayout.visibility = View.VISIBLE
// now start the reveal animation
anim.start()
// set the boolean value to true as the reveal
// layout is visible to the user
isRevealed = true
} else {
// get the right and bottom side lengths
// of the reveal layout
val x: Int = mRevealLayout.right / 2
val y: Int = mRevealLayout.bottom / 2
// here the starting radius of the reveal layout is its full width
val startRadius: Int = max(mRevealLayout.width, mRevealLayout.height)
// and the end radius should be zero at this
// point because the layout should be closed
val endRadius = 0
// now set the background tint of the FAB to green
// so that it can be visible to the user
mFab.backgroundTintList = ColorStateList.valueOf(
ResourcesCompat.getColor(
resources,
R.color.green_500,
null
)
)
// now again set the icon of the FAB to plus
mFab.setImageResource(R.drawable.ic_add)
// create the instance of the ViewAnimationUtils
// to initiate the circular reveal animation
val anim = ViewAnimationUtils.createCircularReveal(
mRevealLayout,
x,
y,
startRadius.toFloat(),
endRadius.toFloat()
)
// now as soon as the animation is ending, the reveal
// layout should also be closed
anim.addListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animator: Animator) {}
override fun onAnimationEnd(animator: Animator) {
mRevealLayout.visibility = View.GONE
}
override fun onAnimationCancel(animator: Animator) {}
override fun onAnimationRepeat(animator: Animator) {}
})
// start the closing animation
anim.start()
// set the boolean variable to false
// as the reveal layout is invisible
isRevealed = false
}
}
} |
Output: