Sombra de vista de Android


102

Busqué alrededor y no pude encontrar una manera adecuada de hacer esto. Quiero tener los siguientes efectos de sombra en mis vistas: ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Para ser honesto, no sé si este segundo se hace aplicando efecto de sombra. ¿Algunas ideas?


1
¿Te refieres a esto? stackoverflow.com/questions/4406524/… (marque la respuesta con el voto más alto, no la respuesta marcada)
Luke Vo

1
@DatVM, gracias, esto parece funcionar, pero estaba pensando que tal vez haya herramientas integradas en el SDK de Android. Por ejemplo, agregar sombras para diseños lineales simplemente agregando algunas líneas de código: P
longwalker

Pregunta similar - stackoverflow.com/q/52954743/9640177 - agregando sombra al vector
dibujable

Respuestas:


158

Sé que esta pregunta ya ha sido contestada pero quiero que sepas que me encontré con un drawablesobre Android Studioque es muy similar a las fotografías que tiene en la pregunta: Tome un vistazo a esto:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

Se parece a esto:

ingrese la descripción de la imagen aquí

Espero que sea de ayuda

Editar

La opción anterior es para las versiones anteriores de, Android Studiopor lo que es posible que no la encuentre. Para versiones más nuevas:

android:background="@android:drawable/dialog_holo_light_frame"

Además, si quieres tener tu propia forma personalizada, te sugiero que utilices un software de dibujo como Photoshopy lo dibujes.

ingrese la descripción de la imagen aquí

No se olvide de guardarlo como .9.pngarchivo (ejemplo: my_background.9.png)

Leer la documentación: Draw 9-patch

Editar 2

Una solución aún mejor y menos laboriosa es usar un CardViewy un conjunto app:cardPreventCornerOverlap="false"para evitar que las vistas se superpongan a los bordes:

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="2dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="0dp">

    <!-- your layout stuff here -->

</android.support.v7.widget.CardView>

También asegúrese de haber incluido la última versión en la versión build.gradleactual.

compile 'com.android.support:cardview-v7:26.0.0'

Gracias, de hecho, se ve muy similar. También encontré "diseño de tarjetas de Google" para Android, ¡y son geniales!
longwalker

6
Increíble. Solo un FYI para futuros espectadores, esto está en /<sdk-path>/extras/android/support.
theblang

2
¿Qué hay de usar uncardView
Alex Chengalan

100

Estoy usando Android Studio 0.8.6 y no pude encontrar:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

así que encontré esto en su lugar:

android:background="@android:drawable/dialog_holo_light_frame"

y se ve así:

ingrese la descripción de la imagen aquí


1
¡¿Pero no podemos agregar un radio de esquina con él ?!
Fay007

40

poner un fondo de @android:drawable/dialog_holo_light_frame, da sombra, pero no puede cambiar el color de fondo ni el estilo del borde, por lo que es mejor beneficiarse de la sombra, mientras aún puede poner un fondo a través de la lista de capas

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the shadow comes from here-->
    <item
        android:bottom="0dp"
        android:drawable="@android:drawable/dialog_holo_light_frame"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">

    </item>

    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <!--whatever you want in the background, here i preferred solid white -->
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />

        </shape>
    </item>
</layer-list>

guárdelo en la carpeta dibujable debajo de decir shadow.xml

para asignarlo a una vista, en el archivo de diseño xml configure el fondo de la misma

android:background="@drawable/shadow"

¿Comprobaste si funciona? El segundo <item> no hace nada. No puedo cambiarlo a esquinas transparentes o redondeadas.
zeeshan

2
Entre todo lo que he probado, esto es lo único que funciona, gracias.
Shyam Sunder

1
fantástica solución
user1974368

34

Cree card_background.xml en la carpeta res / drawable con el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <shape android:shape="rectangle">
        <solid android:color="#BDBDBD"/>
        <corners android:radius="5dp"/>
    </shape>
</item>

<item
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

Luego agregue el siguiente código al elemento al que desea el diseño de la tarjeta

android:background="@drawable/card_background"

la siguiente línea define el color de la sombra de la tarjeta

<solid android:color="#BDBDBD"/>

10
Esto no es realmente una sombra, porque no se desvanece. Es más como un borde en dos de los lados.
ban-geoengineering

no es una sombra
ShadeToD

24

