Android Button background as a shape with shadow

Question

I created a background with buttons from the forms and look good for my purpose. The only thing needed is to cast a little shadow for her. Here is the code:

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape> <solid android:color="#343434" /> <stroke android:width="1dp" android:color="#171717" /> <corners android:radius="3dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> </item> <item> <shape> <gradient android:angle="270" android:endColor="#E2E2E2" android:startColor="#BABABA" /> <stroke android:width="1dp" android:color="#BABABA" /> <corners android:radius="4dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> </item> </selector> 

Here is what I want to achieve.

How to cast a shadow? I suppose that I need to make another shape, but with a black / gray background and set some kind of upper left border of the field so that it looks like a shadow. But I don’t know how to do this ... and the documentation didn’t help me much.

Further Edit: I want to add a shadow to the xml file, not the code. Thanks.

Answer 1

If you want to stack more shapes on top of each other, you can use a layer-list . Bellow is the code for a regular element in your selector (with a gray bar):

 <item> <layer-list> <item android:right="5dp" android:top="5dp"> <shape> <corners android:radius="3dp" /> <solid android:color="#D6D6D6" /> </shape> </item> <item android:bottom="2dp" android:left="2dp"> <shape> <gradient android:angle="270" android:endColor="#E2E2E2" android:startColor="#BABABA" /> <stroke android:width="1dp" android:color="#BABABA" /> <corners android:radius="4dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> </item> </layer-list> </item> 

The problem is that you cannot achieve a true shadow appearance on a Button with this drawable type. You can use the code from another answer or nine patch images that already have a shadow on it.

Answer 2

Try it...

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape> <solid android:color="#000000" /> <corners android:radius="7dp" /> </shape> </item> <item android:bottom="5px" android:left="5px"> <shape> <solid android:color="#FF0000" /> <corners android:radius="7dp" /> </shape> </item> </layer-list> 

Answer 3

 Paint mShadow = new Paint(); // radius=10, y-offset=2, color=black mShadow.setShadowLayer(10.0f, 0.0f, 2.0f, 0xFF000000); // in onDraw(Canvas) canvas.drawBitmap(bitmap, 0.0f, 0.0f, mShadow); 

This code from Android Romain Guy is available here: http://www.devoxx.com/download/attachments/1705921/D8_C_10_09_04.pdf

Answer 4

You can try the following:

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- Bottom Shadow Darker Line--> <item> <shape android:shape="rectangle" > <solid android:color="@color/blue_darker" /> <corners android:radius="9dip" /> </shape> </item> <!-- Main Content Gradient --> <item android:bottom="1dip"> <shape android:shape="rectangle" android:dither="false" > <gradient android:startColor="@color/blue_dark" android:centerColor="@color/blue_medium" android:endColor="@color/blue_light" android:type="linear" android:angle="90"/> <corners android:radius="9dip" /> </shape> </item> <!-- Upper Shadow Dark Line --> <item android:bottom="1dip" android:left="1dip" android:right="1dip"> <shape android:shape="rectangle" > <gradient android:centerX="0.98" android:centerY="0" android:startColor="@android:color/transparent" android:centerColor="@android:color/transparent" android:endColor="@color/blue_medium" android:type="linear" android:angle="90"/> <corners android:radius="9dip" /> </shape> </item> 

Answer 5

you can try the following code to get a smooth shadow border for viewing:

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape> <solid android:color="#88000000" /> <corners android:radius="15dp" /> </shape> </item> <item android:bottom="5px" android:right="5px"> <shape> <solid android:color="#55B0CF" /> <stroke android:width="2dp" android:color="#ffffff" /> <corners android:radius="7dp" /> </shape> </item> 

Answer 6

In this case, I use lib https://github.com/dmytrodanylyk/shadow-layout

First you have to include it in gradle

 dependencies { compile 'com.github.dmytrodanylyk.shadow-layout:library:1.0.3' } 

then put your button in ShadowLayout

 <com.dd.ShadowLayout android:layout_width="wrap_content" android:layout_height="wrap_content" app:sl_shadowRadius="3dp" app:sl_shadowColor="@color/your_color"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> </com.dd.ShadowLayout> 

This is great for me)