How to create button shadow in android design style

Question

New material design guides feature enhanced buttons that reduce good shadow. According to the SDK preview documentation, the elevation attribute will be available in the new SDK. However, is there any way to achieve this effect?

Answer 1

It worked for me.

Button layout

 <Button xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="@dimen/button_size" android:layout_height="@dimen/button_size" android:background="@drawable/circular_button_ripple_selector" android:textAppearance="?android:textAppearanceLarge" android:textColor="@color/button_text_selector" android:stateListAnimator="@anim/button_elevation"/> 

drawble / button_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/button_selected"/> <item android:state_pressed="true" android:drawable="@drawable/button_pressed"/> <item android:drawable="@drawable/button"/> </selector> 

Anim / button_elevation.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true" android:state_pressed="true"> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueFrom="2dip" android:valueTo="4dip" android:valueType="floatType" /> </item> <item> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueFrom="4dip" android:valueTo="2dip" android:valueType="floatType" /> </item> </selector> 

If you have a button in a rectangular shape, you do it here. But if you have a round or oval button, then it will look,

To remove corners from a round or oval shape, add this code to your .java file.

 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ........... int buttonSize = (int) getResources().getDimension(R.dimen.button_size); Outline circularOutline = new Outline(); circularOutline.setOval(0, 0, buttonSize, buttonSize); for (int i = 0; i < MAX_BUTTONS; i++) { Button button = ...... ....... button.setOutline(circularOutline); ........ } ..... } 

Angular form deleted !! Now it will look exactly like

Answer 2

You can use 9-patch images with shadows. Put the image in drawable - xxhdpi and set it as the background on a button or other element.

 android:background="@drawable/shadow_bg" 

Answer 3

Or you can use CardView as a button and use your CardView as a button and your setCardElevation method. Combined with touch events and ValueAnimator, you can get a nice animated shadow below the button.