Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Développement Android - Le Floating Action Button :

Par Ahmed FNAYOU Publié le 30/09/2016 à 20:14:24 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introduction :

Dans cet article, on va découvrir ce que c'est que le Floating Action Button en Android. On va voir ses cas d'utilisation, ainsi que son implémentation dans un petit projet exemple.

Sujets abordés dans cet article :

Cet article traitera les points suivants :

  • Présentation

  • Usage

  • Implémentation

    • Création du projet

    • Implémentation du ClickListener

Présentation :

Le Floating Action Button ou tout simplement FAB sont des boutons qui servent à réaliser des actions contextuels par rapport à l'activité dans laquelle on se trouve. Ils sont caractérisés par une forme circulaire bien distinguée qui émerge depuis l'Interface Utilisateur d'où leur aspet "Floating". Ils comportent aussi plusieurs comportements en termes d'animations : Ils peuvent s'étaler sur plusieurs autres boutons FAB pour plusieurs options ou bien commencer une transtion vers une nouvelle activité.

Usage :

Google a intégré le bouton FAB avec la version 5.0 d'Android : Lollipop. A l'époque il a été juste inclu dans le code source pour les développeurs pour qu'ils créent leurs propres librairies de boutons FAB. Et à cette époque, il fallait utiliser des librairies tiers comme makovkastar/FloatingActionButton par exemple. Aprés Google a annoncé sa nouvelle librairie "design support library", celle-ci a apporté plusieurs composants Material Desingn y compris le bouton FAB. Désormais, on pouvait inclure un bouton FAB dans notre application en utilisant cette librairie.

Un chose aussi récurrente dans l'utilsation des FAB : on nécessite toujours une icône lors de sa réalisation. Ces icônes sont les mêmes utilisées dans l'App Bar et doivent repecter les spécifications de Material Design ici. Pour cela Google a fournit toute une source d'icônes pour les développeurs dans son site d'icônes Material Design.

Implémentation :

Création d'un nouveau projet :

Dans Android Studio, créez un nouveau projet File>New Project, nommez-le "Floating Action Button" et choisissez "Basic Activity" dans le menu des templates proposées pour l'application.

Rendez-vous d'abord dans le fichier build.gradle, vous allez trouver l'utilisation de la fameuse librarie "design support library" dont on a parlé.

Maintenant, ouvrez le fichier res>layout>activity_main. Ce fichier représente la template de la vue principale de l'activité. Elle contient l'App Bar Layout, un layout "content_main" et finalement notre bouton FAB.

Rendez- vous dans le fichier res>layout>content_main, ce fichier représente le contenu de notre vue. il contient un simple TextView Hello World :

Si vous lancez l'application en ce moment vous allez voir notre FAB, appuyez dessus ça va afficher un snackbar en bas indiquant "Replace with your own action".

Implémentation du ClickListener :

Dans cette section on va essayer d'implémenter notre propre comportent lors du clic sur le bouton FAB. Nous allons lancer une nouvelle activité. Pour cela, créons d'abord une nouvelle activité: clic droit sur le dossier du projet puis new>Activity>Empty Activity, nommez-la "DestinationActivity".

Ouvrez le fichier res>layout>activity_destination et ajoutez un TextView "Hello Destination Activity" :

Maintenant, rendez-vous dans le package java de l'application et ouvrez le fichier "MainActivity". On remarque ici qu'aprés l'instanciation du bouton FAB on lui attribue un ClickListener qui override la fameuse méthode onClick() où on affiche le Snackbar avec le message. Modifiez cette méthode comme suit :

Maintenant lancez l'application et appuyez sur le bouton FAB, vous allez automatiquement être redirigé vers l'activité qu'on a ajoutée "Destination Activity".

Conclusion :

Apart cette implémentation basique du FAB de l librarire "Design Support Library" de Google, Il existe plusieurs librairies tiers qui existent sur GitHub pour des options et des effets encore plus customisés.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels