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
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.
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>
Related
Using a cardview I realized that box-shadow is not rounded and looks awful on the phone screen, below is the example code used, and also a screenshot of the shadow, I have added more shadow for emphasis, so you can clearly see that the edges of the shadow are rectangular while the box is rounded.
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:background="#drawable/card"
android:elevation="5dp"
app:cardCornerRadius="5dp"
app:contentPaddingTop="8dp"
app:contentPaddingBottom="8dp"
app:contentPaddingLeft="#dimen/sideSpace"
app:contentPaddingRight="#dimen/sideSpace"
app:cardElevation="12dp">...
How can this be fixed?
You can use this drawable as a background of any view for shadow
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="0.5dp" android:right="0.5dp" android:bottom="1dp" android:left="0.5dp" />
<solid android:color="#10CCCCCC" />
<corners android:radius="8dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0.5dp" android:right="0dp" android:bottom="1dp" android:left="0.5dp" />
<solid android:color="#10CCCCCC" />
<corners android:radius="7dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#20CCCCCC" />
<corners android:radius="6dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<solid android:color="#30CCCCCC" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<solid android:color="#40CCCCCC" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<solid android:color="#50CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0.1dp" android:bottom="0.5dp" android:left="0.1dp" />
<solid android:color="#60CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#ffffff" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/dimen_10dp"
android:divider="#android:color/transparent"
android:dividerHeight="0.0px"
android:clipToPadding="false"
android:clipChildren="false"
app:cardElevation="10dp"
app:cardPreventCornerOverlap="false"
android:elevation="#dimen/dimen_20dp"
app:cardCornerRadius="#dimen/dimen_15dp"
>
Should have a child also have corner radius.
is this what you want?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_centerInParent="true"
android:layout_marginTop="100dp"
xmlns:tools="http://schemas.android.com/tools"
>
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:elevation="0dp"
android:background="#drawable/round"
app:cardCornerRadius="100dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
app:contentPaddingTop="8dp"
app:contentPaddingBottom="8dp"
app:cardElevation="12dp">
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_marginBottom="8dp"
android:elevation="5dp"
app:cardCornerRadius="5dp"
app:contentPaddingTop="8dp"
app:contentPaddingBottom="8dp"
app:cardElevation="12dp"
android:background="#drawable/round2">
</com.google.android.material.card.MaterialCardView>
</RelativeLayout>
round.xml:-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<!-- you can use any color you want I used here gray color-->
<solid android:color="#80000000"/>
<corners android:radius="30dp"/>
</shape>
round2.xml:-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<!-- you can use any color you want I used here gray color-->
<solid android:color="#color/colorAccent"/>
<corners android:radius="20dp"/>
</shape>
output:-
I am trying to build a custom edit text. But the problem is the icon didn't locate rightly. I want these two to locate in the center. Where am i wrong?
Here is my xml file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners android:radius="6dp" />
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<shape>
<solid android:color="#AAAAAA" />
<corners android:radius="6dp" />
</shape>
</item>
<item
android:left="34dp"
>
<!-- left is icon size + 2x side padding around icon-->
<!-- 18 + 8 + 8 -->
<shape>
<solid android:color="#android:color/white" />
<corners android:radius="6dp"
android:topRightRadius="6dp"
android:topLeftRadius="0dp"
android:bottomRightRadius="6dp"
android:bottomLeftRadius="0dp"/>
</shape>
</item>
<item>
<shape>
<corners android:radius="6dp" />
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#BBBBBB" />
</shape>
</item>
</layer-list>
Try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#71B9DE">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/test"
android:drawableLeft="#drawable/bca"
android:padding="5dp" />
</LinearLayout>
#drawable/test
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners android:radius="6dp" />
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<shape>
<solid android:color="#AAAAAA" />
<corners android:radius="6dp" />
</shape>
</item>
<item android:left="34dp">
<shape>
<solid android:color="#android:color/white" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="6dp"
android:radius="6dp"
android:topLeftRadius="0dp"
android:topRightRadius="6dp" />
</shape>
</item>
<item>
<shape>
<corners android:radius="6dp" />
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#BBBBBB" />
</shape>
</item>
</layer-list>
OUTPUT
Could I please ask if anyone knows how to create an xml shape of the chat bubble below? The only examples I found online were two separate shapes that were put as two separate backgrounds in a layout - a triangle and a rectangle. I tried combining the triangle and rectangle to no avail. The triangle seems to hide in the rectangle.
Setting a top attribute to the triangle to move it down makes the ImageView object blank.
Please see what I tried:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!--rectangle with rounded corners-->
<item android:top="0dp" android:bottom="20dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/black" />
<size
android:width="106dp"
android:height="20dp"/>
<stroke
android:width="1dp"
android:color="#000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--triangle-->
<item android:bottom="0dp" android:top="20dp" android:gravity="center_horizontal|bottom">
<rotate
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="135%"
android:pivotY="15%">
<shape android:shape="rectangle">
<solid android:color="#android:color/black" />
<size
android:height="10dp"
android:width="10dp"/>
</shape>
</rotate>
</item>
</layer-list>
This is the usage in the imageView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="net.eventilate.shapes.Balloon">
<ImageView
android:layout_width="106dp"
android:layout_height="30dp"
android:id="#+id/imageView2"
android:contentDescription="#string/test"
android:background="#drawable/balloon"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
You can Use this code
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="0dp" android:bottom="10dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/holo_blue_light" />
<size
android:width="106dp"
android:height="20dp"/>
<stroke
android:width="1dp"
android:color="#40adc2" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:bottom="0dp"
android:top="0dp"
android:gravity="center_horizontal|bottom">
<rotate
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="135%"
android:pivotY="15%">
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_blue_light" />
<size
android:height="10dp"
android:width="10dp"/>
</shape>
</rotate>
</item>
</layer-list>
it get this result:
This is exactly what you need:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- red shape -->
<item
android:bottom="0dp"
android:gravity="center_horizontal|bottom"
android:top="0dp">
<rotate
android:fromDegrees="45"
android:pivotX="110%"
android:pivotY="17%"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_red_dark" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
</rotate>
</item>
<item
android:bottom="10dp"
android:top="0dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#android:color/holo_red_dark" />
<size
android:width="50dp"
android:height="20dp" />
</shape>
</item>
<!-- black shape -->
<item
android:bottom="0dp"
android:gravity="center_horizontal|bottom"
android:top="0dp">
<rotate
android:fromDegrees="45"
android:pivotX="120%"
android:pivotY="15%"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#android:color/black" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
</rotate>
</item>
<item
android:bottom="10.5dp"
android:left="0.5dp"
android:right="0.5dp"
android:top="0.5dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#android:color/black" />
<size
android:width="50dp"
android:height="20dp" />
</shape>
</item>
</layer-list>
I tring to make shadow around linearLayout like on image below (on top):
I`m using layer-list with shape, but all bottom shadow owerlapping by white area (see image above). All this view looks like:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#android:color/transparent" >
<LinearLayout
android:id="#+id/listView_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="45dp"
android:background="#color/text_white">
<!-- ListView to be shown on widget -->
<ListView
android:id="#+id/listViewWidget"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- Empty view is show if list items are empty -->
<TextView
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="20sp"
android:visibility="gone" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/widget_toolbar"
android:orientation="vertical"
android:background="#drawable/layout_card_view"/>
</FrameLayout>
How to make this?
You must use , this example has a shadow and item with background white, you can use and adjust to your preference.
<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="#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>
<!-- Background -->
<item>
<shape>
<solid android:color="#FFF" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
You can add more drop shadow how you need. Check out the color in every one.
Shadow effect using drawable :
1) Create a shadow 9 patch image.
2) Set that 9 patch image as the layout background.
use this generator to create 9 patch shadow image.
Try this...
<?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="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
You can use this 1 st way
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item><layer-list>
<item android:right="7dp" android:top="3dp"><shape>
</shape></item>
<item ><shape>
<gradient android:angle="270" android:endColor="#FFFFFF" android:startColor="#BABABA" />
<padding android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp" />
</shape></item>
</layer-list></item>
</layer-list>
2nd way
You can use 9 Patch Image .
Add ll_shadow.xml file to res/drawable
<?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>
USE
<LinearLayout
android:background="#drawable/ll_shadow"/>
Use this code and create one shedow.xml file in drawable and then use as a background in your layout file to get desire output.
<?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="#your_shadow_color" />
<corners android:radius="7dp" />
</shape>
</item>
<!-- Green Top color -->
<item android:bottom="3px">
<shape android:shape="rectangle">
<solid android:color="#your_view_background_color" />
<corners android:radius="7dp" />
</shape>
</item>
</layer-list>
I am using this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="7sp" />
<gradient
android:startColor="#333"
android:centerColor="#ffffff"
android:endColor="#333"
android:angle="90" />
<stroke android:width="1dp" android:color="#FFffffff" />
</shape>
</item>
But this does not give the desired effect.
You can try it this way
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#drawable/gradient"
android:orientation="vertical" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#drawable/gradient2"
android:orientation="vertical" >
</RelativeLayout>
</RelativeLayout>
Gradient 1
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<corners android:radius="7sp" />
<gradient
android:angle="90"
android:endColor="#D1D1D1"
android:startColor="#000" />
<stroke
android:width="1dp"
android:color="#FFffffff" />
</shape>
</item>
</layer-list>
Gradient 2
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<corners android:radius="7sp" />
<gradient
android:angle="90"
android:endColor="#000"
android:startColor="#D1D1D1" />
<stroke
android:width="1dp"
android:color="#FFffffff" />
</shape>
</item>
</layer-list>
Final Result
Use this instead
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#333"
android:centerColor="#DDD"
android:endColor="#333"
android:angle="90" />
<stroke android:width="1dp" android:color="#FF333333" />
</shape>
</item>
<item android:left="4dp" android:right="4dp" android:top="1dp" android:bottom="1dp">
<shape android:shape="rectangle">
<gradient
android:startColor="#AAA"
android:centerColor="#FFF"
android:endColor="#AAA"
android:angle="90" />
</shape>
</item>
</layer-list>
But it's better to use nine-patch images
Try
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#4C4C43"
android:centerColor="#B8B894"
android:endColor="#4C4C43"
android:angle="270" />
</shape>
</item>
P.S - change color according to your need
reference- http://www.learn-android-easily.com/2013/06/gradient-drawable-in-android.html
Use :
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:type="linear"
android:centerX="50%"
android:startColor="#FFc0c0c0"
android:centerColor="#FFffffff"
android:endColor="#FF808080"
android:angle="270"/>
</shape>
<corners android:radius="7sp" />