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

Question

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 :

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?

possible answer is here https://stackoverflow.com/questions/33477025/how-to-set-a-ripple-effect-on-textview-or-imageview-on-android — Amrish Kakadiya, Oct 09 '17 at 05:30
Consider changing your selected answer to the one with the most upvotes, as it actually solves the problem — Jeff Barger, Apr 21 '20 at 20:33
@JeffBarger Why? Both work fine. There is no better one between them. — android developer, Apr 22 '20 at 07:43

score 354 · Answer 1 · answered Dec 21 '15 at 03:00

354

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.

answered Dec 21 '15 at 03:00

bond

11,236
7
48
62

1

Nice. Can I also set the color of it somehow? – android developer Dec 21 '15 at 13:16
@androiddeveloper you might want to create your own custom style for it using ripple for v21+ – bond Dec 21 '15 at 14:57
So I guess tinting won't help? – android developer Dec 21 '15 at 15:45
4

in API 23 the 'up' background appears to be half the size in comparison to selectbleItemBackgroundBorderless – snodnipper Mar 11 '16 at 10:40
1

@androiddeveloper, color can be set by setting colorControlHighlight like below in your styles.xml #F00 – bond Apr 16 '17 at 16:34
Above is the answer to show ripple, my previous comment was for setting different ripple color than the default color. – bond Apr 17 '17 at 14:32
how to set it in java? android.R.attr.selectableItemBackgroundBorderless didn't work – Abduaziz Kayumov Oct 05 '17 at 21:08
@bond how can i make this same effect with custom colors – Mateen Chaudhry Jul 30 '18 at 06:40
7

If you are using it inside other layouts, you might need `android:clipChildren="false"` in the layouts as well to allow the animation to propagate. – Tanasis Nov 26 '18 at 18:28
@AbduazizKayumov It depends how you try it. Use something like that: https://stackoverflow.com/a/27020758/878126 – android developer Mar 20 '19 at 08:51
this solution is great for static images. However, I'm using an AppCompatImageView with frame-animation and the background is used for the animation, so this lovely one-liner doesn't work with that. I've tried `android:foreground="?selectableItemBackgroundBorderless"` and it gives a ripple, however, the ripple effect reveals a square - which is ugly. – Someone Somewhere Apr 22 '19 at 23:15
This should be the accepted answer. Worked on imageview with circular src drawable – Garbit Jan 06 '20 at 19:32
4

It's not circular with ImageView in Android 9. Its square – Kishan Solanki May 01 '20 at 14:55
It is not working with the new MaterialComponents theme. `Theme.MaterialComponents` – Bishwajyoti Roy Oct 28 '20 at 14:27
If the ripple effect is not showing in dark mode then try adding `android:theme="@style/Theme.AppCompat.Light.DarkActionBar"` in your view – Aditya vikram Shekhawat Jan 02 '22 at 07:40

Anrimian · Answer 2 · 2019-07-08T08:40:37.413

123

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.

edited Jul 08 '19 at 08:40

answered Jan 29 '18 at 13:40

Anrimian

4,257
4
22
30

Any way to customize it? For example the color? Maybe something in styles? Or even more specifically in the view XML tag itself? – android developer Jan 29 '18 at 13:44
I do not know, today I solved this problem and the answers above did not work as I needed. I assume that the color can be customized in styles, but definitely not in the view. – Anrimian Jan 29 '18 at 13:53
If you figure it out, please let me know. Could be useful. – android developer Jan 29 '18 at 15:11
1

This is exactly the right effect I'm looking for. By the way, can you mention where to find this attribute, it seems not be documented. – Jack Wang Oct 14 '18 at 21:30
2

Answers the OP question. Shoud be marked as best answer. +1 – Corbella Nov 21 '18 at 12:22
@JackWang it is in "?attr/actionBarItemBackground" – Meysam Hadigheh May 20 '19 at 09:13
2

@MeysamHadigheh `?` is shortcut for `?attr/` – musooff Sep 16 '19 at 01:58
This is the BEST answer – zaitsman Feb 01 '22 at 01:42

score 56 · Answer 3 · edited Sep 13 '16 at 23:55

56

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>

edited Sep 13 '16 at 23:55

Etienne Lawlor

6,817
18
77
89

answered Aug 11 '15 at 12:29

Thomas R.

7,988
3
30
39

