Menu
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 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
744
To set the default (resting) elevation of a view, use the android:elevation attribute in the XML layout. To set the elevation of a view in the code of an activity, use the View. setElevation() method. To set the translation of a view, use the View.
Click the shape that you want to change, and then click the Format tab. On the Home tab, under Format, click Quick Styles, point to Shadow, and then click the shadow style you want.
Elevation (Android) Elevation is the relative depth, or distance, between two surfaces along the z-axis. Specifications: Elevation is measured in the same units as the x and y axes, typically in density-independent pixels (dp).
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>
I am using this drawable/shadow.xml file
<!-- 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>
Note :- Root layout should be layer-list. Inside it add items.
28
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-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="1.5dp" />
<solid android:color="#00000000" />
<corners android:radius="@dimen/button_radius" />
</shape>
</item>
<item>
<shape>
<padding android:top="1.5dp" />
<solid android:color="#01000000" />
<corners android:radius="@dimen/button_radius" />
</shape>
</item>
<item>
<shape>
<padding android:top="1.5dp" />
<solid android:color="#02000000" />
<corners android:radius="@dimen/button_radius" />
</shape>
</item>
<item>
<shape>
<padding android:top="1.5dp" />
<solid android:color="#03000000" />
<corners android:radius="@dimen/button_radius" />
</shape>
</item>
<item>
<shape>
<padding android:top="1.5dp" />
<solid android:color="#04000000" />
<corners android:radius="@dimen/button_radius" />
</shape>
</item>
<item>
<shape>
<padding android:top="1.5dp" />
<solid android:color="#05000000" />
<corners android:radius="@dimen/button_radius" />
</shape>
</item>
<item>
<shape>
<padding android:top="1.5dp" />
<solid android:color="#06000000" />
<corners android:radius="@dimen/button_radius" />
</shape>
</item>
<item>
<shape>
<padding android:top="1.5dp" />
<solid android:color="#06000000" />
<corners android:radius="@dimen/button_radius" />
</shape>
</item>
<item>
<shape>
<padding android:top="1.5dp" />
<solid android:color="#06000000" />
<corners android:radius="@dimen/button_radius" />
</shape>
</item>
<item>
<shape>
<padding android:top="1.5dp" />
<solid android:color="#06000000" />
<corners android:radius="@dimen/button_radius" />
</shape>
</item>
<!-- White Top color -->
<item android:top="@dimen/button_margin_5">
<shape >
<gradient
android:angle="90"
android:endColor="@color/primary_color_50"
android:startColor="@color/primary_color_500" />
<corners
android:topLeftRadius="@dimen/button_radius"
android:topRightRadius="@dimen/button_radius"/>
</shape>
</item>
</layer-list>
res/values/dimens/
<dimen name="button_radius">25dp</dimen>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
