o7planning

Android FloatingActionButton Tutorial with Examples

  1. Android FloatingActionButton
  2. FAB and CoordinatorLayout
  3. Các tình huống sử dụng FloatingActionButton
  4. Example of FAB and ConstraintLayout

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 theFloatingActionButton(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:
  • Android CoordinatorLayout

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 displayedto 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>

Android Programming Tutorials

Show More

Android Programming Tutorials

Show More

Newest Articles

Show More