Dans ce tutoriel, nous allons aborder le bouton flottant , comment définir son apparence pour le donner un visuel des composants material, et enfin comment gérer le clic.
Table des matières
FloatingActionButton
Le widget FloatingActionButton disponible dans la librairie des composant android fournit une implémentation complète d’un composant FloatingActionButton du material design. Il est utilisé pour exécuter et mettre en avant une action principale dans votre application.
Créer un nouveau projet
Créez un nouveau projet dans android studio en cliquant sur File ->New- New Project ,sélectionnez Empty Activity puis cliquez sur Next. Nommez ensuite ce projet MaterialFloatingActionButton
Ajouter la librairie des composants material
Avant de pouvoir utiliser le composant FloatingActionButton , vous devez ajouter la librairie des composants material comme dépendance dans votre projet. pour cela
Ouvrer le ficher build.gradle(app) au niveau application puis ajoutez la dépendance de la librairie des composants material comme suit
.... implementation 'com.google.android.material:material:1.1.0-alpha10' ....
Ajouter le FloatingActionButton
Nous allons ajouter le widget FloatingActionButton dans un CoordinatorLayout qui permet au vue qu’il contient de pouvoir communiquer. Il permet par exemple de déplacer le bouton flottant lorsque le snackbar s’affiche , de cacher ou afficher le bouton flottant lors du scroll.
Créer un nouveau vecteur drawable nommée done.xml en cliquant sur File->New->Vector Asset,
cliquez sur Clip Art pour change d’icon ,cliquez sur Ok, puis sur Next puis renommez le fichier en done et enfin cliquez sur Finish.
Pour ajouter le FloatingActionButton ouvrez le fichier res>layout>activity_main puis changez le ConstraintLayout en CoordinatorLayout puis ajoutez le bouton flottant comme suit
Si votre application fonctionne sur les appareils exécutant une version Android inférieur à la version 5 , vous devez d’abord ajouter le support des vecteurs drawable dans le fichier build.gradle(app) comme suit.Pour en savoir plus lisez cet article
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:srcCompat="@drawable/done"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Après exécution, votre application doit s’afficher comme suit
Définir un style material au composant FloatingActionButton
Pour appliquer au bouton flottant le nouveau style des composants material , le thème de votre application doit hériter d’un des thèmes de la librairie des composants material ( Theme.MaterialComponents ) ou vous devez directement appliquer au bouton flottant un style de la librairie des composants material.
Si vous souhaitez utiliser le bouton flottant du nouveau material design(material disgn 2) et que votre thème n’hérite pas d’un thème de la librairies des composants matérial ( Theme.MaterialComponents ) vous pouvez directement appliquer au composant FloatingActionButton un style de la librairie des composant material.
Définir un thème de la librairie des composant matérial
Pour avoir le nouveau style material, vous pouvez simplement faire hérité au thème de votre application l’un des thèmes de la librairie des composants material comme suit
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
Définir directement le tyle dans le widget
Si votre thème n’hérite pas d’un des thèmes de librairie des composants material, vous pouvez directement appliquer le style d’un composant FloatingActionButton de la librairie des composants material comme suit
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
style="@style/Widget.MaterialComponents.FloatingActionButton"
app:srcCompat="@drawable/done"/>
Définir directement le style hérité
Le style Widget.MaterialComponents.FloatingActionButton de la librairie de composants material hérite du style Widget.Design.FloatingActionButton. Donc vous pouvez aussi définir directement le style du widget en utilisant le style parent Widget.MaterialComponents.FloatingActionButton comme suit
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
style="@style/Widget.Design.FloatingActionButton"
app:srcCompat="@drawable/done"/>
Les attributs du composant FloatingActionButton
| Feature | Relevant attributes |
|---|---|
| Icon | app:srcCompatapp:tintapp:maxImageSize |
| Taille | app:fabSizeapp:fabCustomSize |
| Arrière plan | app:backgroundTint |
| Ripple | app:rippleColor |
| Bordure | app:borderWidth |
| Elevation | app:elevationapp:hoveredFocusedTranslationZapp:pressedTranslationZ |
| Motion | app:showMotionSpecapp:hideMotionSpec |
Usage des attributs d’une icon
Les attributs app:srcCompat , app:tint et app:maxImageSize permettent respectivement de définir l’icon ,la couleur et la taille maximal de l’icon du bouton flottant
Par exemple on peut changer la couleur de l’icon avec app:tint comme suit
app:tint
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:tint="#ffffff"
style="@style/Widget.MaterialComponents.FloatingActionButton"
app:srcCompat="@drawable/done"/>
app:maxImageSize
Cet attribut vous permet d’augmenter ou de diminuer la taille de l’icon.
Par exemple nous diminuons la taille de l’icon en définissant la valeur de l’attribut app:maxImageSize à 10dp comme suit
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:tint="#ffffff"
app:maxImageSize="10dp"
style="@style/Widget.MaterialComponents.FloatingActionButton"
app:srcCompat="@drawable/done"/>
Ou par exemple nous pouvons augmenter la taille de l’icon en définissant la valeur de l’attribut app:maxImageSize à 50dp comme suit
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:tint="#ffffff"
app:maxImageSize="50dp"
style="@style/Widget.MaterialComponents.FloatingActionButton"
app:srcCompat="@drawable/done"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Usage des attributs pour changer la taille du composant FloatingActionButton
Les attributs app:fabSize et app:fabCustomSize permettent de changer la taille du bouton flotant sur une taille standard ou en définissant une taille personnalisé
app:fabSize: Cet attribut vous permet de changer la taille selon plusieurs mode tel que mini,auto,normal
- mini: pour la taille minimun (40dp)
- normal:pour la taille normal (56dp)
- auto:La taille du bouton sera redimensionné en fonction de la taille de fenêtre. Par exemple pour les écran dont la taille est inférieur à 470dp, la taille minimum du bouton sera défini sinon se sera la taille normal du bouton qui sera défini
Par défaut le mode de dimension est défini à auto et vous pouvez changer le mode avec l’attribut app:fabSize.
Taille personnalisée
Pour personnaliser complètement la taille du bouton flottant, vous pouvez utiliser l’attribut app:fabCustomSize dans le fichier xml ou directement appelé la méthode fab.customSize en kotlin et fab.setCustomSize() en java dans le code
Si vous avez défini au bouton flottant une taille personnalisée et que vous souhaitez l’éffacer ou ne plus prendre en compte la taille personnalisée,vous pouvez appeler la méthode clearCustomSize. Si vous appelez cette méthode,la taille du bouton flottant sera défini en fonction de la valeur définie avec la méthode setSize ou la valeur définie dans le code xml avec la propriété app:fabSize/
La couleur d’arrière plan
Vous pouvez changer la couleur d’arrière plan du bouton avec l’attribut app:backgroundTint comme suit
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:tint="#ffffff"
android:backgroundTint="@color/colorAccent"
style="@style/Widget.MaterialComponents.FloatingActionButton"
app:srcCompat="@drawable/done"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
.
La couleur de l’effet ripple
Vous pouvez définir la couleur de l’effet ripple avec la propriété app:rippleColor comme suit
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:tint="#ffffff"
app:rippleColor="@color/colorPrimaryDark"
style="@style/Widget.MaterialComponents.FloatingActionButton"
app:srcCompat="@drawable/done"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
L’élevation
Vous avez la possibilité de définir l’élévation selon que le bouton soit pressé par l’utilisé ou non pressé.
app:elevation Vous permet de définir la valeur de l’élévation par défaut du bouton .La valeur par défaut est définit à 6dp pour respecter les spécification du material design
app:hoveredFocusedTranslationZ :Vous permet de définir la valeur de ma translation du bouton sur l’axe Z lorsque le bouton aura le focus ou lorsqu’il sera survoler.
app:pressedTranslationZ Permet de définir la valeur de la translation du bouton sur l’axe Z lorsque le bouton sera pressé.
Le movement
app:showMotionSpec et app:hideMotionSpec vous permet de définir les animations qui seront exécuté lorsque le bouton sera afficher ou caché.
app:showMotionSpec :Vous permet de définir l’animation qui sera exécuter lorsque le bouton s’affichera.Vous devez définir un objet animator définit dans le répertoire res/animator .
app:hideMotionSpec : Vous permet de définir l’animation qui sera exécuter lorsque le bouton sera caché.Vous devez définir un objet animator définit dans le répertoire res/animator .
Les attributs de thème
Le style de la libraierie de composant material
Le style Widget.MaterialComponents.FloatingActionButton définit plusieurs attributs que vous pouvez redéfinir pour personnaliser le style de bouton flottant.
| Component Attribute | Default Theme Attribute Value |
|---|---|
backgroundTint | colorSecondary |
tint | colorOnSecondary |
rippleColor | colorOnSecondary |
Par contre le style Widget.Design.FloatingActionButton hérité par le style Widget.MaterialComponents.FloatingActionButton n’utilise pas les attribut de thèmes de couleur de la librairie des composants material.
Visibilité
Utilisez les méthodes show et hide pour animer la visibilité d’un bouton flottant. L’animation show agrandit le widget et et augment l’opacité, tandis que l’animation hide réduit le widget et diminue l’opacité.
fab.hide() fab.show()
fab.hide(); fab.show();
Gestion du clic
Vous pouvez gérer le clic d’un bouton flottant de la même manière que n’importe qu’elle autre bouton
fab.setOnClickListener(object :View.OnClickListener{
override fun onClick(p0: View?) {
}
})
floatingActionButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
Positionnement des d’un boutons flottant
Une autre manière d’utiliser le composant FloatingActionButton est de le positionner en entête dans une vue relativement à un autre widget.Pour mettre cela en place vous devez définir le CoordinatorLayout comme racine de votre vue. Nous arrivons à positionner le bouton flottant grâce aux attributs app:layout_anchor et app:layout_anchorGravity
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<TextView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="16dp"
android:background="@color/colorPrimary"
android:layout_weight="0.4"
/>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_margin="8dp"
android:layout_height="0dp"
android:layout_weight="0.6"
>
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="8dp"
android:layout_height="wrap_content">
<TextView
android:text="Contenu scrollable"
android:textStyle="bold"
android:textSize="16sp"
android:textColor="#000000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:text="Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrai"
android:textSize="14sp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchorGravity="bottom|end"
app:layout_anchor="@id/header"
android:layout_margin="16dp"
app:tint="#ffffff"
app:layout_behavior=".FloatingActionButtonBehavior"
style="@style/Widget.Design.FloatingActionButton"
app:srcCompat="@drawable/done"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Après exécution vous devez obtenir une interface semblable à cette image
Animation d’un bouton flottant
Un autre cas d’utilisation du bouton flottant est quand il est présent dans une vue contenant un élément scrollable tel que le NestedscrollView ou le Recylcerview dans lequel le bouton flottant est cacher lorsque l’utilisateur scroll le contenu vers le haut et réapparaît lorsque l’utilisateur scroll le contenu vers le bas.
Pour mette en place cette animation,nous devons ajouter le CoordinatorLayout comme racine de la vue car c’est lui qui permet aux vues qu’il contient de pouvoir communiquer.
Pour permettre aux vues de pouvoir communiquer le CoordinatorLayout utilise une autre classe appelé CoordinatorLayout.Behavior qui permet aux widget de dire comment il souhaite réagit au comportement d’un autre widget.
Dans cette exemple nous allons utiliser le FloatingActionButon.Behavior qui implémente déjà l’animation qui permet au bouton flottant de se déplacer lorsqu’un snackbar s’affiche.
Nous allons donc créer une sous classe FloatingActionButtonBevavior qui hérite de la classe FloatingActionButon.Behavior pour définir le comportement du bouton flottant .
package com.example.floatingactionbuttonkotlin
import android.content.Context
import android.util.AttributeSet
import android.view.View
import androidx.coordinatorlayout.widget.CoordinatorLayout
import androidx.core.view.ViewCompat
import com.google.android.material.floatingactionbutton.FloatingActionButton
class FloatingActionButtonBehavior(context: Context, attrs: AttributeSet?) :
FloatingActionButton.Behavior(context, attrs) {
override fun onStartNestedScroll(
coordinatorLayout: CoordinatorLayout,
child: FloatingActionButton,
directTargetChild: View,
target: View,
axes: Int,
type: Int
): Boolean {
return axes==ViewCompat.SCROLL_AXIS_VERTICAL || super.onStartNestedScroll(
coordinatorLayout,
child,
directTargetChild,
target,
axes,
type
)
}
override fun onNestedScroll(
coordinatorLayout: CoordinatorLayout,
child: FloatingActionButton,
target: View,
dxConsumed: Int,
dyConsumed: Int,
dxUnconsumed: Int,
dyUnconsumed: Int,
type: Int,
consumed: IntArray
) {
super.onNestedScroll(
coordinatorLayout,
child,
target,
dxConsumed,
dyConsumed,
dxUnconsumed,
dyUnconsumed,
type,
consumed
)
if (dyConsumed>0 && child.visibility==View.VISIBLE){
child.hide(object : FloatingActionButton.OnVisibilityChangedListener(){
override fun onHidden(fab: FloatingActionButton?) {
super.onHidden(fab)
fab?.visibility=View.INVISIBLE
}
})
}
else if(dyConsumed<0 && child.visibility!=View.VISIBLE){
child.show()
}
}
}
package com.example.materialfloatingactionbutton;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.NonNull;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import androidx.core.view.ViewCompat;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
public class FloatingActionButtonBehavior extends FloatingActionButton.Behavior {
public FloatingActionButtonBehavior(Context c){
}
public FloatingActionButtonBehavior(Context c, AttributeSet attr){
}
@Override
public boolean onStartNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull FloatingActionButton child, @NonNull View directTargetChild, @NonNull View target, int axes, int type) {
return axes== ViewCompat.SCROLL_AXIS_VERTICAL || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, axes, type);
}
@Override
public void onNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull FloatingActionButton child, @NonNull View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed, int type, @NonNull int[] consumed) {
super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, type, consumed);
if(dyConsumed>0 && child.getVisibility()==View.VISIBLE){
child.hide(new FloatingActionButton.OnVisibilityChangedListener() {
@Override
public void onHidden(FloatingActionButton fab) {
super.onHidden(fab);
fab.setVisibility(View.INVISIBLE);
}
});
}
else if(dyConsumed<0 && child.getVisibility()!=View.VISIBLE){
child.show();
}
}
}
Ensuite nous allons créer une vue avec un NestedScrollview et un FloatingActionButtin et ajouter ensuite au bouton flottant le behavior que nous venons de créer grâce à l’attribut app:layout_behavior. Nous allons utiliser comme un widget scrollable: le NestedScrollView, vous pouvez aussi utiliser un RecyclerView
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:paddingRight="16dp"
android:paddingLeft="16dp"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:backgroundTint="#f1f1f1"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_margin="8dp"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="8dp"
android:layout_height="wrap_content">
<TextView
android:text="Contenu scrollable"
android:textStyle="bold"
android:textSize="16sp"
android:textColor="#000000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:text="Contrairement à une opinion répandue, le Lorem Ipsum n'est
pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de
la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans.
Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots
latins les plus obscurs, consectetur, extrai"
android:textSize="14sp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_margin="8dp"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="8dp"
android:layout_height="wrap_content">
<TextView
android:text="Contenu scrollable"
android:textStyle="bold"
android:textSize="16sp"
android:textColor="#000000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:text="Contrairement à une opinion répandue, le Lorem Ipsum n'est
pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de
la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans.
Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots
latins les plus obscurs, consectetur, extrai"
android:textSize="14sp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_margin="8dp"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="8dp"
android:layout_height="wrap_content">
<TextView
android:text="Contenu scrollable"
android:textStyle="bold"
android:textSize="16sp"
android:textColor="#000000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:text="Contrairement à une opinion répandue, le Lorem Ipsum n'est
pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de
la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans.
Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots
latins les plus obscurs, consectetur, extrai"
android:textSize="14sp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_margin="8dp"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="8dp"
android:layout_height="wrap_content">
<TextView
android:text="Contenu scrollable"
android:textStyle="bold"
android:textSize="16sp"
android:textColor="#000000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:text="Contrairement à une opinion répandue, le Lorem Ipsum n'est
pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de
la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans.
Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots
latins les plus obscurs, consectetur, extrai"
android:textSize="14sp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_margin="8dp"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="8dp"
android:layout_height="wrap_content">
<TextView
android:text="Contenu scrollable"
android:textStyle="bold"
android:textSize="16sp"
android:textColor="#000000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:text="Contrairement à une opinion répandue, le Lorem Ipsum n'est
pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de
la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans.
Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots
latins les plus obscurs, consectetur, extrai"
android:textSize="14sp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_margin="8dp"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="8dp"
android:layout_height="wrap_content">
<TextView
android:text="Contenu scrollable"
android:textStyle="bold"
android:textSize="16sp"
android:textColor="#000000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:text="Contrairement à une opinion répandue, le Lorem Ipsum n'est
pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de
la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans.
Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots
latins les plus obscurs, consectetur, extrai"
android:textSize="14sp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_margin="8dp"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="8dp"
android:layout_height="wrap_content">
<TextView
android:text="Contenu scrollable"
android:textStyle="bold"
android:textSize="16sp"
android:textColor="#000000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:text="Contrairement à une opinion répandue, le Lorem Ipsum n'est
pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de
la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans.
Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots
latins les plus obscurs, consectetur, extrai"
android:textSize="14sp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_margin="8dp"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="8dp"
android:layout_height="wrap_content">
<TextView
android:text="Contenu scrollable"
android:textStyle="bold"
android:textSize="16sp"
android:textColor="#000000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:text="Contrairement à une opinion répandue, le Lorem Ipsum n'est
pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de
la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans.
Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots
latins les plus obscurs, consectetur, extrai"
android:textSize="14sp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_margin="8dp"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="8dp"
android:layout_height="wrap_content">
<TextView
android:text="Contenu scrollable"
android:textStyle="bold"
android:textSize="16sp"
android:textColor="#000000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:text="Contrairement à une opinion répandue, le Lorem Ipsum n'est
pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de
la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans.
Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots
latins les plus obscurs, consectetur, extrai"
android:textSize="14sp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_margin="8dp"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="8dp"
android:layout_height="wrap_content">
<TextView
android:text="Contenu scrollable"
android:textStyle="bold"
android:textSize="16sp"
android:textColor="#000000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:text="Contrairement à une opinion répandue, le Lorem Ipsum n'est
pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de
la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans.
Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots
latins les plus obscurs, consectetur, extrai"
android:textSize="14sp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:tint="#ffffff"
app:layout_behavior=".FloatingActionButtonBehavior"
style="@style/Widget.Design.FloatingActionButton"
app:srcCompat="@drawable/done"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Nous somme à la fin de ce tutoriel sur le widget FloatingActionButton.J’espère que ce tutoriel vous aidera à utiliser le widget FloatingActionButton.
Noe Joel Vigan, auteur de ce blog, est passionné par la programmation Android. Il a créé ce blog pour partager ses connaissances sur le développement d’application android. Il est Développeur Android Fullstack, ce qui lui permet de complètement mettre en place le Backend de ses applications sur Google Cloud à défaut d’utiliser FireBase.