Android Button border shadow

Question

Shadow property in Button view gives shadow to text. How can I give shadow to right and bottom border of a Button?As shown below:

enter image description here

[This has been asked here](http://stackoverflow.com/a/6401739/420015) || [And again here](http://stackoverflow.com/a/4929068/420015) — adneal, Apr 10 '12 at 07:15

score 4 · Answer 1 · answered Mar 03 '15 at 12:44

You can try it. I use it in my project. I give shadow to right and bottom border of a Button.

Button xml

<Button
      android:id="@+id/buttonSignIn"
      android:layout_width="fill_parent"
      android:layout_height="50dp"
      android:background="@drawable/button_dropshadow"
      android:textColor="000000"
      android:text="Sign In" />

In drawable file add button_dropshadow.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <layer-list>
        <item android:left="5dp" android:top="5dp">
            <shape>
                <corners android:radius="3dp" />
                <solid android:color="#000000" />
            </shape>
        </item>
        <item android:bottom="2dp" android:right="2dp">
            <shape>
                <gradient android:angle="270" 
                    android:endColor="#ffffff" android:startColor="#ffffff" />
                <stroke android:width="1dp" android:color="#000000" />
                <corners android:radius="4dp" />
                <padding android:bottom="10dp" android:left="10dp" 
                    android:right="10dp" android:top="10dp" />
            </shape>
        </item>
    </layer-list>
</item>

</selector>

Thank you.

score 3 · Answer 2 · answered Apr 18 '14 at 03:28

Try making your own button 9-patch image with selector:

btn_normal.9.png: Normal

btn_pressed.9.png: Pressed

btn_focused.9.png: Focused

btn_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/btn_focused" />
    <item android:state_focused="true" android:drawable="@drawable/btn_focused" />
    <item android:state_pressed="true" android:drawable="@drawable/btn_pressed" />
    <item android:drawable="@drawable/btn_normal" />
</selector>

and add android:background="@drawable/btn_selector" in button's attributes.

score 0 · Answer 3 · answered Apr 10 '12 at 07:18

0

Here is a blob post that I found and could help. It will only work in a RelativeLayout. Create a View component with the same size as your button and place it immediately below:

<Button
    android:id="+@id\my_button"
    android:layout_below="@id/some_layout_item"
    android:layout_width="100dp"
    android:layout_height="5dp"
    >
</Button>
<View
    android:layout_below="@id/my_button"
    android:layout_width="100dp"
    android:layout_height="5dp"
    android:background="@drawable/drop_shadow"
    >
</View>

Create the shadow as a drawable (drop_shadow.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>    
    <gradient
        android:startColor="@color/cream_dark"
        android:endColor="@color/cream"
        android:angle="270"
        >
    </gradient>
</shape>

answered Apr 10 '12 at 07:18

kgiannakakis

103,016
27
158
194

This only sets background color. I dont want to change background color. I only want to right and bottom border. – AndroidDev Apr 10 '12 at 08:49
I think that you could achieve what you want by playing with the dimensions and the margins of the second View. – kgiannakakis Apr 10 '12 at 09:20
You want to say, place a black view behind a button? – AndroidDev Apr 10 '12 at 11:15
It would be really a cumbersome job. I am trying to do it with shape drawable. – AndroidDev Apr 10 '12 at 12:15

score 0 · Answer 4 · answered Oct 15 '13 at 09:54

My button's background is set like this

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
     android:startColor="@android:color/holo_green_dark"
     android:endColor="@android:color/holo_green_light"
     android:angle="90">
   </gradient>
     <stroke
     android:width="1px"
     android:color="@android:color/darker_gray" />
</shape>

The effect of the shadow can be done by adding a second shape under the original button shape, changing its color to a darker one either black or grey. But the shadow should be of the same shape as that of the button.

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" >

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

 </shape>

To overlap different items we have to use a “layer-list” resource and include the previous shapes. The shadow should appear in first place and then the original button with some displacement. In this example, we are creating the shadow at the bottom of the button and an offset of 4px.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
   <item android:drawable="@drawable/shadow"/>
   <item
     android:drawable="@drawable/button"
     android:bottom="4px" 
     android:right="4px"
     />  
 </layer-list>

Now set the background of the button as the layerlist drawable. This should do it partially.

Android Button border shadow

4 Answers4