Fügen Sie in Ihrer build.gradleDatei 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. Um AndroidX zu verwenden, stellen Sie zunächst sicher , haben Sie Ihre aktualisierte gradle.propertiesDatei , bearbeitet , build.gradleum Satz compileSdkVersionzu 28(oder höher), und verwenden Sie die folgende Zeile anstelle der bisherigen compileein.
implementation 'com.google.android.material:material:1.0.0'
Stellen Sie als Nächstes in Ihrem themes.xmloder einem anderen styles.xmlElement sicher, dass Sie dies festlegen - es ist die Akzentfarbe Ihrer App - und die Farbe Ihres FAB, sofern Sie diese nicht überschreiben (siehe unten):
<item name="colorAccent">@color/floating_action_button_color</item>
Im 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 den Dokumenten (Materialdokumente hier) ( setRippleColorusw.), aber eine der Anmerkungen ist:
app:fabSize="mini"
Ein weiteres interessantes: 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 in einer "Naht" haben, die zwei Ansichten (z. B. mithilfe eines RelativeLayout) mit beispielsweise einem negativen unteren Layoutrand teilt, um den Rand zu überlappen, werden Sie ein Problem feststellen: Die Größe des FAB ist tatsächlich ganz anders auf Lutscher gegen Pre-Lutscher. Sie können dies tatsächlich im visuellen Layout-Editor von AS sehen, wenn Sie zwischen APIs wechseln - es "bläht plötzlich auf", wenn Sie zu Pre-Lollipop wechseln. Der Grund für die zusätzliche Größe scheint zu sein, dass der Schatten die Größe der Ansicht in alle Richtungen erweitert. Sie müssen dies also berücksichtigen, wenn Sie die Ränder des FAB anpassen, wenn es in der Nähe anderer Dinge liegt.
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, selbst nachdem die Ansicht aufgeblasen war, wie es schien. Stattdessen habe ich einen ViewTreeObserver verwendet, um die Höhe erst nach dem Anlegen 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 mir 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 die FAB auf einer „Naht“ möchten , können Sie verwenden , layout_anchorund layout_anchorGravityhier ist 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 einbinden .
Mehr:
