Android Button with rounded corners, ripple effect and no shadow Android Button with rounded corners, ripple effect and no shadow android android

Android Button with rounded corners, ripple effect and no shadow


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)