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:
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?
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:
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.
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'
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:
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"/>
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"
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.+'
}
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
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
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
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)
Au-dessus de v21 (rendu d'élévation réelle)
Utilisez la propriété elevation pour l’effet de l’ombre:
<YourView
...
Android:elevation="3dp"/>
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>
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>
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".
Vous pouvez créer une ombre pouvant être dessinée à partir d'ici: -