Android: Adding shadow to all sides of button?

Question

I have a simple Android menu in which I want to add extra shading/shadows to all sides of the buttons in order to make them more pronounced on screen. How can I do so?

Screenshot (Ignore coloured buttons in middle, they will all be transparent):

enter image description here

XML- layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
     android:background="@drawable/menubackground" >


    <Button
        android:id="@+id/btnSearchHomeDate"
        android:layout_width="270dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:background="@drawable/circle4"
        android:shadowColor="#A8A8A8"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="10"
        android:text="Date"
        android:textSize="30sp" />

    <Button
        android:id="@+id/btnSearchHomeGame"
        android:layout_width="270dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:layout_marginTop="4dp"
        android:background="@drawable/circle"
        android:shadowColor="#A8A8A8"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="5"
        android:text="Game"
        android:textSize="30sp" />

    <Button
        android:id="@+id/btnSearchHomeMedValues"
        android:layout_width="270dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:layout_marginTop="4dp"
        android:background="@drawable/circle3"
        android:shadowColor="#A8A8A8"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="5"
        android:text="Meditation Values"
        android:textSize="30sp" />

    <Button
        android:id="@+id/btnSearchHomeAttValues"
        android:layout_width="270dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:layout_marginTop="4dp"
        android:background="@drawable/circle2"
        android:shadowColor="#A8A8A8"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="5"
        android:text="Attention Values"
        android:textSize="30sp" />

    <Button
        android:id="@+id/btnSearchHomeScore"
        android:layout_width="270dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:layout_marginTop="4dp"
        android:background="@drawable/circle4"
        android:shadowColor="#A8A8A8"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="5"
        android:text="Score"
        android:textSize="30sp" />

</LinearLayout>

**XML for transparent button (Circle 4): **

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

    <solid android:color="#0000" />

    <stroke
        android:width="1dp"
        android:color="#4a6176" />

    <padding
        android:left="10dp"
        android:right="10dp"
         />

    <corners android:radius="8dp" />

</shape>

score 1 · Answer 1 · edited May 23 '17 at 11:49

1) First we need to create a transparent colour so we will create a new file in values folder called colors.xml:

<resources>
    <color name="yellow_transparant">#33c9ce6a</color>  
</resources>

As you see the '33' before the colour number specify the opacity of this colour. in our case it is 20%. For full list of them check this Answer: How to make a background transparent in android. I use it as a reference.

2) Assign this colour to your 2nd layer of your shape:

Try this one and see if this what you are looking for:

 <?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="#0000" />
            <stroke
                android:width="1dp"
                android:color="@android:color/holo_green_light" />
            <padding
                android:left="1dp"
                android:right="1dp"
                android:top="1dp"
                android:bottom="1dp"/>
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
            <shape 
                android:shape="rectangle" >
                <solid android:color="@color/yellow_transparant" />
                <stroke
                    android:width="1dp"
                    android:color="#4a6176" />
                <padding
                    android:left="10dp"
                    android:right="10dp"/>
                <corners android:radius="8dp" />
            </shape>
    </item>
</layer-list>

3) Add this to your button to create a shadow for your text:

android:shadowColor="@android:color/holo_green_light"
android:shadowDx="1" <!-- put a negative value to change direction --!> 
android:shadowDy="1"
android:shadowRadius="0.1"

But does this mean that I can no longer use: android:background="@drawable/circle" — codeme2020, Aug 14 '14 at 21:53
change your circle.xml to this one and still use it as a background for your button — Karim, Aug 14 '14 at 22:22
It will look exactly like your screen shot rectangle with rounded corners. — Karim, Aug 14 '14 at 23:20
Thanks, the final functionality I now need to add, is to have the background slightly opaque, i.e. not 100% transparent and also have a slight shadow on each button. Do you know how to do so? I will accept the answer asap if so — codeme2020, Aug 15 '14 at 00:43
I also mean for shading on the letters within the button. Thanks for your help — codeme2020, Aug 15 '14 at 00:45

score 0 · Answer 2 · answered Aug 14 '14 at 22:08

I use a gradient for buttons to give them a sort of 3D look:

In my drawable folder (file name button_gradient.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@color/buttonGradientTop"
        android:endColor="@color/buttonGradientBottom"
        android:angle="90"/>
        <corners android:radius="10dp" />
</shape>

and calling it in a layout:

android:background="@drawable/button_gradient"

Android: Adding shadow to all sides of button?

2 Answers2