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