Entonces, en su build.gradle
archivo, agregue esto:
compile 'com.android.support:design:27.1.1'
Nota de AndroidX: Google está introduciendo nuevas bibliotecas de extensiones de AndroidX para reemplazar las bibliotecas de soporte más antiguas. Para utilizar AndroidX, primero asegúrese de que ha actualizado su gradle.properties
archivo , editado build.gradle
al conjunto compileSdkVersion
de 28
(o superior), y utilice la siguiente línea en lugar del anterior compile
uno.
implementation 'com.google.android.material:material:1.0.0'
A continuación, en su themes.xml
o styles.xml
lo que sea, asegúrese de configurar esto, es el color de acento de su aplicación, y el color de su FAB a menos que lo anule (ver a continuación):
<item name="colorAccent">@color/floating_action_button_color</item>
En el XML del diseño:
<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 si está utilizando la biblioteca de materiales de AndroidX anterior, en su lugar usaría esto:
<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>
Puede ver más opciones en los documentos ( documentos de material aquí) ( setRippleColor
, etc.), pero uno de nota es:
app:fabSize="mini"
Otro interesante: para cambiar el color de fondo de un solo FAB, agregue:
app:backgroundTint="#FF0000"
(por ejemplo, para cambiarlo a rojo) al XML anterior.
De todos modos, en código, después de que la vista de Actividad / Fragmento se infla ...
FloatingActionButton myFab = (FloatingActionButton) myView.findViewById(R.id.myFAB);
myFab.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
doMyThing();
}
});
Observaciones:
- Si tiene uno de esos botones que está en una "costura" que divide dos vistas (usando un diseño relativo, por ejemplo) con, por ejemplo, un margen de diseño inferior negativo para superponer el borde, notará un problema: el tamaño de la FAB es en realidad muy diferente en lollipop vs. pre-lollipop. De hecho, puede ver esto en el editor de diseño visual de AS cuando cambia de una API a otra; de repente, se "hincha" cuando cambia a pre-lollipop. La razón del tamaño extra parece ser que la sombra expande el tamaño de la vista en todas las direcciones. Por lo tanto, debe tener esto en cuenta cuando ajuste los márgenes de la FAB si está cerca de otras cosas.
Aquí hay una manera de eliminar o cambiar el relleno si hay demasiado:
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);
}
Además, iba a colocar programáticamente la FAB en la "costura" entre dos áreas en un diseño relativo tomando la altura de la FAB, dividiéndola entre dos y utilizándola como compensación de margen. Pero myFab.getHeight () devolvió cero, incluso después de que la vista se infló, al parecer. En su lugar, utilicé un ViewTreeObserver para obtener la altura solo después de que se presentó y luego establecer la posición. Vea este consejo
aquí . Se veía así:
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);
}
});
}
No estoy seguro si esta es la forma correcta de hacerlo, pero parece funcionar.
- Parece que puede reducir el espacio de sombra del botón disminuyendo la elevación.
Si desea el FAB en una "costura" puede usar layout_anchor
y layout_anchorGravity
aquí hay un ejemplo:
<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"/>
Recuerde que puede hacer que el botón salte del camino automáticamente cuando aparezca un Snackbar envolviéndolo en un CoordinatorLayout .
Más: