Busqué alrededor y no pude encontrar una manera adecuada de hacer esto. Quiero tener los siguientes efectos de sombra en mis vistas:
Para ser honesto, no sé si este segundo se hace aplicando efecto de sombra. ¿Algunas ideas?
Busqué alrededor y no pude encontrar una manera adecuada de hacer esto. Quiero tener los siguientes efectos de sombra en mis vistas:
Para ser honesto, no sé si este segundo se hace aplicando efecto de sombra. ¿Algunas ideas?
Respuestas:
Sé que esta pregunta ya ha sido contestada pero quiero que sepas que me encontré con un drawable
sobre Android Studio
que 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:
Espero que sea de ayuda
Editar
La opción anterior es para las versiones anteriores de, Android Studio
por 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 Photoshop
y lo dibujes.
No se olvide de guardarlo como .9.png
archivo (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 CardView
y 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.gradle
actual.
compile 'com.android.support:cardview-v7:26.0.0'
/<sdk-path>/extras/android/support
.
cardView
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í:
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"
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"/>
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.+'
}
CardView
también tiene diferentes niveles de sombra para diferentes elevaciones en modo compat.
Utilice la propiedad de elevación para lograr un efecto de sombra:
<View ...
android:elevation="2dp"/>
Esto solo se debe usar después de la v21, consulte este enlace: http://developer.android.com/training/material/shadows-clipping.html
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
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)
Por encima de v21 (renderizado de elevación real)
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
Utilice la propiedad de elevación para el efecto de sombra:
<YourView
...
android:elevation="3dp"/>
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>
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".
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>