FloatingActionButton exemple avec bibliothèque de soutien

donc dans votre fichier build.gradle , ajoutez ceci:

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

AndroidX Note: Google introduit une nouvelle androidx extension libraries pour remplacer les anciennes bibliothèques de soutien. Pour utiliser AndroidX, assurez-vous d'abord que vous avez mis à jour votre gradle.properties fichier , édité build.gradle pour mettre compileSdkVersion à 28 (ou plus haut), et utilisez la ligne suivante à la place de la précédente compile un.

implementation 'com.google.android.material:material:1.0.0-rc01'

ensuite, dans votre themes.xml ou styles.xml ou n'importe quoi d'autre, assurez-vous de régler ceci-c'est la couleur de l'accent de votre application-et la couleur de votre FAB à moins que vous ne l'outrepassiez (voir ci-dessous):

        <item name="colorAccent">@color/floating_action_button_color</item>

en XML de layout:

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

vous pouvez voir plus d'options dans le docs ( setRippleColor , etc.

    app:fabSize="mini"

un autre intéressant-- pour changer la couleur de fond d'un seul FAB, ajouter:

    app:backgroundTint="#FF0000"

(par exemple pour le changer en rouge) en XML ci-dessus.

de toute façon, en code, après que L'Activité/vue 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 un de ces boutons qui est sur une" couture " partage deux vues (en utilisant un affichage relatif, par exemple) avec, disons, un fond négatif marge de mise en page pour chevaucher la frontière, vous remarquerez un problème: la taille de la FAB est en fait très différent sur lollipop vs. pré-sucette. Vous pouvez le voir dans l'éditeur de mise en page visuelle de AS quand vous basculez entre les APIs ... ça fait soudainement "péter" quand vous passez à pré-sucette. La raison de la taille supplémentaire semble être que l' l'ombre s'étend de la taille de la vue dans toutes les directions. Donc, vous avez à compte de cela lorsque vous réglez la Les marges de FAB si elles sont proches des autres truc.

• voici un moyen de supprimer ou changez 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);
  }
  

• aussi, j'allais programmatiquement placer le FAB sur la "couture"" entre deux zones d'une hauteur relative en saisissant la hauteur du FAB, en divisant par deux, et en utilisant ça comme compensation de la marge. Mais myFab.getHeight () a retourné zéro, même après que la vue a été gonflée, il sembler. Au lieu de cela, j'ai utilisé un ViewTreeObserver pour obtenir la hauteur seulement une fois qu'il est posé, on fixe la position. Voir cette astuce ici . Il 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);
              }
          });
      }
  

  pas sûr que ce soit la bonne façon de le faire, mais il semble que cela fonctionne.

• il semble que vous pouvez rendre l'espace d'ombre du bouton plus petit par la diminution de l'altitude.

• si vous voulez le FAB sur une "couture" vous pouvez utilisez layout_anchor et layout_anchorGravity voici 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"/>
  

rappelez-vous que vous pouvez automatiquement faire sauter le bouton hors du chemin lorsqu'un Snackbar apparaît en l'enveloppant dans un CoordinatorLayout .

plus:

• de Google d'aide à la Conception de la Bibliothèque de la Page
• the FloatingActionButton docs
• "Maintenant" parler de Google I/O 2015 - aider à la Conception de la Bibliothèque introduit au 17m22s
• d'aide à la Conception de la Bibliothèque de l'échantillon/vitrine