Implementation of Floating action button in Android

Hey people! Welcome to my blog on implementing floating action button in android.

Floating Action Button is a slight variant of an regular button. In simple words, it is a circular icon floating above the User Interface. On clicking this floating icon, primary actions such as transitions are triggered.

1. Add a simple Floating Action Button

Here is how A Simple Floating Action Button Widget  is implemented in the Layout file:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/regular_fab"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_width="wrap_content"
    android:src="@drawable/ic_baseline_add_24"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

2. Types of FABs

The Floating Action Button is classified into types as follows:

2.1 Regular FAB

This type of FAB is most commonly used. Its size is regular by default.
The Implementation in the Layout file is shown as follows:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/regular_fab"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/ic_baseline_add_24"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/extended"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

2.2 Extended FAB

This type of FAB is the wider version of an regular FAB. It consists of a text field.
The major difference is that we use a different widget by replacing FloatingActionButton with ExtendedFloatingActionButton.

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:id="@+id/extended_fab"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_width="wrap_content"
    android:text="@string/extend_text"
    android:textAlignment="center" />

2.3 Mini FAB

This type of FAB is the smaller version of an regular FAB. It is designed for smaller screens.
We invoke a mini FAB by using the app:fabSize=”mini”
attribute.

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/mini_fab"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/ic_baseline_add_24"
    app:fabSize="mini"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

3. Steps to implement an regular FAB:

3.1 Add dependencies to the project

To begin, we need to have dependencies in the build.gradle app module.

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

Once the dependency is added, we have to sync the project.

3.2 Get the FAB icon

In the Resource folder(res), right click on the drawable package –> New –> Vector Asset.

When the Asset Studio appears, choose the desired icon from ClipArt.

3.3 Add fab to layout

<?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/regular_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_baseline_add_24"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

3.4 Invoking the FAB

Initially, we declare a variable and call findViewById() which searches the id :“regular_fab” in the activity_main.xml file.

We use the fab instance to invoke the function setOnClickListener() which performs the required action on clicking the FAB. In our case, a simple text “Hello” appears. We make use Toast to achieve this.

This layout resource file is to design a UI which acts as a resource to the Android. We add Floating Action Button Widget with in the Constraint Layout.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import com.google.android.material.floatingactionbutton.FloatingActionButton

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

        val fab = findViewById<FloatingActionButton>(R.id.regular_fab)
        fab.setOnClickListener {
            Toast.makeText(this, "Toast Alive", Toast.LENGTH_LONG).show()
        }
    }
}

4. Emitting or expanding a fab

This is an interesting feature of FAB, which helps us to add multiple Floating Action Button within a single FAB.

Here is the activity_main.xml file for implementing expandable FAB:

<?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/base_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_baseline_add_24"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/call_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_baseline_add_ic_call_24"
        app:fabSize="mini"
        app:layout_constraintBottom_toTopOf="@+id/base_fab"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/text_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Audio Call"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="@id/call_fab"
        app:layout_constraintEnd_toStartOf="@id/call_fab"
        app:layout_constraintTop_toTopOf="@id/call_fab" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/video_call_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_baseline_video_call_24"
        app:fabSize="mini"
        app:layout_constraintBottom_toTopOf="@id/call_fab"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/text_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Video Call"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="@id/video_call_fab"
        app:layout_constraintEnd_toStartOf="@id/video_call_fab"
        app:layout_constraintTop_toTopOf="@id/video_call_fab" />

</androidx.constraintlayout.widget.ConstraintLayout>

The preview of this layout file will look as follows:

Here is the MainActivity.kt file for implementing expandable FAB:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.TextView
import com.google.android.material.floatingactionbutton.FloatingActionButton

class MainActivity : AppCompatActivity() {

    private var eachFabVisible: Boolean? = null

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

        val baseFab = findViewById<FloatingActionButton>(R.id.base_fab)
        val callFab = findViewById<FloatingActionButton>(R.id.call_fab)
        val videoFab = findViewById<FloatingActionButton>(R.id.video_call_fab)
        val textOne = findViewById<TextView>(R.id.text_one)
        val textTwo = findViewById<TextView>(R.id.text_two)

        videoFab.visibility = View.GONE
        callFab.visibility = View.GONE
        textOne.visibility = View.GONE
        textTwo.visibility = View.GONE

        eachFabVisible = false

        baseFab.setOnClickListener {
            if (!eachFabVisible!!) {
                eachFabVisible = true
                videoFab.show()
                callFab.show()
                textOne.visibility = View.VISIBLE
                textTwo.visibility = View.VISIBLE
            } else {
                videoFab.hide()
                callFab.hide()
                textOne.visibility = View.GONE
                textTwo.visibility = View.GONE
                eachFabVisible = false
            }
        }
    }
}

The MainActivity.kt file deals with handling the FABs.  Clicking the parent FAB will result in the appearance of sub FABs.

Initially, the visibility of the sub FABs is set to False by using the setVisibility(). Next, we implement setOnClickListener() to invoke the sub FABs when the parent FAB is clicked upon. Then the visibility is set to True. A Toast message is added to each sub FAB.

Finally, if the parent FAB is clicked again, the visibility is set to False. This hides the sub FABs.

5. External Resources

The Github Repository links for the Floating Action Button and Expandable FAB are listed below:

That’s it people I hope you found this information useful, thanks for reading.

Here We Go Again : (

if (article == helpful) {
    println("Like and subscribe to blog newsletter.")
} else {
    println("Let me know what i should blog on.")
}