web-dev-qa-db-fra.com

Android View shadow

J'ai cherché autour, et je ne pouvais pas trouver un moyen approprié de le faire. Je souhaite avoir les effets d'ombre suivants sur mes vues: enter image description here

enter image description here

Pour être honnête, je ne sais pas si cette seconde étape est réalisée en appliquant un effet d’ombre. Des idées?

79
longwalker

Je sais que cette question a déjà reçu une réponse, mais je veux que vous sachiez que j'ai trouvé une drawable sur Android Studio qui est très similaire aux photos que vous avez dans la question:

Android:background="@drawable/abc_menu_dropdown_panel_holo_light"

Cela ressemble à ceci:

enter image description here

J'espère que ça vous sera utile

Modifier

L'option ci-dessus concerne les versions plus anciennes de Android Studio, de sorte que vous ne la trouverez peut-être pas. Pour les nouvelles versions:

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

De plus, si vous voulez avoir votre propre forme personnalisée, je suggère d'utiliser un logiciel de dessin comme Photoshop et de le dessiner. 

enter image description here

N'oubliez pas de l'enregistrer en tant que fichier .9.png (exemple: my_background.9.png)

Lire la documentation: Draw 9-patch

Edit 2

Une solution encore meilleure et moins exigeante consiste à utiliser une variable CardView et à définir app:cardPreventCornerOverlap="false" afin d'éviter que les vues ne chevauchent les bordures: 

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

Assurez-vous également d’avoir inclus la dernière version dans le build.gradle, current est

compile 'com.Android.support:cardview-v7:26.0.0'
143
Rick

J'utilise Android Studio 0.8.6 et je n'ai pas trouvé:

Android:background="@drawable/abc_menu_dropdown_panel_holo_light"

alors j'ai trouvé ça à la place:

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

et ça ressemble à ça:

enter image description here

95
Repo

Créez card_background.xml dans le dossier res/drawable avec le code suivant:

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

Ajoutez ensuite le code suivant à l'élément pour lequel vous voulez la mise en page de la carte

Android:background="@drawable/card_background"

la ligne suivante définit la couleur de l'ombre pour la carte 

<solid Android:color="#BDBDBD"/>
30
Vivek Varma

mettre un arrière-plan de @Android:drawable/dialog_holo_light_frame, donne une ombre, mais vous ne pouvez pas changer la couleur de l'arrière-plan ni le style de la bordure, il est donc préférable de profiter de l'ombre de celle-ci tout en pouvant placer un arrière-plan via la liste de calques

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

enregistrez-le dans le dossier pouvant être dessiné sous say shadow.xml

pour l'attribuer à une vue, dans le fichier de mise en page XML, définissez le fond de celle-ci 

Android:background="@drawable/shadow"
25
Mohamed Selim

CardView vous donne true shadow dans Android 5+ et il dispose d'une bibliothèque de support. Enveloppez votre vue avec et vous avez terminé.

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

Cela nécessite la prochaine dépendance.

dependencies {
    ...
    compile 'com.Android.support:cardview-v7:21.0.+'
}
23
Ilya Gazman

Utilisez la propriété altitude pour obtenir un effet d’ombre: 

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

Ceci ne doit être utilisé qu'après la v21, consultez ce lien: http://developer.Android.com/training/material/shadows-clipping.html

16
mossman252

C’est peut-être tard, mais pour ceux qui cherchent encore une réponse, j’ai trouvé un projet sur git hub et c’est le seul qui réponde réellement à mes besoins. Android-materialshadowninepatch

Ajoutez simplement cette ligne sur votre dépendance build.gradle

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

à votre santé. Bravo au créateur! happycodings

11
ralphgabb

Si vous avez besoin que les ombres soient correctement appliquées, procédez comme suit.

Considérez cette vue, définie avec un arrière-plan dessinable:

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

L'arrière-plan dessinable est défini comme un rectangle avec des coins arrondis:

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

C’est le moyen recommandé d’appliquer des ombres. Consultez cette option https://developer.Android.com/training/material/shadows-clipping.html#Shadows

3
Shangeeth Sivan

Je sais que c'est bêtement hacky,
mais si vous voulez supporter la v21, voici mes réalisations. 

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>

Voici le résultat: 

Sous v21 (c’est ce que vous avez créé avec xml)  enter image description here

Au-dessus de v21 (rendu d'élévation réelle)  enter image description here

  • La seule différence importante est qu’il occupera l’espace intérieur de la vue, de sorte que votre zone de contenu réelle peut être plus petite que > = Lollipop.
2
wonsuc

Utilisez la propriété elevation pour l’effet de l’ombre:

<YourView
    ...
    Android:elevation="3dp"/>
1
Ofek Ashery

Créez un fond pouvant être dessiné comme ceci pour afficher une ombre arrondie.

<?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>
0
gaurav iqlance

utiliser cette forme comme fond d'écran: 

<?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>
0
Mr.Hosseini

Cette question est peut-être ancienne, mais pour quiconque à l'avenir voudra un moyen simple d'obtenir des effets d'ombre complexes, consultez ma bibliothèque ici https://github.com/BluRe-CN/ComplexView

En utilisant la bibliothèque, vous pouvez modifier les couleurs des ombres, ajuster les bords et bien plus encore. Voici un exemple pour réaliser ce que vous recherchez.

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

Pour changer la couleur de l'ombre, utilisez app: shadowColor = "votre code de couleur".

0
BluRe.CN

Vous pouvez créer une ombre pouvant être dessinée à partir d'ici: -

Cochez cette case

0
Aris_choice