How to Implement Fab Explosion Animation in Android?

When interacting with apps on our devices, animations add delight to the user’s experience and create a sense of connection between the vibrant destinations. One of the animations on Android which enhances the user’s experience is the FAB (Floating Action Button) Explosion Animation. Here, the user clicks the FAB and it explodes to fill the whole screen, with the following screen being loaded. Before the explosion, the FAB shrinks a small amount to account for the press from the user- this coupled with the explosion, creates a pleasant journey to the next screen. A sample video is given below to get an idea about what we are going to do in this article.

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio

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: Navigate to the Gradle Scripts > build.gradle(Module:app) and enables ViewBinding by adding the given code above BuildTypes and Sync the project by clicking on Sync Now option appearing in the top right corner.

buildFeatures {
    viewBinding true
}

Now update SDK Version and Sync the project by clicking on Sync Now option appearing in the top right corner.

android {
    compileSdkVersion 31
    buildToolsVersion "30.0.2"
    defaultConfig {
        applicationId "com.plcoding.fabexplosionanimation"
        minSdkVersion 21
        targetSdkVersion 31
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

Step 3: Add the FAB Icons to the Drawable File. Right-click on the drawable folder > New > Vector Asset. Add choose a vector asset of your choice.

Step 4: Navigate to the res< drawable, right-click on drawable, and choose New > Drawable Resource File. Change the file name to a circle and add the below code.

XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/purple_500" />
</shape>

Step 5: Working with the activity_main.xml file

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. Comments are added inside the code to understand the code in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/purple_500"
        android:src="@drawable/ic_baseline_baby_changing_station_24"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:tint="@color/white" />

    <View
        android:id="@+id/circle"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:background="@drawable/circle"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="@+id/fab"
        app:layout_constraintEnd_toEndOf="@+id/fab"
        app:layout_constraintStart_toStartOf="@+id/fab"
        app:layout_constraintTop_toTopOf="@+id/fab" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 6: Right-click on the res > New > Drawable Resource File. Choose the Resource Type as Animation and the file name as circle_explosion_anim.

Resource file for explosion animation

Add the below code in the Resource file.

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="0"
        android:fromYScale="0"
        android:toXScale="40"
        android:toYScale="40" />
</set>

Step 7: Create a new Kotlin Class and name it ViewExt and refer to the below code to it.

Kotlin

package com.plcoding.fabexplosionanimation

import android.view.View
import android.view.animation.Animation

fun View.startAnimation(animation: Animation, onEnd: () -> Unit) {
    animation.setAnimationListener(object : Animation.AnimationListener {
        override fun onAnimationStart(animation: Animation?) = Unit

        override fun onAnimationEnd(animation: Animation?) {
            onEnd()
        }

        override fun onAnimationRepeat(animation: Animation?) = Unit
    })
    this.startAnimation(animation)
}

Step 8: Working with the MainActivity.kt file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.plcoding.fabexplosionanimation

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.animation.AccelerateDecelerateInterpolator
import android.view.animation.AnimationUtils
import androidx.core.content.ContextCompat
import androidx.core.view.isVisible
import com.plcoding.fabexplosionanimation.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val animation = AnimationUtils.loadAnimation(this, R.anim.circle_explosion_anim).apply {
            duration = 700
            interpolator = AccelerateDecelerateInterpolator()
        }

        binding.fab.setOnClickListener {
            binding.fab.isVisible = false
            binding.circle.isVisible = true
            binding.circle.startAnimation(animation) {
                // display your fragment
                binding.root.setBackgroundColor(ContextCompat.getColor(this, R.color.purple_500))
                binding.circle.isVisible = false
            }
        }
    }
}

Output: