Le Tutoriel de Android FloatingActionButton

Android FloatingActionButton
FAB et CoordinatorLayout
Les situations d'usage de FloatingActionButton
Exemple de FAB et ConstraintLayout

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:

https://mvnrepository.com/artifact/com.google.android.material/material

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:

Le Tutoriel de Android CoordinatorLayout

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).

https://mvnrepository.com/artifact/com.google.android.material/material

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

Tutoriels de programmation Android

Tutoriels de programmation Flutter

Le Tutoriel de Android FloatingActionButton

1. Android FloatingActionButton

2. FAB et CoordinatorLayout

3. Les situations d'usage de FloatingActionButton

4. Exemple de FAB et ConstraintLayout

Tutoriels de programmation Android

Tutoriels de programmation Android

Articles les plus récents