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?

Cesena

Button has default shadow. You can change to TextView which is a base class of Button and has less default values. – Bearing

For redundant border issue, I solves it with style="?android:attr/borderlessButtonStyle" . Anyone has any idea how to get back the default ripple effect? – Cesena

@Shuwn Yuan Tee You need to use custom ripple drawable. – Keilakeily

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>

Cesena

If you also want a 'disabled' in the ripple, add an item to the root of ripple and a selector to that item. Then, just use normally: an item for the content of the ripple in this answer here and one that is item state_enabled=false with the desired design. Something like: https://pastebin.com/TQuYYbg0 – Lesko

android:color="@color/ripple_material_dark" is a private resource, as a result, no ripple effect was being displayed. I added another colour in my @color folder and replaced android:color="@color/ripple_material_dark" with android:color="@color/my_gray_color" and ripple effect displayed smoothly. – Antares

Answer 2

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

Flier

Answer 3

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)

Digiovanni

style="?android:attr/borderlessButtonStyle" works too, thanks! – Cesena

it's not working for me – Midsummer

Answer 4

drawable file for design shape of the button intent of using use that's it.

drawable/ripper_button_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
  <item android:id="@android:id/mask">
    <shape android:shape="rectangle">
      <solid android:color="#000000" />
      <corners android:radius="15dp" />
    </shape>
  </item>
  <item android:drawable="@drawable/your_button_shape"></item>
</ripple>

use in XML

 <com.google.android.material.button.MaterialButton
                android:id="@+id/btnName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/ripper_button_effect"/>
     

Unlock

Answer 5

In your drawable file make a file like this:

button_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="15dp"
        android:topRightRadius="15dp"
        android:bottomLeftRadius="15dp"
        android:topLeftRadius="15dp"/>
    <solid android:color="@color/blue_500" />
</shape>

Increase radius to make it more curved.

And in your XML for button, give style borderless to button and background that you made it like in the top:

<Button
    android:id="@+id/task_action_btn"
    style="@style/Base.Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:background="@drawable/button_background"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Body1"
    android:textColor="@android:color/white" />

Caruthers

style="@style/Base.Widget.AppCompat.Button.Borderless" works, thanks! – Cesena

Answer 6

Just add android:clipToPadding="false" to your <Button></Button> views

Jalapa

Answer 7

Try this in code

Button buyButton = (Button) findViewById(R.id.buy_button);
Button sellButton = (Button) findViewById(R.id.sell_button);

hideShadow(buyButton);
hideShadow(sellButton);


public void hideShadow(Button button) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        button.setElevation(0);
    }
}

Helvetic