Android "elevación" no muestra una sombra
Tengo una vista de lista, y con cada elemento de la lista quiero que muestre una sombra debajo de ella. Estoy usando la nueva función de elevación de Android Lollipop para establecer una Z en la vista que quiero proyectar una sombra, y ya estoy haciendo esto de manera efectiva con la barra de acción (técnicamente una barra de herramientas en Lollipop). Estoy usando la elevación de Lollipop, pero por alguna razón no está mostrando una sombra debajo de los elementos de la lista. Así es como se configura el diseño de cada elemento de la lista:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
style="@style/block"
android:gravity="center"
android:layout_gravity="center"
android:background="@color/lightgray"
>
<RelativeLayout
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:elevation="30dp"
>
<ImageView
android:id="@+id/documentImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/alphared"
android:layout_alignParentBottom="true" >
<appuccino.simplyscan.Extra.CustomTextView
android:id="@+id/documentName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/white"
app:typeface="light"
android:paddingLeft="16dp"
android:paddingTop="8dp"
android:paddingBottom="4dp"
android:singleLine="true"
android:text="New Document"
android:textSize="27sp"/>
<appuccino.simplyscan.Extra.CustomTextView
android:id="@+id/documentPageCount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/white"
app:typeface="italic"
android:paddingLeft="16dp"
android:layout_marginBottom="16dp"
android:text="1 page"
android:textSize="20sp"/>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
Sin embargo, así es como muestra la lista artículo, sin sombra:
También he intentado lo siguiente en vano:
- Establezca la elevación en ImageView y TextViews en lugar del diseño principal.
- Aplicó un fondo a ImageView.
- TranslationZ usado en lugar de Elevación.
16 answers
He estado jugando con sombras en Lollipop durante un tiempo y esto es lo que he encontrado:
- Parece que los límites de un padre
ViewGroup
cortan la sombra de sus hijos por alguna razón; y{[14]]} - las sombras establecidas con
android:elevation
se cortan por los límites deView
, no los límites extendidos a través del margen; - la forma correcta de obtener una vista hija para mostrar sombra es establecer relleno en el padre y establecer
android:clipToPadding="false"
en ese padre.
Aquí está mi sugerencia para usted basado en lo que sé:
- Establezca su nivel superior
RelativeLayout
para que tenga un relleno igual a los márgenes que ha establecido en el diseño relativo que desea mostrar sombra; - establecer
android:clipToPadding="false"
en el mismoRelativeLayout
; - Eliminar el margen de la
RelativeLayout
que también tiene conjunto de elevación; - [EDITAR] también es posible que necesite establecer un color de fondo no transparente en el diseño hijo que necesita elevación.
Al final del día, su diseño relativo de nivel superior debería verse como esto:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="@style/block"
android:gravity="center"
android:layout_gravity="center"
android:background="@color/lightgray"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:clipToPadding="false"
>
El diseño relativo interior debería tener este aspecto:
<RelativeLayout
android:layout_width="300dp"
android:layout_height="300dp"
android:background="[some non-transparent color]"
android:elevation="30dp"
>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-08 10:28:49
Si tienes una vista sin fondo esta línea te ayudará
android:outlineProvider="bounds"
De forma predeterminada, la sombra está determinada por el fondo de la vista, por lo que si no hay fondo, tampoco habrá sombra.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-24 10:53:45
Aparentemente, no se puede simplemente establecer una elevación en una Vista y hacer que aparezca. También es necesario especificar un fondo.
Las siguientes líneas agregadas a mi LinearLayout finalmente mostraron una sombra:
android:background="@android:color/white"
android:elevation="10dp"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-10 19:07:04
Otra cosa que debes tener en cuenta, las sombras no se mostrarán si tienes esta línea en el manifiesto:
android:hardwareAccelerated="false"
Probé todas las cosas sugeridas, pero solo funcionó para mí cuando eliminé la línea, la razón por la que tenía la línea fue porque mi aplicación funciona con una serie de imágenes de mapa de bits y estaban causando que la aplicación se bloqueara.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-30 13:04:10
Si está agregando elevación a un elemento de botón, debe agregar la siguiente línea:
android:stateListAnimator="@null"
Ver Android 5.0 android: la elevación funciona para la vista,pero no para el botón?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-19 17:22:57
Ugh, acabo de pasar una hora tratando de resolver esto. En mi caso tenía un fondo establecido, sin embargo, se estableció en un color. Esto no es suficiente, necesita tener el fondo de la vista establecido en un elemento de diseño.
E. g. Esto no tendrá sombra:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="165dp"
android:background="@color/ight_grey"
android:elevation="20dp"
android:orientation="vertical"
/>
Pero esto será
<LinearLayout
android:layout_width="match_parent"
android:layout_height="165dp"
android:background="@drawable/selector_grey"
android:elevation="20dp"
android:orientation="vertical"
/>
EDITAR: También han descubierto que si usa un selector como fondo, si no tiene la esquina configurada, la sombra no se mostrará en la ventana de vista previa pero se mostrará en el dispositivo
Por ejemplo, esto no tiene una sombra en vista previa:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/white" />
<stroke
android:width="1dp"
android:color="@color/grey"/>
</shape>
</item>
</selector>
Pero esto sí:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/white" />
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="@color/grey"/>
</shape>
</item>
</selector>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-21 15:06:01
Agregar color de fondo me ayudó.
<CalendarView
android:layout_width="match_parent"
android:id="@+id/calendarView"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_height="wrap_content"
android:elevation="5dp"
android:background="@color/windowBackground"
/>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-22 15:07:00
Si tienes una vista sin fondo esta línea te ayudará
android:outlineProvider="bounds"
Si tienes una vista con fondo esta línea te ayudará
android:outlineProvider="paddedBounds"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-11 12:34:41
Si desea tener un fondo transparente y android:outlineProvider="bounds"
no funciona para usted, puede crear ViewOutlineProvider personalizado:
class TransparentOutlineProvider extends ViewOutlineProvider {
@Override
public void getOutline(View view, Outline outline) {
ViewOutlineProvider.BACKGROUND.getOutline(view, outline);
Drawable background = view.getBackground();
float outlineAlpha = background == null ? 0f : background.getAlpha()/255f;
outline.setAlpha(outlineAlpha);
}
}
Y establezca este proveedor en su vista transparente:
transparentView.setOutlineProvider(new TransparentOutlineProvider());
Fuentes: https://code.google.com/p/android/issues/detail?id=78248#c13
[5] [EDITAR]] Documentación de Drawable.getAlpha () dice que es específico de cómo el elemento de diseño amenaza el alfa. Es posible que siempre devuelva 255. En este caso se puede proporcionar el alfa manualmente:class TransparentOutlineProvider extends ViewOutlineProvider {
private float mAlpha;
public TransparentOutlineProvider(float alpha) {
mAlpha = alpha;
}
@Override
public void getOutline(View view, Outline outline) {
ViewOutlineProvider.BACKGROUND.getOutline(view, outline);
outline.setAlpha(mAlpha);
}
}
Si su fondo de vista es un StateListDrawable con el color predeterminado # DDFF0000 que es con alpha DDx0 / FFx0 = = 0.86
transparentView.setOutlineProvider(new TransparentOutlineProvider(0.86f));
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-12 09:07:13
A veces como background= "@color/* "o background =" # ff33 " no funciona, reemplazo background_color con drawable, entonces funciona
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-03 10:10:32
Dar un poco de color de fondo al diseño funcionó para mí como:
android:background="@color/catskill_white"
android:layout_height="?attr/actionBarSize"
android:elevation="@dimen/dimen_5dp"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-16 08:40:56
Añadiendo a la respuesta aceptada, hay una razón más debido a la cual la elevación puede no funcionar como se esperaba.
Si la función de filtro Bluelight en el teléfono está ACTIVADA
Me enfrentaba a este problema cuando la elevación parecía completamente distorsionada e insoportable en mi dispositivo. Pero la elevación estaba bien en la vista previa. Desactivar el filtro Bluelight en el teléfono resolvió el problema.
Así que incluso después de configurar
android:outlineProvider="bounds"
La elevación no funciona correctamente, a continuación, puede tratar de jugar con la configuración de color del teléfono.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-29 09:19:02
Creo que su problema se debe al hecho de que ha aplicado el elemento elevation a un diseño relativo que llena su padre. Su padre recorta todas las vistas secundarias dentro de su propio lienzo de dibujo (y es la vista que maneja la sombra del hijo). Puede solucionar esto aplicando una propiedad elevation al RelativeLayout
más alto de su xml de vista (la etiqueta raíz).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-29 18:27:35
En mi caso las fuentes eran el problema.
1) Sin fontFamily
Necesitaba establecer android:background
a algún valor.
<TextView
android:layout_width="match_parent"
android:layout_height="44dp"
android:background="@android:color/white"
android:elevation="3dp"
android:gravity="center"
android:text="@string/fr_etalons_your_tickets"
android:textAllCaps="true"
android:textColor="@color/blue_4" />
2) con fontFamily
tuve que añadir android:outlineProvider="bounds"
ajuste:
<TextView
android:fontFamily="@font/gilroy_bold"
android:layout_width="match_parent"
android:layout_height="44dp"
android:background="@android:color/white"
android:elevation="3dp"
android:gravity="center"
android:outlineProvider="bounds"
android:text="@string/fr_etalons_your_tickets"
android:textAllCaps="true"
android:textColor="@color/blue_4" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-17 09:21:32
Tuve suerte al configurar clipChildren="false"
en el diseño padre.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-03 09:30:57
Pasé algún tiempo trabajando en él y finalmente me di cuenta de que cuando el fondo es oscuro, la sombra no es visible
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-10-03 13:30:14