Quindi nel tuo build.gradle
file, aggiungi questo:
compile 'com.android.support:design:27.1.1'
Nota AndroidX: Google sta introducendo nuove librerie di estensioni AndroidX per sostituire le librerie di supporto precedenti. Per usare AndroidX, assicurati innanzitutto di aver aggiornato il tuo gradle.properties
file , modificato build.gradle
per impostarlo compileSdkVersion
su 28
(o superiore) e usa la seguente riga invece di quella precedente compile
.
implementation 'com.google.android.material:material:1.0.0'
Successivamente, nel tuo themes.xml
o styles.xml
qualsiasi altra cosa, assicurati di impostare questo - è il colore dell'accento della tua app - e il colore del tuo FAB a meno che tu non lo ignori (vedi sotto):
<item name="colorAccent">@color/floating_action_button_color</item>
Nell'XML del 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>
O se stai usando la libreria di materiali AndroidX sopra, dovresti invece usare questo:
<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>
Puoi vedere più opzioni nei documenti ( documenti materiali qui) ( setRippleColor
, ecc.), Ma uno di nota è:
app:fabSize="mini"
Un altro interessante-- per cambiare il colore di sfondo di un solo FAB, aggiungi:
app:backgroundTint="#FF0000"
(ad esempio per cambiarlo in rosso) nell'XML sopra.
Ad ogni modo, nel codice, dopo che la vista Attività / Frammento è gonfiata ...
FloatingActionButton myFab = (FloatingActionButton) myView.findViewById(R.id.myFAB);
myFab.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
doMyThing();
}
});
osservazioni:
- Se hai uno di quei pulsanti su una "cucitura" che divide due viste (usando un RelativeLayout, per esempio) con, diciamo, un margine di layout inferiore negativo per sovrapporre il bordo, noterai un problema: la dimensione del FAB è in realtà molto diverso su lecca-lecca rispetto a pre-lecca-lecca. Puoi effettivamente vederlo nell'editor del layout visivo di AS quando passi da una API all'altra, improvvisamente si gonfia quando passi al pre-lecca-lecca. Il motivo della dimensione aggiuntiva sembra essere che l'ombra espande la dimensione della vista in ogni direzione. Quindi devi tener conto di questo quando modifichi i margini del FAB se è vicino ad altre cose.
Ecco un modo per rimuovere o modificare il riempimento se c'è troppo:
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);
}
Inoltre, avrei programmato di posizionare il FAB sulla "giuntura" tra due aree in un RelayLayout afferrando l'altezza del FAB, dividendolo per due e usandolo come offset del margine. Ma myFab.getHeight () ha restituito zero, anche dopo che la vista è stata gonfiata, sembrava. Invece ho usato un ViewTreeObserver per ottenere l'altezza solo dopo che è stato disposto e quindi impostare la posizione. Vedi questo consiglio
qui . Sembrava così:
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);
}
});
}
Non sono sicuro se questo è il modo giusto per farlo, ma sembra funzionare.
- Sembra che puoi ridurre lo spazio ombra del pulsante diminuendo l'elevazione.
Se vuoi il FAB su una "cucitura" puoi usare layout_anchor
ed layout_anchorGravity
ecco un esempio:
<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"/>
Ricorda che puoi far saltare automaticamente il pulsante quando si presenta una Snackbar avvolgendola in un CoordinatorLayout .
Di Più: