Android Button With Rounded Corners, Ripple Effect And No Shadow

Answer :

I finally solved it with below code. This achieve rounded corners for button. Also, for Android Version >= V21, it uses ripple effect. For earlier Android version, button color changes when it is clicked, based on android:state_pressed, android:state_focused, etc.

In layout xml file:

<Button     style="?android:attr/borderlessButtonStyle"     android:id="@+id/buy_button"     android:layout_width="0dp"     android:layout_weight="1"     android:layout_height="match_parent"     android:gravity="center"     android:background="@drawable/green_trading_button_effect"     android:textColor="@android:color/white"     android:text="BUY" /> 

For button onclick ripple effect (Android >= v21) :

drawable-v21/green_trading_button_effect.xml

<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android"     android:color="@color/ripple_material_dark">      <item android:id="@android:id/mask">         <shape android:shape="rectangle">             <solid android:color="@android:color/white" />             <corners android:radius="5dp" />         </shape>     </item>      <item android:drawable="@drawable/green_trading_button" /> </ripple> 

For earlier Android version, just change background color during onclick:

drawable/green_trading_button_effect.xml

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

drawable/green_trading_button.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">      <solid android:color="#ffa6c575"/>     <!-- rounded corners -->     <corners android:radius="5dp" /> </shape> 

drawable/green_trading_button_selected.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">      <solid android:color="#ffc5dca8"/>     <!-- corners corners -->     <corners android:radius="5dp" /> </shape> 

drawable/ripple_circle.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:drawable="@drawable/circle" android:state_pressed="true">         <shape android:shape="rectangle">             <corners android:bottomLeftRadius="25dp" android:bottomRightRadius="25dp" android:topLeftRadius="25dp" android:topRightRadius="25dp" />         </shape>     </item>     <item android:drawable="@android:color/transparent" /> </selector> 

drawablev21/ripple_circle.xml

<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android"     android:color="@color/ripple_white">     <item android:id="@android:id/mask">         <shape android:shape="rectangle">             <corners                 android:bottomLeftRadius="25dp"                 android:bottomRightRadius="25dp"                 android:topLeftRadius="25dp"                 android:topRightRadius="25dp" />             <solid android:color="?android:colorAccent" />         </shape>     </item> </ripple> 

drawable/button_circle_background.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">     <corners         android:bottomRightRadius="25dp"         android:topRightRadius="25dp"         android:bottomLeftRadius="25dp"         android:topLeftRadius="25dp"/>     <solid android:color="@color/colorAccent" /> </shape> 

drawable/circle.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">     <corners         android:bottomRightRadius="25dp"         android:topRightRadius="25dp"         android:bottomLeftRadius="25dp"         android:topLeftRadius="25dp"/>     <solid android:color="@color/ripple_white" /> </shape> 

Setting style and ripple to Button

<Button             android:id="@+id/choose_folder"             style="@style/Base.Widget.AppCompat.Button.Borderless"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_margin="8dp"             android:background="@drawable/button_circle_background"             android:foreground="@drawable/ripple_circle"             android:text="Chose Folder"             android:textColor="@android:color/white" /> 

inspired by link

this will add perfect round corners ripple effect to button with round cornered shape and also no shadow

gif of button press

Try setting this in your xml. This worked for me.

style="?android:attr/borderlessButtonStyle"  

Also, if you are targeting API level 21 and above you can use

android:stateListAnimator="@null" 

This link has more answers How to remove button shadow (android)