web-dev-qa-db-fra.com

comment ajouter un effet d'ombre sur drawable dans android

enter image description hereJ'ai créé une bulle de chat avec drawable qui a l'air bien, maintenant je veux ajouter un effet d'ombre en dessous du drawable pour qu'il fasse un effet 3D.Je ne veux pas utiliser d'image à 9 pas. Je veux juste savoir comment je peux ajouter un effet d'ombre sur ce dessinable. mon code est

---- right_bubble_chat_drawable

 <?xml version="1.0" encoding="utf-8"?>
 <shape Android:shape="rectangle" xmlns:Android="http://schemas.Android.com/apk/res/Android">
        <corners Android:radius="15dp" />

        <solid Android:color="@color/chatrightbubbleColor" />

        <padding
            Android:bottom="10dp"
            Android:left="10dp"
            Android:right="10dp"
            Android:top="10dp" />

        <size
            Android:height="@dimen/normal_button_height"
            Android:width="@dimen/normal_button_width" />

--- pour le pointeur de coin 'chat_laftarraow'

  <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item >
     <rotate
        Android:fromDegrees="90"
        Android:toDegrees="-90"
        Android:pivotX="50%"
        Android:pivotY="50%" >
    <rotate
        Android:fromDegrees="45"
        Android:toDegrees="45"
        Android:pivotX="-40%"
        Android:pivotY="86%" >
        <shape
            Android:shape="rectangle"  >
            <stroke Android:color="#00aaef" Android:width="1dp"/>
            <solid
                Android:color="#00aaef"  />

        </shape>
       </rotate>
       </rotate>
      </item>
    </layer-list>

------- Je les utilise comme

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content" >
   <View
    Android:id="@+id/left_chatArror"
    Android:layout_width="20dp"
    Android:layout_height="20dp"
    Android:layout_alignParentRight="true"
    Android:layout_marginTop="6dp"
    Android:background="@drawable/chat_laftarraow"/>

<RelativeLayout

    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:maxWidth="220dp"
    Android:layout_marginRight="-3dp"
    Android:orientation="horizontal"
    Android:layout_toLeftOf="@+id/left_chatArror"
    Android:paddingBottom="5dp"
    Android:paddingTop="5dp"
    Android:background="@drawable/right_bubble_chat_drawable">

    </RelativeLayout>
  </RelativeLayout>

Veuillez me suggérer comment puis-je ajouter un effet d'ombre sous la bulle comme dans l'image ci-dessous

enter image description here

androidandroid-drawablexml-drawableshapedrawable
19
maddy d

Vous pouvez essayer en implémentant une liste de couches qui servira d'arrière-plan pour le LinearLayout et ajoutez votre view à l'intérieur.

Citation d'une réponse à cette question :

Ajoutez le fichier background_with_shadow.xml à res/drawable. Contenant:

<?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="@Android:color/darker_gray" />
        <corners Android:radius="5dp"/>
        </shape>
    </item>
    <item Android:right="1dp" Android:left="1dp" Android:bottom="2dp">
        <shape 
            Android:shape="rectangle">
        <solid Android:color="@Android:color/white"/>
        <corners Android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

Ajoutez ensuite la liste des calques comme arrière-plan dans votre LinearLayout.

<LinearLayout
  Android:layout_width="wrap_content"
  Android:layout_height="wrap_content"
  Android:background="@drawable/background_with_shadow"/>

[~ # ~] modifier [~ # ~]

Vous pouvez créer un XML séparé pour créer une image grise comme ceci:

---- right_bubble_shdw_chat_drawable

 <?xml version="1.0" encoding="utf-8"?>
 <shape Android:shape="rectangle" xmlns:Android="http://schemas.Android.com/apk/res/Android">
        <corners Android:radius="15dp" />

        <solid Android:color="@Android:color/darker_gray" />

        <padding
            Android:bottom="10dp"
            Android:left="10dp"
            Android:right="10dp"
            Android:top="10dp" />

        <size
            Android:height="@dimen/normal_button_height"
            Android:width="@dimen/normal_button_width" />

--- pour le pointeur d'angle 'chat_laftarraow_shdw'

  <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item >
     <rotate
        Android:fromDegrees="90"
        Android:toDegrees="-90"
        Android:pivotX="50%"
        Android:pivotY="50%" >
    <rotate
        Android:fromDegrees="45"
        Android:toDegrees="45"
        Android:pivotX="-40%"
        Android:pivotY="86%" >
        <shape
            Android:shape="rectangle"  >
            <stroke Android:color="@Android:color/darker_gray" Android:width="1dp"/>
            <solid
                Android:color="@Android:color/darker_gray"  />

        </shape>
       </rotate>
       </rotate>
      </item>
    </layer-list>

------- Je les utilise comme

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content" >
   <View
    Android:id="@+id/left_chatArror"
    Android:layout_width="20dp"
    Android:layout_height="20dp"
    Android:layout_alignParentRight="true"
    Android:layout_marginTop="6dp"
    Android:background="@drawable/chat_laftarraow"/>

<RelativeLayout

    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:maxWidth="220dp"
    Android:layout_marginRight="-3dp"
    Android:orientation="horizontal"
    Android:layout_toLeftOf="@+id/left_chatArror"
    Android:paddingBottom="5dp"
    Android:paddingTop="5dp"
    Android:background="@drawable/right_bubble_chat_drawable">

    </RelativeLayout>


   <View
    Android:id="@+id/left_chatArrorShdw"
    Android:layout_width="20dp"
    Android:layout_height="20dp"
    Android:layout_alignParentRight="true"
    Android:layout_marginTop="15dp"
    Android:background="@drawable/chat_laftarraow_shdw"/>

<RelativeLayout

    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:maxWidth="220dp"
    Android:layout_marginRight="-3dp"
    Android:orientation="horizontal"
    Android:layout_toLeftOf="@+id/left_chatArror"
    Android:paddingBottom="5dp"
    Android:paddingTop="5dp"
    Android:background="@drawable/right_bubble_shdw_chat_drawable">
  </RelativeLayout>
27
Himanshu Agarwal

J'utilise ce fichier drawable/shadow.xml

<!-- Drop Shadow Stack -->
<item>
    <shape>
        <padding
            Android:bottom="1dp"
            Android:left="1dp"
            Android:right="1dp"
            Android:top="1dp" />

        <solid Android:color="#00CCCCCC" />

        <corners Android:radius="3dp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            Android:bottom="1dp"
            Android:left="1dp"
            Android:right="1dp"
            Android:top="1dp" />

        <solid Android:color="#10CCCCCC" />

        <corners Android:radius="3dp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            Android:bottom="1dp"
            Android:left="1dp"
            Android:right="1dp"
            Android:top="1dp" />

        <solid Android:color="#20CCCCCC" />

        <corners Android:radius="3dp" />
    </shape>
</item>

<!-- Background -->
<item>
    <shape>
        <solid Android:color="@Android:color/white" />

        <corners Android:radius="3dp" />
    </shape>
</item>

Remarque: - La disposition racine doit être une liste de couches. À l'intérieur, ajoutez des éléments.

1
Nidhi Savaliya