android floating action button animation menu example
android floating action button animation menu example

Hi Guys, Welcome to Proto Coders Point, In this Android Tutorial Article, we will learn How to Implement the Floating action button with an animation pop-up menu example.

What is Floating Action Button ?

The floating action button is a speical and different as compared to normal button. They are in circle or round button in android that will be floating above the UI. This Floating Button is known as primary action used by users to perform main task.

For Example: Using Floating Button a user can perform action like adding a new item to an existing list.

So in this article, we will learn how to implement Floating Action Button in android with menu pop-up animation example.

NOTE: we are going to implement this project using kotlin android language.

then let’s begin with the tutorial.

Steps for Creating Extended Floating Action Button with Animation

Step 1: Create new Project

Just Create a new Android Project in your android studio IDE

Step 2: check for material design dependencies

If you are using latest version of android studio IDE (4.1.1) then material design dependencies will automatically been added in your project while creating new project. To check that, open build.gradle(Module:app) under dependencies section check if material dependencies is there if not then add it.

// material design 

implementation 'com.google.android.material:material:1.3.0'

After adding any new dependencies, a button/text “Sync Now” will appear on the top right corner of your android Studio IDE just click on it.

Make user you are connected to Internet before hiting Sync Now button. It will download all the files of the depencencies into your project.

We need Material dependencies because FloatingActionButton library exist in it.

Step 3 : Create Vector Images Icon

Now In Drawable folder create some vector Icon Image, to display icons on fab buttons.

  • To create new vector images in the project  right-click on the drawable folder -> New -> Vector Asset.
  • A new pop window will be opened and choose any vector you want by clicking on the Clip Art button.
  • Please refer below images.
how to create vector image

click on clip art to select vector image icons.

Step 4: Create fab animation files

Here is How my animation xml file structure looks.

creating anim files android

So as you can see in above screenshot, you need to create 4 animation files.

firstly under res folder create Android Resource directory(anim), res(right click) > New > Android Resource Directory > a dialog open’s under resource type select anim.

Then, anim directory is been created, now under anim folder create 4 android resource files.

res > anim(right click) > New > Animation Resources File

from_bottom_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <translate
        android:fromYDelta="100%"
        android:toYDelta="0%"
        android:duration="300"/>

    <scale android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.8"
        android:toYScale="0.8"/>

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="800"/>

</set>

to_bottom_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <translate
        android:fromYDelta="0%"
        android:toYDelta="100%"
        android:duration="300"/>

    <scale android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="0.8"
        android:fromYScale="0.8"
        android:toXScale="0.8"
        android:toYScale="0.8"/>

    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="150"/>

</set>

rotate_open_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360"
        android:duration="300"
        />
</set>

rotate_close_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <rotate
        android:fromDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="0"
        android:duration="300" />

</set>

Step 5: Working with activity_main.xml

Kindly refer the comment in below xml code for easy understanding

activity with floating action button
<?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">

    <!--This is a parent Floating Action Button-->
    <!-- When this FAB Button is been pressed/clicked the following two button will get pop-up with animation -->
    <!-- the Functionality is been done in MainActivity.java file -->
    <!-- The other two FAB button is been set to InVisible so when user click on this button those 2 will get visible-->

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/add_f"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginBottom="24dp"
        android:clickable="true"
        android:focusable="true"
        android:tint="@android:color/white"
        android:backgroundTint="#0038FF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/ic_android"
        tools:ignore="VectorDrawableCompat" />

    <!--This act a child Floating Action Button-->
    <!-- The visibility is been set to INVISIBLE -->
 
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/edit_f"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:clickable="true"
        android:visibility="invisible"
        android:focusable="true"
        android:tint="@color/white"
        app:layout_constraintBottom_toTopOf="@+id/add_f"
        app:layout_constraintEnd_toEndOf="@+id/add_f"
        app:srcCompat="@drawable/ic_edit_24" />

    <!--This act a child Floating Action Button-->
    <!-- The visibility is been set to INVISIBLE -->

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/setting_f"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:clickable="true"
        android:focusable="true"
        android:visibility="invisible"
        android:tint="@color/white"
        app:layout_constraintBottom_toTopOf="@+id/edit_f"
        app:layout_constraintEnd_toEndOf="@+id/edit_f"
        app:srcCompat="@drawable/ic_settings_24" />
</androidx.constraintlayout.widget.ConstraintLayout>

In you want to change floating action button color then you can user

android:backgroundTint="@color/white"

and you easily change floating action button icon size then use 

app:maxImageSize="45dp"

Step 6: Handling Floating Action Button Animation in MainActivity.java

package com.example.expandablefloatingactionbutton

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.view.animation.Animation
import android.view.animation.AnimationUtils
import android.widget.Toast
import com.example.expandablefloatingactionbutton.R
import com.google.android.material.floatingactionbutton.FloatingActionButton
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

     // creating variable that handles Animations loading
    // and initializing it with animation files that we have created
    private  val rotateOpen : Animation by lazy { AnimationUtils.loadAnimation(this,R.anim.rotate_open_anim) }
    private  val rotateClose : Animation by lazy { AnimationUtils.loadAnimation(this,R.anim.rotate_close_anim) }
    private  val fromBottom: Animation by lazy { AnimationUtils.loadAnimation(this,R.anim.from_bottom_anim) }
    private  val toBottom : Animation by lazy { AnimationUtils.loadAnimation(this,R.anim.to_bottom_anim) }

   //used to check if fab menu are opened or closed
    private var closed = false


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //add fab button
        add_f.setOnClickListener {

            OnAddButtonClick()
        }
         
         //edit fab button on click
        edit_f.setOnClickListener {
            Toast.makeText(this,"Edit",Toast.LENGTH_SHORT).show();
        }

        //setting fab button on click
        setting_f.setOnClickListener {
            Toast.makeText(this,"Search",Toast.LENGTH_SHORT).show();
        }


    }

    private fun OnAddButtonClick() {

         setVisibility(closed)
         setAnimation(closed)

        closed = !closed;

    }

   // A Function used to set the Animation effect
    private fun setAnimation(closed:Boolean) {

        if(!closed){
            edit_f.startAnimation(fromBottom)
            setting_f.startAnimation(fromBottom)
            add_f.startAnimation(rotateOpen)
        }else{
            edit_f.startAnimation(toBottom)
            setting_f.startAnimation(toBottom)
            add_f.startAnimation(rotateClose)
        }
    }

    // used to set visibility to VISIBLE / INVISIBLE
    private fun setVisibility(closed:Boolean) {

        if(!closed)
        {
            edit_f.visibility = View.VISIBLE
            setting_f.visibility = View.VISIBLE
        }else{
            edit_f.visibility = View.INVISIBLE
            setting_f.visibility = View.INVISIBLE
        }

    }
}