How To Add Shadow Effect On Drawable In Android

I 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

Solution 1:

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-listxmlns:android="http://schemas.android.com/apk/res/android"><item ><shapeandroid:shape="rectangle"><solidandroid:color="@android:color/darker_gray" /><cornersandroid:radius="5dp"/></shape></item><itemandroid:right="1dp"android:left="1dp"android:bottom="2dp"><shapeandroid:shape="rectangle"><solidandroid:color="@android:color/white"/><cornersandroid:radius="5dp"/></shape></item></layer-list>

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

<LinearLayoutandroid: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"?><shapeandroid:shape="rectangle"xmlns:android="http://schemas.android.com/apk/res/android"><cornersandroid:radius="15dp" /><solidandroid:color="@android:color/darker_gray" /><paddingandroid:bottom="10dp"android:left="10dp"android:right="10dp"android:top="10dp" /><sizeandroid: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-listxmlns:android="http://schemas.android.com/apk/res/android" ><item ><rotateandroid:fromDegrees="90"android:toDegrees="-90"android:pivotX="50%"android:pivotY="50%" ><rotateandroid:fromDegrees="45"android:toDegrees="45"android:pivotX="-40%"android:pivotY="86%" ><shapeandroid:shape="rectangle"  ><strokeandroid:color="@android:color/darker_gray"android:width="1dp"/><solidandroid:color="@android:color/darker_gray"  /></shape></rotate></rotate></item></layer-list>

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

<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content" ><Viewandroid: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"/><RelativeLayoutandroid: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><Viewandroid: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"/><RelativeLayoutandroid: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>

Solution 2:

I am using this drawable/shadow.xml file

<!-- Drop Shadow Stack --><item><shape><paddingandroid:bottom="1dp"android:left="1dp"android:right="1dp"android:top="1dp" /><solidandroid:color="#00CCCCCC" /><cornersandroid:radius="3dp" /></shape></item><item><shape><paddingandroid:bottom="1dp"android:left="1dp"android:right="1dp"android:top="1dp" /><solidandroid:color="#10CCCCCC" /><cornersandroid:radius="3dp" /></shape></item><item><shape><paddingandroid:bottom="1dp"android:left="1dp"android:right="1dp"android:top="1dp" /><solidandroid:color="#20CCCCCC" /><cornersandroid:radius="3dp" /></shape></item><!-- Background --><item><shape><solidandroid:color="@android:color/white" /><cornersandroid:radius="3dp" /></shape></item>

Note :- Root layout should be layer-list. Inside it add items.

Solution 3:

Add round_big_green_down.xml as background to your position.

<LinearLayout
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="@drawable/**round_big_green_down**"
       android:paddingBottom="@dimen/button_margin_100"/>

res/drawable/round_big_green_down.xml

<?xml version="1.0" encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android"><!-- Drop Shadow Stack --><item><shape><paddingandroid:top="1.5dp" /><solidandroid:color="#00000000" /><cornersandroid:radius="@dimen/button_radius" /></shape></item><item><shape><paddingandroid:top="1.5dp" /><solidandroid:color="#01000000" /><cornersandroid:radius="@dimen/button_radius" /></shape></item><item><shape><paddingandroid:top="1.5dp" /><solidandroid:color="#02000000" /><cornersandroid:radius="@dimen/button_radius" /></shape></item><item><shape><paddingandroid:top="1.5dp" /><solidandroid:color="#03000000" /><cornersandroid:radius="@dimen/button_radius" /></shape></item><item><shape><paddingandroid:top="1.5dp" /><solidandroid:color="#04000000" /><cornersandroid:radius="@dimen/button_radius" /></shape></item><item><shape><paddingandroid:top="1.5dp" /><solidandroid:color="#05000000" /><cornersandroid:radius="@dimen/button_radius" /></shape></item><item><shape><paddingandroid:top="1.5dp" /><solidandroid:color="#06000000" /><cornersandroid:radius="@dimen/button_radius" /></shape></item><item><shape><paddingandroid:top="1.5dp" /><solidandroid:color="#06000000" /><cornersandroid:radius="@dimen/button_radius" /></shape></item><item><shape><paddingandroid:top="1.5dp" /><solidandroid:color="#06000000" /><cornersandroid:radius="@dimen/button_radius" /></shape></item><item><shape><paddingandroid:top="1.5dp" /><solidandroid:color="#06000000" /><cornersandroid:radius="@dimen/button_radius" /></shape></item><!-- White Top color --><itemandroid:top="@dimen/button_margin_5"><shape ><gradientandroid:angle="90"android:endColor="@color/primary_color_50"android:startColor="@color/primary_color_500" /><cornersandroid:topLeftRadius="@dimen/button_radius"android:topRightRadius="@dimen/button_radius"/></shape></item></layer-list>

res/values/dimens/

<dimenname="button_radius">25dp</dimen>