Android Tutorial

Software Setup and Configuration

Android Studio

File Structure

Components

Core Topics

Layout

View

Button

Intent and Intent Filters

Toast

RecyclerView

Fragments

Adapters

Other UI Component

Image Loading Libraries

Date and Time

Material Design

Bars

Working with Google Maps

Chart

Animation

Database

Advance Android

Jetpack

Architecture

App Publish

App Monetization

Circular Reveal Animation in Android

The Circular Reveal animation, as the name suggests, is a type of animation where one view expands or contracts like a circle, revealing or hiding another view. It's visually appealing and can be used in many scenarios, such as when transitioning between two activities or revealing a hidden UI component.

Android's ViewAnimationUtils class provides the createCircularReveal() method for this purpose. Let's go through how you can implement a basic circular reveal animation:

1. XML Layout:

For demonstration purposes, let's consider an example where we have two overlapping views and we'll reveal the top view using the circular reveal animation.

In your activity_main.xml:

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

    <!-- The view being revealed -->
    <View
        android:id="@+id/revealView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible"
        android:background="#4CAF50" />

    <!-- A button to start the reveal animation -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Reveal"
        android:onClick="onRevealClick" />

</RelativeLayout>

2. Reveal Animation in Kotlin:

In your activity:

fun onRevealClick(view: View) {
    val revealView = findViewById<View>(R.id.revealView)
    
    val cx = revealView.width / 2
    val cy = revealView.height / 2

    // Assuming the reveal starts from a small, invisible circle and covers the entire view
    val finalRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

    if (revealView.visibility == View.INVISIBLE) {
        // Create the animator for this view
        val anim = ViewAnimationUtils.createCircularReveal(revealView, cx, cy, 0f, finalRadius)
        revealView.visibility = View.VISIBLE
        anim.start()
    } else {
        val anim = ViewAnimationUtils.createCircularReveal(revealView, cx, cy, finalRadius, 0f)
        anim.addListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator?) {
                super.onAnimationEnd(animation)
                revealView.visibility = View.INVISIBLE
            }
        })
        anim.start()
    }
}

The basic idea is:

  • Find the center of the view (cx, cy) around which the animation will take place.
  • Calculate the final radius using Pythagoras's theorem.
  • Use ViewAnimationUtils.createCircularReveal() to create the reveal animation.

Remember to handle any potential view state changes correctly, especially if users can interrupt animations or if there are other interactive elements on screen.

  1. Implementing Circular Reveal Animation in Kotlin:

    • Description: Implement Circular Reveal Animation in Kotlin to create a visually appealing effect. This animation reveals or hides a view in a circular pattern, providing a smooth transition.
    • Code (Kotlin):
      import android.os.Bundle
import android.view.View
import android.view.ViewAnimationUtils
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        // Trigger Circular Reveal Animation
        startCircularRevealAnimation()
    }

    private fun startCircularRevealAnimation() {
        val cx = revealView.width / 2
        val cy = revealView.height / 2
        val radius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

        val anim = ViewAnimationUtils.createCircularReveal(revealView, cx, cy, 0f, radius)
        anim.duration = 1000
        revealView.visibility = View.VISIBLE
        anim.start()
    }
}

  2. Creating circular reveal effect in Android:

    • Description: Create a circular reveal effect in Android using the ViewAnimationUtils.createCircularReveal method. This effect can be applied to reveal or hide a view in a circular pattern.
    • Code (Kotlin):
      // Assuming you have a view to reveal/hide with id 'revealedView'
val cx = revealedView.width / 2
val cy = revealedView.height / 2
val radius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

val anim = ViewAnimationUtils.createCircularReveal(revealedView, cx, cy, 0f, radius)
anim.duration = 1000
revealedView.visibility = View.VISIBLE  // Set the initial visibility
anim.start()

  3. Circular Reveal Animation example with View in Android:

    • Description: Apply Circular Reveal Animation to a view in Android, revealing or hiding it with a circular motion. This example demonstrates the usage with a specific view.
    • Code (Kotlin):
      // Assuming you have a view to reveal/hide with id 'targetView'
