CODEWITHSUNDEEP
androidbuttonrippledrawable
android developer
android developer

Reputation: 116362

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

Background

On the dialer app of Android, when you start searching for something, and you click the arrow button on the left of the EditText, you get a circular ripple effect on it :

enter image description here

The problem

I've tried to have it too, but I got a rectangular one:

    <ImageButton
        android:id="@+id/navButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:background="?android:attr/selectableItemBackground"
        android:src="@drawable/search_ic_back_arrow"/>

The question

How do I make the button have a circular ripple effect when being clicked? Do I have to create a new drawable, or is there a built in way for that?

Upvotes: 164

Views: 100628

Answers (13)

Dipak Sharma
Dipak Sharma

Reputation: 976

Just Add this background to your view

"android:background=?android:attr/actionBarItemBackground"

Upvotes: 45

Rasoul Miri
Rasoul Miri

Reputation: 12222

update 2021:

you need use actionBarItemBackground for background

android:background="?android:attr/actionBarItemBackground"

Example:

 <androidx.appcompat.widget.AppCompatImageButton
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:background="?android:attr/actionBarItemBackground"
        android:src="@drawable/ic_copy" />

Upvotes: 9

Ali Eslami
Ali Eslami

Reputation: 83

just add this item in your activity xml

           <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="?android:attr/actionBarItemBackground"
                app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp" />

Upvotes: 7

Gk Mohammad Emon
Gk Mohammad Emon

Reputation: 6938

I also fixed this problem in one of my projects. android:foreground="?attr/selectableItemBackgroundBorderless" is responsible for the ripple effect, that's why it is set in the foreground and android:clipToPadding="false" will prevent the ripple effect cut off and make it rectangular.It will keep your ripple effect circular.

<ImageButton
        android:id="@+id/navButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:foreground="?attr/selectableItemBackgroundBorderless"
        android:clipToPadding="false"
        android:src="@drawable/search_ic_back_arrow"/>

Upvotes: 1

mihails.kuzmins
mihails.kuzmins

Reputation: 1380

In Kotlin / Java you can do the following

fun View.applyCircularRippleEffect() {
    val backgroundResId = context.getResource(android.R.attr.actionBarItemBackground)

    if (backgroundResId != 0) {
        setBackgroundResource(backgroundResId)
        isClickable = true
        isFocusable = true
    }
}

// getResource extension
fun Context.getResource(resourceId: Int): Int {
    val out = TypedValue()
    theme.resolveAttribute(resourceId, out, true)

    return out.resourceId
}

Upvotes: 0

Aminul Haque Aome
Aminul Haque Aome

Reputation: 2599

If you want ripple effect which will not cross the circle boundary, you can check this code. It works for me perfecrly. Just remember, you have to give id=@android:id/mask in ripple_blue.xml

<ImageButton
    android:id="@+id/send_password_to_mail_image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_blue"
    android:src="@drawable/ic_filter" />

ripple_blue.xml 

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorRipple">

    <item android:id="@android:id/mask">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

    <item android:id="@android:id/background">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

</ripple>

color.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <color name="colorWindowBackground">#F2F5FC</color>
    <color name="colorRipple">#0288d1</color>
</resources>

Upvotes: 3

duduCMT
duduCMT

Reputation: 51

Try:

android:background="@android:color/transparent"
android:clickable="true"
android:focusable="true"
android:foreground="?actionBarItemBackground"

Upvotes: 1

Anrimian
Anrimian

Reputation: 4477

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.

Upvotes: 126

100RaBH
100RaBH

Reputation: 301

If you want more generic XML files, I have two files:

1) btn_ripple_background with code:

<?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/ripple_circular_shape"/>
</selector>

2) ripple_circuler_shape with code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/btn_state_pressed_text_color"
    android:shape="oval">
    <solid android:color="@color/btn_state_pressed_text_color" />
</shape>

finally the usage:android:foreground="@drawable/ripple_btn_background"

Upvotes: 3

live-love
live-love

Reputation: 52366

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>

Upvotes: 31

Volodymyr Yatsykiv
Volodymyr Yatsykiv

Reputation: 3211

You can create circle ripple drawable using android:radius attribute in xml.

Example:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="your_color"
    android:radius="your_radius" />

Pay attention, that your your_radius should be less then your view width and height. For example: if you have view with size 60dp x 60dp your_radius should be near 30dp (width / 2 or height / 2).

Work on Android 5.0 and above.

Upvotes: 23

Thomas R.
Thomas R.

Reputation: 8073

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>

Upvotes: 56

bond
bond

Reputation: 11336

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.

Upvotes: 357

Related Questions