Circular Reveal Animation in Kotlin XML: Android Development Tutorial

Circular Reveal Animation is a visually appealing transition effect in Android development, allowing views to appear or disappear in a circular fashion. This effect adds a polished and modern look to your application’s UI. While Jetpack Compose is gaining popularity, many projects still use XML for layouts. In this blog post, we’ll explore how to implement Circular Reveal Animation in Kotlin using XML for Android development.

What is Circular Reveal Animation?

Circular Reveal Animation is a graphical effect that reveals or hides a view in a circular motion. It’s often used to smoothly transition between UI states, providing a more engaging user experience. The animation expands or contracts a circular mask, gradually exposing or hiding the underlying content.

Why Use Circular Reveal Animation?

• Enhance User Experience: Provides smooth and visually appealing transitions.
• Modern UI: Adds a modern and polished look to your application.
• Focus Attention: Can be used to draw the user’s attention to specific elements on the screen.

How to Implement Circular Reveal Animation in Kotlin XML

To implement Circular Reveal Animation, follow these steps:

Step 1: Add View to XML Layout

First, add the view you want to animate to your XML layout. For example, a button:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/revealButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Reveal View"
        android:layout_centerInParent="true"/>

    <View
        android:id="@+id/revealView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FF5722"
        android:visibility="invisible"/>

</RelativeLayout>

Here, revealView is the view that will be revealed, initially set to invisible.

Step 2: Implement Circular Reveal Animation in Kotlin

In your Kotlin activity, implement the Circular Reveal Animation:

import android.animation.Animator
import android.animation.AnimatorListenerAdapter
import android.os.Bundle
import android.view.View
import android.view.ViewAnimationUtils
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val revealButton: Button = findViewById(R.id.revealButton)
        val revealView: View = findViewById(R.id.revealView)

        revealButton.setOnClickListener {
            if (revealView.visibility == View.INVISIBLE) {
                revealView.visibility = View.VISIBLE
                revealView.circularReveal(revealButton.x.toInt() + revealButton.width/2, revealButton.y.toInt() + revealButton.height/2, 0f, revealView.width.toFloat())
            } else {
                 revealView.circularHide(revealButton.x.toInt() + revealButton.width/2, revealButton.y.toInt() + revealButton.height/2, revealView.width.toFloat(),0f)
            }
        }
    }

    fun View.circularReveal(centerX: Int, centerY: Int, startRadius: Float, endRadius: Float) {
        ViewAnimationUtils.createCircularReveal(this, centerX, centerY, startRadius, endRadius).apply {
            duration = 1000
            start()
        }
    }

     fun View.circularHide(centerX: Int, centerY: Int, startRadius: Float, endRadius: Float) {
        ViewAnimationUtils.createCircularReveal(this, centerX, centerY, startRadius, endRadius).apply {
             duration = 1000
                addListener(object : AnimatorListenerAdapter() {
                override fun onAnimationEnd(animation: Animator) {
                   visibility = View.INVISIBLE
                }
             })
            start()
        }
    }
}

Explanation:

• Find views by their IDs.
• Set an onClickListener on the revealButton.
• Implement circularReveal() and circularHide() extension functions.

Step 3: Customization

You can customize the animation by changing:

• Duration: Modify the duration property to control the animation speed.
• Start and End Radius: Change the startRadius and endRadius to adjust the animation size.
• Colors: Alter the background color of the view being revealed for different visual effects.

Example: Reveal Animation with Custom Colors

To make the animation more visually appealing, let’s use custom colors and adjust the duration:

import android.animation.Animator
import android.animation.AnimatorListenerAdapter
import android.os.Bundle
import android.view.View
import android.view.ViewAnimationUtils
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val revealButton: Button = findViewById(R.id.revealButton)
        val revealView: View = findViewById(R.id.revealView)

        revealButton.setOnClickListener {
            if (revealView.visibility == View.INVISIBLE) {
                revealView.circularReveal(revealButton.x.toInt() + revealButton.width/2, revealButton.y.toInt() + revealButton.height/2, 0f, revealView.width.toFloat(),500)
            } else {
                 revealView.circularHide(revealButton.x.toInt() + revealButton.width/2, revealButton.y.toInt() + revealButton.height/2, revealView.width.toFloat(),0f,500)
            }
        }
    }

    fun View.circularReveal(centerX: Int, centerY: Int, startRadius: Float, endRadius: Float,durationValue:Long) {
        ViewAnimationUtils.createCircularReveal(this, centerX, centerY, startRadius, endRadius).apply {
            duration = durationValue
            start()
        }
    }

     fun View.circularHide(centerX: Int, centerY: Int, startRadius: Float, endRadius: Float,durationValue:Long) {
        ViewAnimationUtils.createCircularReveal(this, centerX, centerY, startRadius, endRadius).apply {
             duration = durationValue
                addListener(object : AnimatorListenerAdapter() {
                override fun onAnimationEnd(animation: Animator) {
                   visibility = View.INVISIBLE
                }
             })
            start()
        }
    }
}

Conclusion

Implementing Circular Reveal Animation in Kotlin XML is a great way to enhance your Android application’s UI with smooth, modern transitions. By following the steps outlined in this blog post, you can easily add this engaging effect to your views. Whether revealing a hidden layout, showing contextual information, or guiding users through different parts of your app, Circular Reveal Animation provides an elegant solution.