Le Tutoriel de Android FloatingActionButton

View more Tutorials:

1- Android FloatingActionButton

FloatingActionButton est un boutton spécial qui est généralement affiché sous forme d'un cercle avec une icône au milieu. Il flotte sur l'interface et permet à l'utilisateur de cliquer dessus pour effectuer une action .
Les FloatingActionButton affichés correspondent à différents contextes.
FloatingActionButton est une sous-classe d' ImageButton, et un descendant d' ImageView, vous pouvez donc lui définir l'icône via l'attribut android:srcCompat.
<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" ... />
La bibliothèque de FloatingActionButton n'est pas disponible dans Android SDK, vous devez donc l'installer dans votre projet à partir de Palette de la fenêtre de conception, ou l'ajouter de manière manuelle.
Après son installation à partir de Palette, vous pouvez trouver la bibliothèque déclarée dans build.gradle (Module: app).

implementation 'com.google.android.material:material:1.0.0'
Découvrir la dernière version de cette bibliothèque dans mvnrepository.com:

2- FAB et CoordinatorLayout

FloatingActionButton (FAB) est souvent placé dans un CoordinatorLayout, et les FloatingActionButton sont masqués/affichés selon le contexte, et la transition des View se trouve à l'intérieur de CoordinatorLayout. Cela permet d'améliorer l'expérience de l'utilisateur.
Dans cet article, je mentionne uniquement les fonctions de FAB plutôt que sa relation avec CoordinatorLayout. Quand vous comprennez les fonctions de FAB, vous pouvez les combiner avec un CoordinatorLayout. Et l'article ci-dessous vous sera utile:
  • TODO Link!

3- Les situations d'usage de FloatingActionButton

En général, cela dépend du contexte d'utilisation de FloatingActionButton (FAB), et FAB est constitue l'action principale proposée à l'utilisateur à exécuter. Par exemple, vous être à l'écran pour afficher une liste d'emails. Vous pouvez afficher un FAB pour créer un nouveau email (Si c'est une action fréquemment réalisée par l'utilisateur).

4- Exemple de FAB et ConstraintLayout

Comme mentionné ci-dessus, FloatingActionButton (FAB) doit être placé dans un CoordinatorLayout pour améliorer l'expérience de l'utilisateur. Cependant, dans certaines simples applications, CoordinatorLayout n'est pas vraiment nécessaire. Dans l'exemple suivant, je place un FloatingActionButton (fab) dans un ConstraintLayout, et l'ancrer dans le coin inférieur à droite de ce Layout. Quand l'utilisateur appuie sur ce bouton, trois autres boutons ( fab1, fab2, fab3) sont affichés à côté de fab, ou sont poussés de la vue de l'utilisateur.
OK, dans Android Studio, créer un nouveau projet:
  • File > New > New Project > Empty Activity
    • Name: SimpleFABExample
    • Package name: org.o7planning.simplefabexample
    • Language: Java
Le composant de FloatingActionButton n'est pas disponible dans SDK d' Android, vous devez donc l'installer dans votre projet.
Ou déclarer dans la bibliothèque contenant le FAB dans le fichier build.gradle (Module: app).
....
dependencies {    
    ...    
   implementation 'com.google.android.material:material:1.0.0
}


 
Copier certains fichiers image dans le dossier "drawable":
icon_new.png icon_mail.png icon_camera.png icon_microphone.png
Ensuite, concevoir l'interface de l'application:
Ensuite, aligner la position des FAB(s) dans l'interface:
Enfin, définir ID pour les 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: