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?

Button has default shadow. You can change to TextView which is a base class of Button and has less default values. — Emma, Jun 13 '17 at 17:43
For redundant border issue, I solves it with `style="?android:attr/borderlessButtonStyle" `. Anyone has any idea how to get back the default ripple effect? — Shuwn Yuan Tee, Jun 14 '17 at 01:40

score 53 · Accepted Answer · answered Jun 14 '17 at 10:27

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>

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](https://pastebin.com/TQuYYbg0) — FirstOne, Sep 17 '18 at 18:49
`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. — iCantC, Oct 31 '19 at 03:54

score 24 · Answer 2 · answered Aug 26 '18 at 18:57

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

score 12 · Answer 3 · answered Jun 13 '17 at 18:00

12

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)

answered Jun 13 '17 at 18:00

wick.ed

473
7
15

`style="?android:attr/borderlessButtonStyle" ` works too, thanks! – Shuwn Yuan Tee Jun 14 '17 at 01:38
1

it's not working for me – Muhammed Aydogan Aug 19 '22 at 16:48

score 6 · Answer 4 · answered Mar 03 '21 at 06:04

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"/>

score 3 · Answer 5 · edited Oct 31 '17 at 02:13

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" />

`style="@style/Base.Widget.AppCompat.Button.Borderless"` works, thanks! — Shuwn Yuan Tee, Jun 14 '17 at 01:37

score 1 · Answer 6 · answered Jan 04 '21 at 10:58

1

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

answered Jan 04 '21 at 10:58

Gk Mohammad Emon

6,084
3
42
42

score 0 · Answer 7 · answered Jun 13 '17 at 17:32

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);
    }
}

Android Button with rounded corners, ripple effect and no shadow

7 Answers7