Circular Reveal Animation in Android
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
<? xml version = "1.0" encoding = "utf-8" ?> < RelativeLayout 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: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 = "w3wiki" 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.
Kotlin
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.
Kotlin
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:
Contact Us