It's something in my code. You can use your colors :) – Thomas R. Aug 11 '15 at 12:30
How would I use the default selector in case it's on pre-Lollipop ? Also, does it use the same colors as the one on the dialer? – android developer Aug 11 '15 at 12:32
2

You can put the ripple drawable in your drawables-v21 folder. And for pre L use a simple state drawable. Use the same file name and put it into the drawable (default) folder. – Thomas R. Aug 11 '15 at 12:35
I mean, what should it have for pre-Lollipop, inside its drawable file? Also, please answer about the color. Is it possible to use the same one that's used for "selectableItemBackground" ? – android developer Aug 11 '15 at 12:39
Ripple is not available in pre-lollipop. So in the drawable file of pre-lollipop, ordinary button drawable is needed. – capt.swag Aug 11 '15 at 12:40
2

You can also create a style. In values-v21 folder create a new style and set the ripple drawable as background. And for pre L, i.e. in your values folder styles.xml put as background the "selectableItemBackground" attribute for the same style. – Thomas R. Aug 11 '15 at 12:46
@ThomasR. Can you please show exactly what to put? Also, what's the value of "grey_15" ? – android developer Aug 16 '15 at 09:15
According to my tests, this works only if the button has a square shape (width==height). when it's not, I get an elliptic shape. I've even tried to set the size of the drawable with equal width and height, but I still get this issue. How come? – android developer Jan 05 '16 at 13:33
require api level 21 :) – Jithu P.S Sep 21 '16 at 06:03
1

If you want the same ripple color as the other default ripple effects used in the app, use "?attr/colorControlHighlight" as the color. – alexbchr Sep 20 '17 at 20:03
I recommend to change the shape from oval to rectangle and then within the shape add something like – Panther Dec 02 '21 at 14:25

Dipakk Sharma · Answer 4 · 2022-06-12T15:02:36.580

45

Just Add this background to your view

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

edited Jun 12 '22 at 15:02

answered Jan 30 '19 at 12:33

Dipakk Sharma

976
1
8
11

live-love · Accepted Answer · 2018-11-16T16:17:16.133

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>

What happened if it is a layer list? – Gk Mohammad Emon Nov 04 '20 at 19:09 — Gk Mohammad Emon, Nov 04 '20 at 19:09

score 22 · Answer 6 · answered Nov 29 '16 at 10:23

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.

Ali Eslami · Answer 7 · 2021-03-09T22:16:55.157

7

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

edited Mar 09 '21 at 22:16

answered Mar 01 '20 at 13:01

Ali Eslami

83
1
6

1

Seems identical to this: https://stackoverflow.com/a/54440773/878126 . – android developer Mar 01 '20 at 14:16

score 7 · Answer 8 · answered Jun 20 '21 at 13:01

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

score 3 · Answer 9 · answered Jan 11 '19 at 14:04

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"

score 3 · Answer 10 · answered Mar 10 '20 at 07:42

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>

score 1 · Answer 11 · answered Nov 17 '19 at 04:16

1

Try:

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

answered Nov 17 '19 at 04:16

duduCMT

41
4

2

Please don't post only code as an answer, but include an explanation what your code does and how it solves the problem of the question. Answers with an explanation are generally of higher quality, and are more likely to attract upvotes. – Mark Rotteveel Nov 17 '19 at 10:13
Smoother than setting actionBarItemBackground as background. But still not exactly same as action bar animation itself. – coolcool1994 May 05 '20 at 01:16

Gk Mohammad Emon · Answer 12 · 2021-01-04T16:24:08.437

1

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

edited Jan 04 '21 at 16:24

answered Jan 04 '21 at 11:14

Gk Mohammad Emon

6,084
3
42
42

Not sure if you can put comments inside this way, and even then, you probably wanted to put each above. In addition, doesn't using `selectableItemBackgroundBorderless` mean it will be quite large for the case I've show (in a small area) ? Anyway, how do you change the color of the ripple this way? – android developer Jan 04 '21 at 15:57

mihails.kuzmins · Answer 13 · 2020-05-28T09:38:55.593

0

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
}

edited May 28 '20 at 09:38

answered May 02 '20 at 17:46

mihails.kuzmins

1,140
1
11
19

context.getResource not found – Rahul Mandaliya May 28 '20 at 09:08
@RahulMandaliya thank you for the comment. My bad, it was my custom extension method. Added it to the answer – mihails.kuzmins May 28 '20 at 09:39

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

Background

The problem

The question

13 Answers13

Just Add this background to your view

Linked