FloatingActionButton exemple avec le Soutien de la Bibliothèque

Dans votre build.gradle fichier, ajouter ceci:

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

AndroidX Remarque: Google est l'introduction de nouvelles AndroidX les bibliothèques d'extension de remplacer les anciennes Bibliothèques de prise en charge. Pour utiliser AndroidX, assurez-vous d'abord vous avez mis à jour votre gradle.propriétés fichier, édité build.gradle pour définir compileSdkVersion à 28 (ou supérieur), et d'utiliser la ligne suivante à la place de la précédente compile un.

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

Prochaine, dans votre themes.xml ou styles.xml ou que ce soit, assurez-vous de régler ce problème - votre application accent de couleur-- et la couleur de votre FAB sauf si vous la remplacez (voir ci-dessous):

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

Dans la mise en page XML:

<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 la docs (setRippleColor, etc.), mais une remarque:

    app:fabSize="mini"

Un autre fait intéressant-pour changer la couleur de fond, juste un FAB, ajouter:

    app:backgroundTint="#FF0000"

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

De toute façon, dans le code, après l'Activité ou du Fragment de la vue est gonflé....

    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 que sur une "couture" divisé deux points de vue
  (à l'aide d'un RelativeLayout, par exemple), avec, disons, un négatif en bas
  mise en page de la marge de chevauchement de la frontière, vous remarquerez qu'une question:
  le FAB taille est en fait très différents sur lollipop vs
  pré-sucette. Vous pouvez voir QUE cela visuelle de la mise en page de l'éditeur
  lorsque vous retournez l'entre Api-- tout à coup, la "bouffe" lorsque 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 FAB de la marge si elle est à proximité d'autres
  des trucs.

• Ici un moyen de supprimer ou de
  changer le rembourrage s'il y 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 par programme place la FAB sur la "couture"
  entre les deux régions dans un RelativeLayout en le saisissant par le FAB en hauteur,
  en divisant par deux, et en utilisant ce que l'offset de la marge. Mais
  myFab.getHeight() a renvoyé à zéro, même après le point de vue a été gonflé, il
  semblait. Au lieu de cela, j'ai utilisé un ViewTreeObserver pour obtenir la hauteur seulement
  après avoir disposé et ensuite de définir 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);
              }
          });
      }

  Ne sais pas si c'est la bonne façon de le faire, mais il semble fonctionner.

• Il semble que vous pouvez faire de l'ombre-l'espace de la touche inférieure de
  la diminution de l'altitude.

• Si vous voulez que le FAB sur "couture", vous pouvez utiliser 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"/>

N'oubliez pas que vous pouvez automatiquement le bouton de sauter hors de la voie lorsque un Buvette vient en l'enveloppant dans un CoordinatorLayout.

Plus:

• Google aide à la Conception de la Bibliothèque de la Page
• le FloatingActionButton docs
• "Maintenant" parler de Google I/O 2015 De soutien de la Bibliothèque de Conception présenté à 17m22s
• Aide à la conception de la Bibliothèque de l'échantillon/vitrine

FloatingActionButton s'étend ImageView. Donc, c'est simple comme l'introduction d'un ImageView dans votre mise en page. Voici un exemple XML.

<android.support.design.widget.FloatingActionButton   xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/somedrawable"
    android:layout_gravity="right|bottom"
    app:borderWidth="0dp"
    app:rippleColor="#ffffff"/>

app:borderWidth="0dp" est ajoutée à une solution de contournement pour l'élévation des questions.