programacion - manual de android en pdf

cómo establecer sombra a una vista en Android?

Question

Quiero saber cómo agregar una capa de sombra a cualquier vista general en Android. por ejemplo: supongamos que tengo un diseño xml, que muestra algo como esto ..

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
<Button....
...
</LinearLayout>

Ahora, cuando se muestra, quiero tener una sombra a su alrededor.

Answer 1

Aquí está mi versión cursi de la solución ... Esta es la modificación de la solución que se encuentra here

No me gustó cómo se ven las esquinas, así que las desdibujé ...

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Layer 0-->
<!--Layer 1-->
<!--Layer 2-->
<!--Layer 3-->
<!--Layer 4 (content background)-->
<!-- dropshadow -->
<item>
<shape>
<gradient
android:startColor="@color/white"
android:endColor="@color/white"
android:centerColor="#10CCCCCC"
android:angle="180"/>
<padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="@color/white"
android:endColor="@color/white"
android:centerColor="#20CCCCCC"
android:angle="180"/>
<padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="@color/white"
android:endColor="@color/white"
android:centerColor="#30CCCCCC"
android:angle="180"/>
<padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="@color/white"
android:endColor="@color/white"
android:centerColor="#40CCCCCC"
android:angle="180"/>
<padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="@color/white"
android:endColor="@color/white"
android:centerColor="#50CCCCCC"
android:angle="180"/>
<padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
</shape>
</item>
<!-- content background -->
<item>
<shape>
<solid android:color="@color/PostIt_yellow" />
</shape>
</item>

Answer 2

Asumiendo que utilizaría un diseño lineal (he considerado un diseño lineal vertical) ... y tendría una vista justo debajo de su diseño lineal. Ahora, para esta vista, proporcione un color inicial y un color final. También quería obtener esta cosa, es trabajando para mí ... Si necesita un efecto aún mejor, simplemente trabaje alrededor del color de inicio y fin.

activity_main

<?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:orientation="vertical" >
<LinearLayout
android:id="@+id/vertical"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="@drawable/layout_back_bgn"
android:orientation="vertical" >
</LinearLayout>
<View
android:layout_below="@+id/vertical"
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="@drawable/shadow"
>
</View>
</LinearLayout>

layout_back_bgn.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#FF4500" />
</shape>

shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="#4D4D4D"
android:endColor="#E6E6E6"
android:angle="270"
>
</gradient>
</shape>

Traté de publicar una imagen que tengo después de usar el código anterior, pero no me permite porque no tengo reputación ... Lamento eso.

Answer 3

Hay un truco simple, 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>

Espero que esto ayude.

Answer 4

La mejor manera de crear una sombra es usar una imagen de 9patch como fondo de la vista (o un ViewGroup que envuelve la vista).

El primer paso es crear una imagen png con una sombra a su alrededor. Usé Photoshop para crear una imagen de este tipo. Es realmente simple.

• Crea una nueva imagen con Photoshop.
• Agrega una capa y crea un cuadrado negro de 4x4.
• Cree una sombra en la capa seleccionando la capa en el explorador de capas y haciendo clic en un botón titulado fx y eligiendo sombra paralela.
• Exportar la imagen como png.

El siguiente paso es crear diseños de 9 parches a partir de esta imagen.

• Abra draw9patch desde android-sdk/tools
• Abra la imagen en draw9patch
• Crea 4 líneas negras en los cuatro lados del cuadrado como se shadow.9.png continuación y luego guarda la imagen como shadow.9.png .

Ahora puede agregar esta sombra como fondo de las vistas a las que desea agregar la sombra. Añada shadow.9.png a res/drawables . Ahora agrégalo como fondo:

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/shadow"
android:paddingBottom="5px"
android:paddingLeft="6px"
android:paddingRight="5px"
android:paddingTop="5px"
>

Hace poco escribí una publicación de blog que explica esto en detalle e incluye la imagen 9patch que uso para crear la sombra.

Answer 5

Puede usar la elevación, disponible desde el nivel 21 de la API

La elevación de una vista, representada por la propiedad Z, determina la apariencia visual de su sombra: las vistas con valores Z más altos proyectan sombras más grandes y más suaves. Las vistas con valores Z más altos ocluyen las vistas con valores Z más bajos; sin embargo, el valor Z de una vista no afecta el tamaño de la vista. Para establecer la elevación de una vista:

en una definición de diseño, use la

android:elevation

atributo. Para establecer la elevación de una vista en el código de una actividad, use la

View.setElevation()

método.

Source

Answer 6

</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/dropShadow" />

Úselo justo debajo del LinearLayout

Otro método

crear "rounded_corner_bg.xml" en la carpeta / drawable

<?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="@color/primaryColor" />
<corners android:radius="4dp" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="0dp"
android:right="0dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#F7F7F7" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>

Para usar este diseño de android:background="@drawable/rounded_corner_bg"