Android FloatingActionButton Tutorial

View more Tutorials:

1- Android FloatingActionButton

FloatingActionButton is a special button which is usually displayed as a circular shape with an Icon in the center. It floats on the surface of the interface allowing the user to click on it to perform an action.
The FloatingActionButton is suitably displayed for different contexts.
FloatingActionButton is a subclass of ImageButton, and is a descendant of ImageView, so you can set the Icon for it through the android:srcCompat attribute.
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    app:srcCompat="@drawable/icon_new" ... />
The FloatingActionButton library is not available in the Android SDK, so you need to install it in your project from  Palette of the design window, or add the library to the project manually.
After being installed from Palette, the library has been declared in  build.gradle (Module: app).

implementation 'com.google.android.material:material:1.0.0'
Check out the latest version of this library on​​​​​​​ mvnrepository.com:

2- FAB and CoordinatorLayout

FloatingActionButton (FAB) is commonly placed in a  CoordinatorLayout where the   FloatingActionButton(s) will hide/show in accordance with the context, and the transition of the View(s) is inside the CoordinatorLayout. This enhances the user's experience.
In this article I only mention the features of FAB instead of its relation with CoordinatorLayout. When understanding the features of FAB,  you can combine them with a CoordinatorLayout. And the following article will be useful to you:
  • TODO Link!

3- Các tình huống sử dụng FloatingActionButton

Normally, it depends on the context to use a  FloatingActionButton (FAB), and FAB is the primary action given to the user. For example, you are on the screen to view an email list. An  FAB can be displayed  to allow the user to create a new Email (If it is thought that this action is commonly used by the user).

4- Example of FAB and ConstraintLayout

As mentioned above, FloatingActionButton (FAB) should be placed in a  CoordinatorLayout in order to enhance the user's experience. However, in a few simple applications, CoordinatorLayout is not necessary. In this example, I will be putting a  FloatingActionButton (fab) in a  ConstraintLayout, and anchor it to the bottom right corner of the  Layout. When the user clicks on this button, three other buttons ( fab1, fab2, fab3) will show up next to the  fab, or be pushed out of the user's sight.
OK, now on  Android Studio create a project:
  • File > New > New Project > Empty Activity
    • Name: SimpleFABExample
    • Package name: org.o7planning.simplefabexample
    • Language: Java
The FloatingActionButton component is not available in  SDK of  Android. In order to use the component, you need to install it into your project.
Or declare the library consisting of the FAB in  build.gradle (Module: app) file.
....
dependencies {    
    ...    
   implementation 'com.google.android.material:material:1.0.0
}


 
Copy several image files into the  "drawable" folder.
icon_new.png icon_mail.png icon_camera.png icon_microphone.png
Next, design the application interface:
Then align the position of the FAB(s)  in the interface:
Finally, set  ID to  FAB(s):
activity_main.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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginBottom="24dp"
        android:clickable="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/icon_new" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginBottom="24dp"
        android:clickable="true"
        app:layout_constraintBottom_toTopOf="@+id/fab"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/icon_mail" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginBottom="20dp"
        android:clickable="true"
        app:layout_constraintBottom_toTopOf="@+id/fab1"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/icon_camera" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginBottom="24dp"
        android:clickable="true"
        app:layout_constraintBottom_toTopOf="@+id/fab2"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/icon_microphone" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.simplefabexample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;

import com.google.android.material.floatingactionbutton.FloatingActionButton;

public class MainActivity extends AppCompatActivity {

    private FloatingActionButton fab;
    private FloatingActionButton fab1;
    private FloatingActionButton fab2;
    private FloatingActionButton fab3;

    private boolean isFABOpen;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.fab = (FloatingActionButton) findViewById(R.id.fab);
        this.fab1 = (FloatingActionButton) findViewById(R.id.fab1);
        this.fab2 = (FloatingActionButton) findViewById(R.id.fab2);
        this.fab3 = (FloatingActionButton) findViewById(R.id.fab3);

        this.fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(!isFABOpen){
                    showFABMenu();
                } else{
                    closeFABMenu();
                }
            }
        });
    }

    private void showFABMenu(){
        isFABOpen=true;
        fab1.animate().translationY(-getResources().getDimension(R.dimen.standard_55));
        fab2.animate().translationY(-getResources().getDimension(R.dimen.standard_105));
        fab3.animate().translationY(-getResources().getDimension(R.dimen.standard_155));
    }

    private void closeFABMenu(){
        isFABOpen=false;
        fab1.animate().translationY(0);
        fab2.animate().translationY(0);
        fab3.animate().translationY(0);
    }

}
dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="standard_55">255dp</dimen>
    <dimen name="standard_105">2105dp</dimen>
    <dimen name="standard_155">2155dp</dimen>
</resources>

View more Tutorials: