Ajouter de l'ombre à forme personnalisée sur Android

Est-il possible d'ajouter une ombre portée à une forme personnalisée dans Android? Après avoir cherché dans la documentation, je ne vois qu'un moyen pour appliquer une ombre au texte.

J'ai essayé cela avec pas de chance:

<?xml version="1.0" encoding="UTF-8"?> 
   <shape xmlns:android="http://schemas.android.com/apk/res/android" 
   android:shape="rectangle"> 
     <solid android:color="#90ffffff"/>
       <corners android:radius="12dp" />
     <item name="android:shadowColor">#000000</item> 
     <item name="android:shadowRadius">5</item> 
     <item name="android:shadowDy">3</item> 
   </shape>
InformationsquelleAutor mdunkle | 2011-03-04
  1. 154

    Après Beaucoup de recherche j'ai enfin obtenu ce

    Ajouter de l'ombre à forme personnalisée sur Android

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!-- Bottom 2dp Shadow -->
<item>
    <shape  android:shape="rectangle">

        <solid android:color="#d8d8d8" />
        <corners android:radius="7dp" />

    </shape>
</item>

<!-- White Top color -->
<item android:bottom="3px">

    <shape  android:shape="rectangle">

    <solid android:color="#FFFFFF" />
    <corners android:radius="7dp" />


    </shape>

</item>


</layer-list>
    • où avez-vous configurer <!-- Bottom 2dp Shadow --> je ne vois pas de 2 dans votre code... ???
    InformationsquelleAutor Chirag Patel
  2. 73

    C'est comment je le fais:

    Ajouter de l'ombre à forme personnalisée sur Android

    Code soufflet pour un ÉTAT du bouton:

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- "background shadow" -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#000000" />
<corners android:radius="15dp" />
</shape>
</item>
<!-- background color -->
<item
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px">
<shape android:shape="rectangle" >
<solid android:color="#cc2b2b" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- over left shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerColor="#00FF0000"
android:centerX="0.9"
android:endColor="#99000000"
android:startColor="#00FF0000" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- over right shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="360"
android:centerColor="#00FF0000"
android:centerX="0.9"
android:endColor="#99000000"
android:startColor="#00FF0000" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- over top shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="-90"
android:centerColor="#00FF0000"
android:centerY="0.9"
android:endColor="#00FF0000"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- over bottom shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#00FF0000"
android:centerY="0.9"
android:endColor="#00FF0000"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
</layer-list>

    Alors vous devriez avoir un sélecteur avec différentes versions de la touche, quelque chose comme:

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_button_red_pressed" android:state_pressed="true"/> <!-- pressed -->
<item android:drawable="@drawable/ic_button_red_selected" android:state_focused="true"/> <!-- focused -->
<item android:drawable="@drawable/ic_button_red_selected" android:state_selected="true"/> <!-- selected -->
<item android:drawable="@drawable/ic_button_red_default"/> <!-- default -->
</selector>

    j'espère que cela peut vous aider..bonne chance

    InformationsquelleAutor João Machete
  3. 45

    C'est ma version d'une ombre portée. J'allais pour qu'une vague ombre tout autour de la forme et utilisé cette réponse par Joakim Lundborg que mon point de départ. Ce que j'ai changé est à ajouter à tous les coins de l'ombre éléments et d'augmenter le rayon de l'angle pour chaque ombre de l'élément. Voici donc la xml:

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#02000000" />
<corners android:radius="8dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#05000000" />
<corners android:radius="7dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#10000000" />
<corners android:radius="6dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#15000000" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#20000000" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#25000000" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#30000000" />
<corners android:radius="3dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#0099CC" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
    InformationsquelleAutor BruceHill
  4. 29

    La suite travaillé pour moi: il suffit de l'enregistrer comme custom_shape.xml.

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- "shadow" -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#000000"/>
<corners android:radius="12dp" />
</shape>
</item>
<item android:bottom="3px">
<shape android:shape="rectangle"> 
<solid android:color="#90ffffff"/>
<corners android:radius="12dp" />
</shape>
</item>
</layer-list>
    InformationsquelleAutor Siklab.ph
  5. 27

    Je pense que cette méthode donne de très bons résultats:

    <!-- Drop Shadow Stack -->
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#00CCCCCC"/>
</shape>
</item>
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#10CCCCCC"/>
</shape>
</item>
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#20CCCCCC"/>
</shape>
</item>
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#30CCCCCC"/>
</shape>
</item>
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#50CCCCCC"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<stroke android:color="#CCC" android:width="1dp"/>
<solid android:color="#FFF" />
<corners android:radius="2dp" />
</shape>
</item>

    J'ai trouvé ce à:
    http://www.uifuel.com/android-creating-a-drop-shadow-in-xml-layout/

    InformationsquelleAutor Joakim Lundborg
  6. 7

    Si vous n'avez pas idée de faire de certains de dessin personnalisé avec la Toile de l'API, découvrez cette réponse sur les ombres portées. Voici un suivi question à celui qui résout un problème dans l'original.

    InformationsquelleAutor Josh
  7. 6

    Vieille question, mais l'Élévation, disponible, avec la Conception de Matériel fournit désormais de l'ombre à tout point de vue.

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

    Voir les docs à https://developer.android.com/training/material/shadows-clipping.html

    • Que faire si vous avez plusieurs widgets qui doit apparaître fusionné avec une ombre autour de l'extérieur de la forme? J'ai essayé d'ajouter l'élévation de l'extérieur mais de l'intérieur, puis ai caché derrière celui de l'extérieur. J'ai donc essayé d'ajouter une élévation à deux, mais ensuite, il ressemblait à l'intérieur, on a une ombre sur le dessus de celui de l'extérieur comme une pyramide Inca.
    • J'ai fini par traiter avec la fusion en utilisant un seul ImageButton au lieu d'une ImageView plus Button' because it allows a ImageButton` permet à la fois une android:background et un android:src. Donc j'ai été en mesure de préciser android:elevation juste une fois et en évitant les "Inca effet pyramide" que j'ai décrit dans mon dernier commentaire.
    InformationsquelleAutor wainy
  8. 4

    Je propose une petite amélioration à Bruce est une solution qui est de prévenir le chevaucher de la même forme sur le dessus les uns des autres et d'utiliser simplement de l'avc au lieu de solide.
    Il devrait ressembler à ceci:

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#02000000" android:width="1dp"  />
<corners android:radius="8dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#05000000" android:width="1dp" />
<corners android:radius="7dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#10000000" android:width="1dp" />
<corners android:radius="6dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#15000000" android:width="1dp" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#20000000" android:width="1dp" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#25000000" android:width="1dp" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#30000000" android:width="1dp" />
<corners android:radius="3dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#FFF" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>

    Ajouter de l'ombre à forme personnalisée sur Android
    Enfin, je tenais à préciser pour les personnes qui voudraient une ombre dans une direction précise que tout ce que vous avez à faire est de définir le haut, le bas, la gauche ou la droite pour 0dp (pour une ligne pleine) ou -1dp (pour rien)

    InformationsquelleAutor Francois Dermu
  9. 2

    Ajouter de l'ombre à forme personnalisée sur Android

      <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="@android:color/white" >
</solid>
<stroke
android:width="1dp"
android:color="@color/LightGrey" >
</stroke>
<padding
android:bottom="5dp"
android:left="2dp"
android:right="2dp"
android:top="5dp" >
</padding>
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:radius="12dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp" />
<gradient
android:angle="90"
android:centerColor="@android:color/white"
android:centerY="0.2"
android:endColor="#99e0e0e0"
android:startColor="@android:color/white"
android:type="linear" />
</shape>
    InformationsquelleAutor NBApps
  10. 1

    Je pense que cette ombre portée de la valeur est bonne pour la plupart des cas:

    <solid android:color="#20000000" />
    InformationsquelleAutor user1238561
  11. 1

    Cette question peut-être vieux, mais pour tout le monde dans le futur, qui veut une façon simple d'obtenir un complexe des effets d'ombre découvrez ma bibliothèque ici https://github.com/BluRe-CN/ComplexView

    À l'aide de la bibliothèque, vous pouvez changer les couleurs d'ombre, d'ajuster les bords et bien plus encore. Voici un exemple pour réaliser ce que vous cherchez pour.

    <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, de l'utilisation de l'app:shadowColor="votre code couleur".

    InformationsquelleAutor BluRe.CN
  12. 0

    si vous avez besoin d'une ligne droite de l'ombre (comme en bas de la barre d'outils), vous pouvez également utiliser gradient xml:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:type="linear"
android:angle="-90"
android:startColor="#19000000" <!-- black transparent -->
android:endColor="#00000000" /> <!-- full transparent -->
</shape>

    espère que cela aide quelqu'un

    InformationsquelleAutor Saeed Arianmanesh