Ombra di Android View

Ho cercato in giro e non sono riuscito a trovare un modo adeguato per farlo. Voglio avere i seguenti effetti ombra sulle mie visualizzazioni:

Ad essere onesti, non so se questo secondo viene fatto applicando l'effetto ombra. Qualche idea?

So che a questa domanda è già stata data una risposta, ma voglio che tu sappia che ho trovato una drawablesu Android Studioche è molto simile alle foto che hai nella domanda: Dai un'occhiata a questo:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

Assomiglia a questo:

Spero che sia utile

modificare

L'opzione sopra è per le versioni precedenti di Android Studioquindi potresti non trovarla. Per le versioni più recenti:

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

Inoltre, se vuoi avere la tua forma personalizzata, ti consiglio di utilizzare un software di disegno come Photoshope disegnarlo.

Non dimenticare di salvarlo come .9.pngfile (esempio my_background.9.png:)

Leggi la documentazione: Disegna 9 patch

Modifica 2

Una soluzione ancora migliore e meno laboriosa consiste nell'usare un CardViewset e app:cardPreventCornerOverlap="false"per evitare che le viste si sovrappongano ai bordi:

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

Assicurati anche di aver incluso l'ultima versione in build.gradle, current is

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

Utilizzo Android Studio 0.8.6 e non sono riuscito a trovare:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

quindi ho trovato questo invece:

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

e assomiglia a questo:

mettere uno sfondo di @android:drawable/dialog_holo_light_frame, dà un'ombra ma non puoi cambiare il colore dello sfondo né lo stile del bordo, quindi è meglio trarne vantaggio dall'ombra, pur essendo in grado di mettere uno sfondo tramite la lista dei livelli

<?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>

salvalo nella cartella disegnabile sotto diciamo shadow.xml

per assegnarlo a una vista, nel file di layout xml impostarne lo sfondo

android:background="@drawable/shadow"

Crea card_background.xml nella cartella res / drawable con il codice seguente:

<?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>

Quindi aggiungi il codice seguente all'elemento a cui desideri il layout della scheda

android:background="@drawable/card_background"

la riga seguente definisce il colore dell'ombra per la carta

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

CardView ti dà la vera ombra in Android 5+ e ha una libreria di supporto. Basta avvolgere la tua vista con esso e il gioco è fatto.

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

Richiede la dipendenza successiva.

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

Usa la proprietà di elevazione per ottenere un effetto ombra:

<View ...
    android:elevation="2dp"/>

Questo deve essere utilizzato solo dopo la v21, controlla questo link: http://developer.android.com/training/material/shadows-clipping.html

Potrebbe essere tardi, ma per coloro che stanno ancora cercando una risposta per questo ho trovato un progetto su git hub e questo è l'unico che si adatta effettivamente alle mie esigenze. android-materialshadowninepatch

Aggiungi questa riga alla tua dipendenza build.gradle

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

Saluti. complimenti per il creatore! happycodings

So che è stupidamente hacky,
ma se vuoi supportare sotto v21, ecco i miei risultati.

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>

Ecco il risultato:

Sotto v21 (questo è quello che hai fatto con xml)

Sopra v21 (rendering elevazione reale)

• L'unica differenza significativa è che occuperà lo spazio interno dalla visualizzazione, quindi l'area del contenuto effettivo può essere più piccola di > = dispositivi lecca-lecca .

Se hai bisogno delle ombre per essere applicate correttamente, devi fare quanto segue.

Considera questa vista, definita con uno sfondo disegnabile:

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

Lo sfondo disegnabile è definito come un rettangolo con angoli arrotondati:

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

Questo è il modo consigliato per applicare le ombre, dai un'occhiata https://developer.android.com/training/material/shadows-clipping.html#Shadows

Usa la proprietà elevazione per l'effetto ombra:

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

Crea uno sfondo disegnabile in questo modo per mostrare l'ombra arrotondata.

<?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>

Questa domanda potrebbe essere vecchia, ma per chiunque in futuro desideri un modo semplice per ottenere effetti di ombre complessi, controlla la mia libreria qui https://github.com/BluRe-CN/ComplexView

Utilizzando la libreria, puoi modificare i colori delle ombre, modificare i bordi e molto altro ancora. Ecco un esempio per ottenere ciò che cerchi.

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

Per cambiare il colore dell'ombra, usa app: shadowColor = "your color code".

usa questa forma come sfondo:

<?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>