CardView le brinda una verdadera sombra en Android 5+ y tiene una biblioteca de soporte. Simplemente envuelva su vista con él y listo.

<android.support.v7.widget.CardView>
     <MyLayout>
</android.support.v7.widget.CardView>

Requiere la siguiente dependencia.

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
}

1
Esta es la única respuesta correcta, ya que solo CardViewtambién tiene diferentes niveles de sombra para diferentes elevaciones en modo compat.
Jarett Millard

Recomiendo MaterialCardView porque es más claro y tiene más capacidades.
H. Farid


12

Esto puede ser tarde, pero para aquellos que todavía están buscando una respuesta, encontré un proyecto en git hub y este es el único que realmente se ajusta a mis necesidades. android-materialhadowninepatch

Simplemente agregue esta línea en su dependencia build.gradle

compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'

salud. aprobado por el creador! happycodings


Hola @ralphgabb, ¿esto todavía funciona bien para ti o tienes una mejor solución para dispositivos pre-piruletas?
Swapnil

@Swapnil no estoy seguro de si AndroidX es compatible con esto. Sin embargo, ya no soy compatible con dispositivos anteriores a Marshmallow.
ralphgabb

5

Sé que esto es estúpidamente hacky,
pero si quieres apoyar bajo v21, aquí están mis logros.

rectangle_with_10dp_radius_white_bg_and_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Shadow layers -->
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_1" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_2" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_3" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_4" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_5" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_6" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_7" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_8" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_9" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_10" />
        </shape>
    </item>

    <!-- Background layer -->
    <item>
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>

</layer-list>

rectangle_with_10dp_radius_white_bg_and_shadow.xml (v21)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <corners android:radius="10dp" />
</shape>

view_incoming.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/rectangle_with_10dp_radius_white_bg_and_shadow"
    android:elevation="7dp"
    android:gravity="center"
    android:minWidth="240dp"
    android:minHeight="240dp"
    android:orientation="horizontal"
    android:padding="16dp"
    tools:targetApi="lollipop">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Hello World !" />

</LinearLayout>

Aquí está el resultado:

Bajo v21 (esto es lo que hizo con xml) ingrese la descripción de la imagen aquí

Por encima de v21 (renderizado de elevación real) ingrese la descripción de la imagen aquí

  • La única diferencia significativa es que ocupará el espacio interior de la vista, por lo que su área de contenido real puede ser más pequeña que > = dispositivos de paleta .

3

Si necesita que las sombras se apliquen correctamente, debe hacer lo siguiente.

Considere esta vista, definida con un diseño de fondo:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

El dibujable de fondo se define como un rectángulo con esquinas redondeadas:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

Esta es la forma recomendada de aplicar sombras, mira esto https://developer.android.com/training/material/shadows-clipping.html#Shadows


2

Utilice la propiedad de elevación para el efecto de sombra:

<YourView
    ...
    android:elevation="3dp"/>

El uso de Elevation requiere que el dispositivo ejecute Lollipop.
Shane Rowatt

2

Cree un diseño de fondo como este para mostrar la sombra redondeada.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#00CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#10CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#20d5d5d5" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="6dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#30cbcbcb" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#50bababa" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="@color/gray_100" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

Agregue una descripción también para el código que ha proporcionado.
Mangaldeep Pannu

Muy buena solución xml única
Bruno Bieri

2

Esta pregunta puede ser antigua, pero para cualquiera en el futuro que quiera una forma simple de lograr efectos de sombra complejos, consulte mi biblioteca aquí https://github.com/BluRe-CN/ComplexView

Con la biblioteca, puede cambiar los colores de las sombras, ajustar los bordes y mucho más. Aquí tienes un ejemplo para lograr lo que buscas.

<com.blure.complexview.ComplexView
        android:layout_width="400dp"
        android:layout_height="600dp"
        app:radius="10dp"
        app:shadow="true"
        app:shadowSpread="2">

        <com.blure.complexview.ComplexView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:color="#fdfcfc"
            app:radius="10dp" />
    </com.blure.complexview.ComplexView>

Para cambiar el color de la sombra, use app: shadowColor = "su código de color".


1

usa esta forma como fondo:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:drawable/dialog_holo_light_frame"/>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="1dp" />
            <solid android:color="@color/gray_200" />
        </shape>
    </item>

</layer-list>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.