How to create a shadow for a button

Question

As you can see in the image, I want a shadow for the Button . I created a Button with rounded corners. But the problem is that I cannot create a shadow behind this Button . How can I achieve this?

Answer 1

Use this approach to get your desired look.
button_selector.xml:

 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <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> </selector> 

And in your xml layout:

 <Button android:background="@drawable/button_selector" ... .. /> 

Answer 2

For Android version 5.0 and higher

try elevation for other kinds.

 android:elevation="10dp" 

For buttons

 android:stateListAnimator="@anim/button_state_list_animator" 

button_state_list_animator.xml - https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/anim/button_state_list_anim_material.xml

below version 5.0,

For all views

  android:background="@android:drawable/dialog_holo_light_frame" 

My conclusion:

Answer 3

If you target devices before Lollipop, you can use Shadow-Layout , as it’s easy, and you can use it in different types of layouts.

Add a shadow layout to the Gradle file :

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

At the top of the xml layout, where you have a button, add to the beginning :

 xmlns:app="http://schemas.android.com/apk/res-auto" 

it will provide custom attributes.

Then you place a shadow model around you. Button :

 <com.dd.ShadowLayout android:layout_marginTop="16dp" android:layout_width="wrap_content" android:layout_height="wrap_content" app:sl_shadowRadius="4dp" app:sl_shadowColor="#AA000000" app:sl_dx="0dp" app:sl_dy="0dp" app:sl_cornerRadius="56dp"> <YourButton .... /> </com.dd.ShadowLayout> 

Then you can configure the app: settings according to the desired tag.

Hope this helps.

Answer 4

Here is my cw_button_shadow.xml shadow cw_button_shadow.xml in drawable folder

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="false"> <layer-list> <!-- SHADOW --> <item> <shape> <solid android:color="@color/red_400"/> <!-- alttan gölge --> <corners android:radius="19dp"/> </shape> </item> <!-- BUTTON alttan gölge android:right="5px" to make it round--> <item android:bottom="5px" > <shape> <padding android:bottom="5dp"/> <gradient android:startColor="#1c4985" android:endColor="#163969" android:angle="270" /> <corners android:radius="19dp"/> <padding android:left="10dp" android:top="10dp" android:right="5dp" android:bottom="10dp"/> </shape> </item> </layer-list> </item> <item android:state_pressed="true"> <layer-list> <!-- SHADOW --> <item> <shape> <solid android:color="#102746"/> <corners android:radius="19dp"/> </shape> </item> <!-- BUTTON --> <item android:bottom="5px"> <shape> <padding android:bottom="5dp"/> <gradient android:startColor="#1c4985" android:endColor="#163969" android:angle="270" /> <corners android:radius="19dp"/> <padding android:left="10dp" android:top="10dp" android:right="5dp" android:bottom="10dp"/> </shape> </item> </layer-list> </item> </selector> 

My xml button, you can change the size and weight

 <Button android:text="+ add friends" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="4" android:background="@drawable/cw_button_shadow" /> 

Answer 5

I tried the code above and made my own shadow, which is a little closer to what I'm trying to achieve. Perhaps this will also help others.

 <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" /> <gradient android:angle="315" android:endColor="@android:color/transparent" android:startColor="@android:color/black" android:type="radial" android:centerX="0.55" android:centerY="0" android:gradientRadius="300"/> <padding android:bottom="1dp" android:left="0dp" android:right="3dp" android:top="0dp" /> </shape> </item> <item android:bottom="2dp" android:left="3dp"> <shape> <corners android:radius="1dp" /> <solid android:color="@color/colorPrimary" /> </shape> </item> </layer-list> </item> </selector> 

Answer 6

Try it if it works for you.

 android:background="@drawable/drop_shadow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="3dp" android:paddingTop="3dp" android:paddingRight="4dp" android:paddingBottom="5dp" 

Answer 7

You can try the following:

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <layer-list> <item android:left="1dp" android:top="3dp"> <shape> <solid android:color="#a5040d" /> <corners android:radius="3dip"/> </shape> </item> </layer-list> </item> <item> <layer-list> <item android:left="0dp" android:top="0dp"> <shape> <solid android:color="#99080d" /> <corners android:radius="3dip"/> </shape> </item> <item android:bottom="3dp" android:right="2dp"> <shape> <solid android:color="#a5040d" /> <corners android:radius="3dip"/> </shape> </item> </layer-list> </item> 

Answer 8

Example 9 patch image with shadow

After a lot of research, I found an easy method.

Create 9 patch images and apply them as a button or any other presentation background.

You can create 9 patch images with shadow using this website .

Put 9 patch images in your directory and apply it as the background for the button.

 mButton.setBackground(ContextCompat.getDrawable(mContext, R.drawable.your_9_patch_image);