Exemple de tutoriel sur le bouton d’action flottant Android

Aujourd’hui, nous allons apprendre à propos du Bouton d’Action Flottant Android. Nous discuterons du FloatingActionButton, qui est un nouveau composant inclus dans les directives de conception de Material Design et SnackBar, qui est un remplacement de Material Design pour un Toast.

Bouton d’Action Flottant Android

Le Bouton d’Action Flottant Android est utilisé pour mettre en avant la fonction la plus importante à l’écran. C’est une façon cool et élégante d’attirer l’attention de l’utilisateur dessus.

Vue d’ensemble du Bouton d’Action Flottant Android

Pour utiliser les widgets de Material Design dans notre projet, nous devons compiler la dépendance suivante dans notre fichier build.gradle comme indiqué ci-dessous.

compile 'com.android.support:design:23.1.1'

Le widget FloatingActionButton est défini dans la mise en page xml comme suit:

<android.support.design.widget.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@android:drawable/ic_dialog_email"
      android:layout_gravity="bottom|end"
      app:elevation="6dp"
      app:pressedTranslationZ="12dp"/>

Quelques observations faites à partir de la mise en page xml ci-dessus sont définies:

1. Le FloatingActionButton étend la classe ImageView. Cela est évident à partir de l’attribut android:src défini.
2. Dans la mise en page XML ci-dessus, l’attribut d’élévation est utilisé pour projeter une ombre sur le bouton et pressedTranslationZ provoque l’agrandissement de l’ombre lorsqu’il est pressé.

A FloatingActionButton is placed within a CoordinatorLayout. A CoordinatorLayout helps facilitate interactions between views contained within it, which will be useful later to describe how to animate the button depending on scroll changes. SnackBar is a more enhanced widget when compared to a Toast. A SnackBar is invoked as follows:

Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();

Nous avons discuté en détail de SnackBar dans un autre tutoriel. Note importante : Si vous avez bien suivi ces tutoriels Android, vous avez dû remarquer qu’avec la nouvelle mise à jour des outils de construction en version 23.1.1, la structure du projet d’un nouveau projet vide a changé, et les widgets mentionnés ci-dessus sont désormais présents par défaut dans un nouveau projet Android Studio. Ainsi, au lieu d’implémenter les widgets mentionnés ci-dessus, faisons un rapide tour de la nouvelle structure du projet.

Exemple de structure de projet de bouton d’action flottant Android

Comme vous pouvez le voir, un nouveau fichier de mise en page XML nommé content_main.xml est ajouté. Il est identique au précédent activity_main.xml.

Exemple de bouton d’action flottant Android

Le nouveau activity_main.xml est donné ci-dessous :

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.journaldev.floatingactionbutton.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

A toolbar is added by default as a replacement of an ActionBar. It’s added inside an AppBarLayout which is a direct child of CoordinatorLayout The AppBarLayout is used to achieve various scrolling behaviours such as collapse, flex space, and quick return. The MainActivity.java is defined as given below:

package com.journaldev.floatingactionbutton;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Gonfler le menu ; cela ajoute des éléments à la barre d'action s'il est présent.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Gérer les clics sur les éléments de la barre d'action ici. La barre d'action
        // gérera automatiquement les clics sur le bouton Accueil/Haut, tant que
        // vous spécifiez une activité parent dans AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

A new attribute is added to the application tag inside the AndroidManifest.xml named android:supportsRtl="true". This enables right to left layouts in the application. Running this default application produces an output like below: As you can see, on clicking the floating action button, a SnackBar is displayed. This brings an end to this tutorial. You can create a new project in Android Studio and run it to see these features. Note: Make sure that you’re using the latest build tools. Reference: Android Reference Doc