androidbuttonrounded-cornersripple

Android Button with rounded corners, ripple effect and no shadow


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.

rounded corner button

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?


Solution

  • 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>