FloatingActionButton Beispiel mit Support Library

Fügen Sie also in Ihrer build.gradle - Datei Folgendes hinzu:

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

AndroidX Hinweis: Google führt neue AndroidX-Erweiterungsbibliotheken ein, um die älteren Support-Bibliotheken zu ersetzen. Stellen Sie zur Verwendung von AndroidX zunächst sicher, dass Sie haben Ihre gradle.properties - Datei aktualisiert , build.gradle Bearbeitet und compileSdkVersion auf 28 Gesetzt haben ( oder höher), und verwenden Sie die folgende Zeile anstelle der vorherigen compile.

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

Stellen Sie als Nächstes in Ihrem themes.xml Oder styles.xml Oder was auch immer sicher, dass Sie dies einstellen - es ist die Akzentfarbe Ihrer App - und die Farbe Ihres FAB, es sei denn, Sie überschreiben es (siehe unten):

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

In der XML des Layouts:

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

Wenn Sie die oben genannte AndroidX-Materialbibliothek verwenden, verwenden Sie stattdessen Folgendes:

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

Weitere Optionen finden Sie in docs(wichtige Dokumente hier) (setRippleColor, usw.). Beachten Sie jedoch Folgendes:

    app:fabSize="mini"

Ein weiteres interessantes Beispiel: Um die Hintergrundfarbe von nur einem FAB zu ändern, fügen Sie Folgendes hinzu:

    app:backgroundTint="#FF0000"

(zum Beispiel, um es in rot zu ändern) in das obige XML.

Wie auch immer, im Code, nachdem die Ansicht der Aktivität/des Fragments aufgeblasen wurde ....

    FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
    myFab.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            doMyThing();
        }
    });

Beobachtungen:

• Wenn Sie eine dieser Schaltflächen auf einer "Naht" haben, die zwei Ansichten aufteilt (z. B. mit einem RelativeLayout), mit einem negativen unteren Layoutrand zum Überlappen des Rahmens, werden Sie ein Problem bemerken: Die Größe des FAB ist tatsächlich sehr anders auf Lollipop vs. Pre-Lollipop. Sie können dies tatsächlich im visuellen Layout-Editor von AS sehen, wenn Sie zwischen den APIs wechseln - es "bläht" plötzlich auf, wenn Sie zu Pre-Lollipop wechseln. Der Grund für die zusätzliche Größe scheint darin zu liegen, dass der Schatten die Größe der Ansicht in alle Richtungen vergrößert. Sie müssen dies berücksichtigen, wenn Sie die Ränder des FAB anpassen, wenn es in der Nähe von anderen Dingen ist.

• Hier ist eine Möglichkeit, die Polsterung zu entfernen oder zu ändern, wenn zu viel vorhanden ist:

  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);
  }
  

• Außerdem wollte ich das FAB programmgesteuert auf der "Naht" zwischen zwei Bereichen in einem RelativeLayout platzieren, indem ich die Höhe des FAB ergriff, durch zwei teilte und diese als Randversatz verwendete. Aber myFab.getHeight () gab Null zurück, auch nachdem die Ansicht aufgeblasen war. Stattdessen habe ich einen ViewTreeObserver verwendet, um die Höhe erst nach dem Layout zu ermitteln und dann die Position festzulegen. Siehe diesen Tipp hier . Es sah so aus:

      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);
              }
          });
      }
  

  Ich bin nicht sicher, ob dies der richtige Weg ist, aber es scheint zu funktionieren.

• Es scheint, dass Sie den Schattenraum der Schaltfläche verkleinern können, indem Sie die Höhe verringern.

• Wenn Sie den FAB auf einer "Naht" haben möchten, können Sie layout_anchor Und layout_anchorGravity Verwenden. Hier ein Beispiel:

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

Denken Sie daran, dass Sie die Schaltfläche automatisch aus dem Weg springen lassen können, wenn eine Snackbar angezeigt wird, indem Sie sie in ein CoordinatorLayout einwickeln.

Mehr:

• Google Design Support Library-Seite
• die FloatingActionButton-Dokumentation
• "Material Now" -Rede von Google I/O 2015 - Einführung der Support Design Library um 17:22 Uhr
• Beispiel/Schaufenster der Design Support Library