val cx = targetView.width / 2
val cy = targetView.height / 2
val radius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

val anim = ViewAnimationUtils.createCircularReveal(targetView, cx, cy, 0f, radius)
anim.duration = 1000
targetView.visibility = View.VISIBLE  // Set the initial visibility
anim.start()

  4. Styling Circular Reveal Animation in Android:

    • Description: Style the Circular Reveal Animation by adjusting properties such as duration, colors, or interpolators. Customize the appearance to match your app's design.
    • Code (Kotlin):
      val anim = ViewAnimationUtils.createCircularReveal(targetView, cx, cy, 0f, radius)
anim.duration = 1500  // Set animation duration in milliseconds
anim.interpolator = AccelerateDecelerateInterpolator()  // Set animation interpolator
anim.start()

  5. Customizing Circular Reveal Animation appearance:

    • Description: Customize the appearance of the Circular Reveal Animation by adjusting parameters such as start and end radius, center coordinates, and duration.
    • Code (Kotlin):
      val cx = targetView.width / 2
val cy = targetView.height / 2
val startRadius = 0f
val endRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()
val duration = 1000

val anim = ViewAnimationUtils.createCircularReveal(targetView, cx, cy, startRadius, endRadius)
anim.duration = duration
targetView.visibility = View.VISIBLE
anim.start()

  6. Handling touch events for Circular Reveal Animation:

    • Description: Handle touch events to trigger the Circular Reveal Animation based on user interactions. For example, reveal the view when a button is clicked.
    • Code (Kotlin):
      button.setOnClickListener {
    startCircularRevealAnimation()
}

private fun startCircularRevealAnimation() {
    val cx = targetView.width / 2
    val cy = targetView.height / 2
    val radius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

    val anim = ViewAnimationUtils.createCircularReveal(targetView, cx, cy, 0f, radius)
    anim.duration = 1000
    targetView.visibility = View.VISIBLE
    anim.start()
}

  7. Adding Circular Reveal Animation to activity transitions:

    • Description: Add Circular Reveal Animation to activity transitions, creating a smooth and visually appealing transition effect between two activities.

    • Code (Kotlin):

      // In the source activity
val intent = Intent(this, TargetActivity::class.java)
val options = ActivityOptions.makeSceneTransitionAnimation(this, view, "transitionName")
startActivity(intent, options.toBundle())

      // In the TargetActivity onCreate method
val cx = targetView.width / 2
val cy = targetView.height / 2
val radius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

val anim = ViewAnimationUtils.createCircularReveal(targetView, cx, cy, 0f, radius)
anim.duration = 1000
targetView.visibility = View.VISIBLE
anim.start()

  8. Interactive Circular Reveal Animation in Android:

    • Description: Make the Circular Reveal Animation interactive by responding to user input. For example, you can reveal or hide the view based on touch gestures.
    • Code (Kotlin):
      targetView.setOnTouchListener { _, event ->
    if (event.action == MotionEvent.ACTION_DOWN) {
        startCircularRevealAnimation()
        return@setOnTouchListener true
    }
    false
}

  9. Circular Reveal Animation vs. other animation techniques:

    • Description: Compare Circular Reveal Animation with other animation techniques, such as fade, slide, or scale animations. Choose the technique that best suits your app's design and user experience.
    • Code (Kotlin):
      // Example: Fade Animation
targetView.animate().alpha(0f).setDuration(1000).start()

// Example: Slide Animation
targetView.animate().translationYBy(200f).setDuration(1000).start()

// Example: Scale Animation
targetView.animate().scaleX(2f).scaleY(2f).setDuration(1000).start()
Copyright © devanddep.com | All Rights Reserved