androidandroid-drawablexml-drawableshapedrawable

how to add shadow effect on drawable in android


enter image description hereI have created chat bubble with drawable which looks fine, now I want to add shadow effect below the drawable so it make 3d effect.I don't want to use 9-pitch image. I just want to know how i can add shadow effect on this drawable. my code is

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

--- for corner pointer '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>

------- I am using them like

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

Please suggest me how can I add shadow effect below the bubble as in the image below

enter image description here


Solution

  • You can try by implementing a layer-list that will act as the background for the LinearLayout and add your view inside this.

    Quote from an answer to this question:

    Add background_with_shadow.xml file to res/drawable. Containing:

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

    Then add the the layer-list as background in your LinearLayout.

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

    EDIT

    You can create seprate xml for creating gray image like thsis:

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

    --- for corner pointer '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>
    

    ------- I am using them like

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