Saltar al contenido

¿Cómo agregar sombra sobre una vista en Android?

Solución:

Si necesita tener sombra solo en un lado de la vista (por ejemplo, en la parte superior), puede agregar otra Vista antes y usar una sombra degradada para su fondo.

Aquí está el archivo de degradado top_shadow_gradient.xml que tienes que almacenar en drawable carpeta:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#40000000" android:endColor="#30ffffff" android:angle="90"/>
</shape>

Y aquí hay un diseño de muestra de cómo usarlo:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:background="@drawable/top_shadow_gradient" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:orientation="vertical"
        android:paddingTop="8dp">

        <!-- Put your content here-->

    </LinearLayout>

</LinearLayout>

Importante: El diseño raíz debe ser transparente (android:background="@android:color/transparent") y su diseño de “contenido” debe tener un fondo blanco (android:background="#ffffff").

Y este es el resultado:
ingrese la descripción de la imagen aquí

Aquí hay algunas soluciones para este problema; elija la mejor:

  • En StackOverFlow, en la publicación del 22 de octubre de 2012, ¿Cómo mostrar sombras alrededor del diseño lineal en Android ?, leería:

No existe tal atributo en Android, para mostrar una sombra. Pero las posibles formas de hacerlo son:

  1. Agregue un LinearLayout simple con color gris, sobre el cual agregue su diseño real, con un margen en la parte inferior y derecha igual a 1 o 2 dp

  2. Tenga una imagen de 9 parches con una sombra y configúrela como fondo para su diseño lineal

y

También hay otra solución al problema mediante la implementación de una lista de capas que actuará como fondo para LinearLayoout.

Agregue el archivo background_with_shadow.xml a res/drawable. Que contiene:

<?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="@android:color/darker_gray" />
        <corners android:radius="5dp"/>
        </shape>
    </item>
    <item android:right="1dp" android:left="1dp" android:bottom="2dp">
        <shape 
            android:shape="rectangle">
        <solid android:color="@android:color/white"/>
        <corners android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

Luego agregue la lista de capas como fondo en su LinearLayout.

<LinearLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/background_with_shadow"/>

También puede leer: http://odedhb.blogspot.com/2013/05/android-layout-shadow-without-9-patch.html

  • Otra publicación de StackOverflow, ¿cómo configurar la sombra en una Vista en Android ?, le brinda otra solución (usando dos vistas que forman la sombra):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:padding="10dp"
    android:background="#CC55CC">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="0">
            <TableRow>
                <LinearLayout
                    android:id="@+id/content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <TextView  
                        android:layout_width="fill_parent" 
                        android:layout_height="wrap_content"
                        android:background="#FFFFFF" 
                        android:text="@string/hello" />
                </LinearLayout>
                <View
                    android:layout_width="5dp"
                    android:layout_height="fill_parent"
                    android:layout_marginTop="5dp"
                    android:background="#55000000"/>
            </TableRow>
        </TableLayout>
        <View
            android:layout_width="fill_parent"
            android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:background="#55000000"/>
    </LinearLayout>
</FrameLayout>
  • También puede utilizar recursos específicos de Android que se pueden dibujar para imitar el efecto de sombra. Mire: thttps: //stackoverflow.com/questions/21211870/android-view-shadow o simplemente lea una publicación a continuación:

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í:

![enter image description here][1]

[1]: http://i.stack.imgur.com/tId9L.jpg


Si está interesado en el efecto de diseño de materiales limpio, lea alguna documentación como la siguiente:

  • Vista previa del desarrollador de Android L: vistas y sombras
  • Definición de sombras y vistas de recorte

El truco que encontré para esto es envolver su vista en un padre y usar rotar. Por ejemplo, si tiene una vista de tarjeta y le está agregando elevación, puede colocar dos rotaciones como esta para lograr una sombra arriba en lugar de abajo:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:paddingBottom="10dp"
    android:rotation="180">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:rotation="180"
        app:cardElevation="8dp">
    <!--Card view content-->
    </android.support.v7.widget.CardView>
</RelativeLayout>

Esto da algo como la captura de pantalla adjunta.

ingrese la descripción de la imagen aquí

Todavía hay un problema con esto: esto requiere que paddingBottom se establezca en el diseño principal, lo que significa que será obvio que cualquier hermano desplazable por encima del diseño no irá debajo.

Entonces, incluso en la era actual de proveedores de contornos y elevaciones, es mejor agregar una vista translúcida en su lugar. 🙁

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *