Android Button with rounded corners, ripple effect and no shadow

Question

I am trying to build Android Button with rounded corners. But along the rounded corners (bottom left & right corner), there is unwanted grey color shadow around it.

Here's my code:

drawable/my_button.xml

<?xml version="1.0" encoding="utf-8"?>   <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item>       <shape android:shape="rectangle">         <stroke android:width="1dp" android:color="#ffa6c575" />         <solid android:color="#ffa6c575"/>         <corners android:radius="15dp" />       </shape>     </item>   </selector> 

Then in layout xml file, I have:

<LinearLayout   <Button     android:id="@+id/buy_button"     android:layout_width="0dp"     android:layout_weight="1"     android:layout_height="35dp"     android:layout_gravity="center"     android:background="@drawable/my_button"     android:textColor="@android:color/white"     android:text="BUY" />    <View     android:layout_width="10dp"     android:layout_height="match_parent"     android:background="@android:color/transparent" >   </View>    <Button     android:id="@+id/sell_button"     android:layout_width="0dp"     android:layout_weight="1"     android:layout_height="35dp"     android:layout_gravity="center"     android:background="@drawable/my_button"     android:textColor="@android:color/white"     android:text="SELL" />  </LinearLayout> 

1) How can I get rid of the extra grey color shadow around rounded corners (bottom left & right corner)?

2) Button has default ripple effect. How can I maintain the default ripple effect?

Answer 1

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>