Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a circular ripple on a button when it's being clicked?

If you are using AppCompat theme, then you could set the background of the view as:

android:background="?selectableItemBackgroundBorderless"

This will add circular ripple on 21 and above and square background on below 21.


Another attribute with round ripple effect, specially for action bar:

android:background="?actionBarItemBackground"

UPD: Ripple color can be changed by this attribute:

<!--somewhere in styles-->
<item name="colorControlHighlight">your_color_here</item>

But keep in mind, this attribute applies to all default ripple effects.


Create and set a ripple drawable as background. Something like this.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey_15">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorPrimary"/>
        </shape>
        <color android:color="@color/white"/>
    </item>
</ripple>

Just Add this background to your view

android:background=?android:attr/actionBarItemBackground


If you already have a background image, here is an example of a ripple that looks close to selectableItemBackgroundBorderless:

            <ImageButton
                android:id="@+id/btn_show_filter_dialog"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:background="@drawable/ic_filter_state"/>

ic_filter_state.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:state_enabled="true"
        android:drawable="@drawable/state_pressed_ripple"/>
    <item
        android:state_enabled="true"
        android:drawable="@drawable/ic_filter" />
</selector>

state_pressed_ripple.xml: (opacity set to 10% on white background) 1AFFFFFF

 <?xml version="1.0" encoding="UTF-8"?>    
    <ripple xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="oval">
                <solid android:color="#1AFFFFFF"/>
            </shape>
            <color android:color="#FFF"/>
        </item>
    </ripple>