sombras - ¿Cómo agregar sombra a la FAB proporcionada con la biblioteca de diseño de soporte de Android?
sombra en photoshop cc (6)
En caso de que ayude, estaba usando
android:tint="@color/myColor"
en vez de
android:backgroundTint="@color/myColor".
Reemplazar tinte por backgroundTint trajo de vuelta la sombra.
El título es bastante autoexplicativo.
El siguiente código no representa la sombra debajo del botón de acción flotante. ¿Qué se puede hacer para representar la sombra? ¿Esta característica realmente no es compatible incluso en API 21+?
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/ic_add"
android:clickable="true" />
Nota: Agregar
android:elevation
no agrega sombra en API 21.
Captura de pantalla tomada del ejemplo por dandar3: https://github.com/dandar3/android-support-design
Estaba experimentando este mismo problema y conseguí que funcionara eliminando esta etiqueta de mi AndroidManifest.xml.
android:hardwareAccelerated="false"
Inicialmente lo agregué, junto con
android:largeHeap="true"
, porque pensé que lo necesitaba para un HeatMap en el que se mostraba una gran cantidad de puntos, pero luego me di cuenta de que podría funcionar solo con
android:largeHeap="true"
.
Para API 21+, debe configurar la
app:borderWidth="0dp"
y la
app:elevation="[number]dp"
.
Al establecer la elevación, le está dando el tamaño de sombra que desea:
Aquí hay un ejemplo de código para API 21+:
<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/locate_user_FAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/location_off"
app:elevation="6dp"
app:borderWidth="0dp"
android:layout_above="@+id/take_taxi_FAB"
app:backgroundTint="@color/colorAccentGrey">
Una cosa importante para recordar para las API siguientes a 21 (Android 4) es que, en términos de compatibilidad, FAB pondrá márgenes alrededor de su botón para dibujar la sombra. Entonces deberías hacer algo así (actualmente estoy usando este código y funciona):
<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/locate_user_FAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/location_off"
app:elevation="6dp"
app:borderWidth="0dp"
android:layout_above="@+id/take_taxi_FAB"
android:layout_alignParentRight="true"
android:layout_marginRight="@dimen/map_FAB_marginRight"
android:layout_marginBottom="@dimen/locate_user_FAB_marginBottom"
app:backgroundTint="@color/colorAccentGrey">
Prefiero poner
xmlns:app="http://schemas.android.com/apk/res-auto"
al comienzo del XML, pero lo puse allí solo para recordarles;]
Si esto todavía no funciona para algunos, hay una diferencia significativa entre:
app:elevation="6dp"
app:borderWidth="0dp"
y
app:borderWidth="0dp"
app:elevation="6dp"
El orden parece importar por alguna razón (el primer orden funciona, el segundo no) y esto es de la biblioteca de soporte 23.3.0
Simplemente configurando la
app:borderWidth="0dp"
resuelve estos problemas por mí.
Nota:
no olvide agregar
xmlns:app="http://schemas.android.com/apk/res-auto"
a su diseño raíz.
Este issue debería solucionarse en la próxima versión de la biblioteca de diseño de Android.
Verifique el manifiesto en el proyecto o las bibliotecas en la etiqueta Aplicación y elimínelos
android:hardwareAccelerated="false"
android:largeHeap="true"
Pero si necesita estas opciones, las sombras y las animaciones de transformación no funcionarán.