Donc, dans votre build.gradlefichier, ajoutez ceci:
compile 'com.android.support:design:27.1.1'
Remarque AndroidX: Google introduit de nouvelles bibliothèques d'extensions AndroidX pour remplacer les anciennes bibliothèques de support. Pour utiliser AndroidX, assurez- vous d'gradle.properties abord que vous avez mis à jour votre fichier , modifié build.gradlepour définir compileSdkVersionsur 28(ou supérieur), et utilisez la ligne suivante au lieu de la précédente compile.
implementation 'com.google.android.material:material:1.0.0'
Ensuite, dans votre themes.xmlou styles.xmlou autre, assurez-vous de définir ceci - c'est la couleur d'accentuation de votre application - et la couleur de votre FAB, sauf si vous la remplacez (voir ci-dessous):
<item name="colorAccent">@color/floating_action_button_color</item>
Dans le XML de la mise en page:
<RelativeLayout
...
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.FloatingActionButton
android:id="@+id/myFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_plus_sign"
app:elevation="4dp"
... />
</RelativeLayout>
Ou si vous utilisez la bibliothèque de matériaux AndroidX ci-dessus, vous utiliserez plutôt ceci:
<RelativeLayout
...
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/myFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:srcCompat="@drawable/ic_plus_sign"
app:elevation="4dp"
... />
</RelativeLayout>
Vous pouvez voir plus d'options dans les documents ( documents sur les matériaux ici) ( setRippleColor, etc.), mais l'une d'entre elles est:
app:fabSize="mini"
Un autre intéressant - pour changer la couleur d'arrière-plan d'un seul FAB, ajoutez:
app:backgroundTint="#FF0000"
(par exemple pour le changer en rouge) en XML ci-dessus.
Quoi qu'il en soit, dans le code, une fois que la vue de l'activité / du fragment est gonflée ...
FloatingActionButton myFab = (FloatingActionButton) myView.findViewById(R.id.myFAB);
myFab.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
doMyThing();
}
});
Observations:
- Si vous avez l'un de ces boutons sur une "couture" divisant deux vues (en utilisant un RelativeLayout, par exemple) avec, par exemple, une marge de mise en page inférieure négative pour chevaucher la bordure, vous remarquerez un problème: la taille du FAB est en fait très différent sur sucette vs pré-sucette. Vous pouvez en fait le voir dans l'éditeur de mise en page visuelle d'AS lorsque vous basculez entre les API - il "gonfle" soudainement lorsque vous passez à pré-sucette. La raison de la taille supplémentaire semble être que l'ombre agrandit la taille de la vue dans toutes les directions. Vous devez donc en tenir compte lorsque vous ajustez les marges du FAB si elles sont proches d'autres choses.
Voici un moyen de supprimer ou de modifier le rembourrage s'il y en a trop:
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams();
p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
myFab.setLayoutParams(p);
}
En outre, j'allais placer le FAB par programme sur la "couture" entre deux zones dans un RelativeLayout en saisissant la hauteur du FAB, en divisant par deux et en l'utilisant comme décalage de marge. Mais myFab.getHeight () a renvoyé zéro, même après que la vue ait été gonflée, semblait-il. Au lieu de cela, j'ai utilisé un ViewTreeObserver pour obtenir la hauteur uniquement après avoir été disposé, puis défini la position. Consultez cette astuce
ici . Cela ressemblait à ceci:
ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver();
if (viewTreeObserver.isAlive()) {
viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
// not sure the above is equivalent, but that's beside the point for this example...
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams();
params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom)
closeButton.setLayoutParams(params);
}
});
}
Je ne sais pas si c'est la bonne façon de le faire, mais cela semble fonctionner.
- Il semble que vous pouvez réduire l'espace d'ombre du bouton en diminuant l'élévation.
Si vous voulez le FAB sur une "couture", vous pouvez utiliser layout_anchoret layout_anchorGravityvoici un exemple:
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="@drawable/ic_discuss"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"/>
N'oubliez pas que vous pouvez automatiquement faire sauter le bouton du chemin lorsqu'un Snackbar apparaît en l'enveloppant dans un CoordinatorLayout .
Plus:
