How to set a ripple effect on textview or imageview on Android?

Question

I want to set a ripple effect on textview and imageview in Android Studio. How can I do it?

Please elaborate your question first.What actually you need and what have you tried so far.Simply saying that i want ripple effect makes it a very broad question.You can also give some link for reference as to what you want.Also see http://stackoverflow.com/help/how-to-ask — Anirudh Sharma, Nov 02 '15 at 12:01
Actually i want effect for text-view and image-view select/unselect effect. — Vasant, Nov 02 '15 at 12:04

Bikesh M · Accepted Answer · 2016-05-26T10:37:42.523

354

Ref : http://developer.android.com/training/material/animations.html,

http://wiki.workassis.com/category/android/android-xml/

<TextView
.
.
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
/>

<ImageView
.
.
.
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
/>

edited May 26 '16 at 10:37

answered Dec 07 '15 at 08:09

Bikesh M

8,163
6
40
52

3

nice its worked with me on lollipop,but this way for which android android version? and does it work on pre-lollipop? – Basheer AL-MOMANI Mar 25 '16 at 22:56
1

If you set a click listener on the TextView, you do not need to add android:clickable="true" to the view in the xml file. – Dick Lucas Aug 31 '16 at 20:25
2

@Richard I've had an issue with KitKat (or ICS) a year ago, and click listeners didn't work without android:clickable="true" for that version – DoruChidean Sep 26 '16 at 08:49
41

On modern versions of android, this is now `android:background="?android:attr/selectableItemBackground"` – tmm1 Jun 16 '17 at 23:39
5

How can use this when I want a custom background ?? – mrid Sep 17 '17 at 12:33
6

The difference between this with/without `Borderless` https://www.youtube.com/watch?v=wOjA8tS5sbc – Gibolt Apr 20 '18 at 08:43
3

`selectableItemBackgroundBorderless` shows a circle regardless of the view's size, and `selectableItemBackground` shows a grey ripple confined in the view's size (in my case, square). – Damn Vegetables Sep 25 '19 at 18:08
1

How do I change the ripple color? – nayan dhabarde Apr 04 '20 at 06:00
Thank you for this! btw if you want to use your own custom image use app:srcCompat="@drawable/ic_location" – dave o grady Apr 30 '20 at 22:55
Also, should be added `android:focusable="true"`. – Amg91 May 26 '20 at 21:01
@BasheerAL-MOMANI What if we already have a background? How can we do it then? – Mohammad Zarei Feb 03 '22 at 14:09
@MohammadZarei then use foreground ripple effect with the background. – Olek Aug 15 '22 at 11:40

score 103 · Answer 2 · answered May 06 '16 at 01:08

103

If you want the ripple to be bounded to the size of the TextView/ImageView use:

<TextView
android:background="?attr/selectableItemBackground"
android:clickable="true"/>

(I think it looks better)

answered May 06 '16 at 01:08

Micro

10,303
14
82
120

3

Is there any difference in using ```selectableItemBackground``` vs ```selectableItemBackgroundBorderless``` – rakesh kashyap Sep 30 '16 at 16:29
I don't know why it was not bounded to borders and it expand through whole layout – VSB Nov 22 '16 at 18:29
5

@rakeshkashyap the difference is that selectableItemBackground will keep the ripple within it's view size(width/height). selectableItemBackgroundBorderless will expand it's ripple over other views (like the official calculator app ripple) – Tudor Feb 06 '17 at 12:36
1

and also need to set this >>> android:focusable="true" – Amos Nov 21 '18 at 00:20

score 43 · Answer 3 · answered Aug 03 '18 at 10:31

43

Please refer below answer for ripple effect.

ripple on Textview or view :

android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackgroundBorderless"

ripple on Button or Imageview :

android:foreground="?android:attr/selectableItemBackgroundBorderless"

answered Aug 03 '18 at 10:31

Vasant

3,475
3
19
33

4

Please notice that `selectableItemBackgroundBorderless` is API 21+. Below you can choose `selectableItemBackground` to avoid compatibility issue – StevenTB Jan 30 '19 at 14:00
Thanks! It has effect on API 23+. Also instead you can use `?attr/selectableItemBackgroundBorderless` and `?attr/selectableItemBackground`. I think, `android:clickable` and `android:focusable` are optional. – CoolMind Oct 14 '21 at 07:43

silver_hawk · Answer 4 · 2020-04-03T13:06:03.797

18

Add android:clickable="true" android:focusable="true"

For Ripple Effect

android:background="?attr/selectableItemBackgroundBorderless"

For Selectable Effect

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

For Button effect

android:adjustViewBounds="true" style="?android:attr/borderlessButtonStyle"

edited Apr 03 '20 at 13:06

answered Apr 03 '20 at 12:48

silver_hawk

189
1
4

score 12 · Answer 5 · edited Oct 29 '20 at 00:04

<TextView
    android:id="@+id/txt_banner"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:layout_below="@+id/title"
    android:background="@drawable/ripple_effect"
    android:gravity="center|left"
    android:paddingLeft="15dp"
    android:text="@string/banner"
    android:textSize="15sp" />

Add this into drawable

<?xml version="1.0" encoding="utf-8"?>

<!--this ripple animation only working for >= android version 21 -->

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

score 11 · Answer 6 · edited Feb 08 '21 at 12:32

11

You can use android-ripple-background

Start Effect

final RippleBackground rippleBackground=(RippleBackground)findViewById(R.id.content);
ImageView imageView=(ImageView)findViewById(R.id.centerImage);
imageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        rippleBackground.startRippleAnimation();
    }
});

Stop animation:

rippleBackground.stopRippleAnimation();

For KOTLIN

val rippleBackground = findViewById(R.id.content) as RippleBackground
val imageView: ImageView = findViewById(R.id.centerImage) as ImageView
imageView.setOnClickListener(object : OnClickListener() {
    fun onClick(view: View?) {
        rippleBackground.startRippleAnimation()
    }
})

edited Feb 08 '21 at 12:32

Zain

37,492
7
60
84

answered Nov 02 '15 at 11:57

IntelliJ Amiya

74,896
15
165
198

nice! is there a Kotlin version of this? – rengineer Nov 25 '19 at 03:40
@rengineer yes. Sorry for delay – IntelliJ Amiya Sep 30 '20 at 06:44

score 8 · Answer 7 · answered Apr 22 '20 at 07:01

8

for circle ripple : android:background="?attr/selectableItemBackgroundBorderless"

for rectangle ripple : android:background="?attr/selectableItemBackground"

answered Apr 22 '20 at 07:01

Bita Mirshafiee

600
8
14

score 7 · Answer 8 · edited Sep 24 '20 at 07:42

7

android:background="?android:selectableItemBackground"
android:focusable="true"
android:clickable="true"

edited Sep 24 '20 at 07:42

BDL

21,052
22
49
55

answered Sep 24 '20 at 06:31

Areeb Momin

199
4
4

score 6 · Answer 9 · answered Dec 07 '17 at 19:20

In the case of the well voted solution posted by @Bikesh M Annur (here) doesn't work to you, try using:

<TextView
...
android:background="?android:attr/selectableItemBackgroundBorderless"
android:clickable="true" />

<ImageView
...
android:background="?android:attr/selectableItemBackgroundBorderless"
android:clickable="true" />

Also, when using android:clickable="true" add android:focusable="true" because:

"A widget that is declared to be clickable but not declared to be focusable is not accessible via the keyboard."

score 4 · Answer 10 · answered May 15 '18 at 10:24

4

addition to above answers is adding focusable to avoid UI editor's warning

android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"

answered May 15 '18 at 10:24

Zafer Celaloglu

1,438
1
17
28

Kishan Solanki · Answer 11 · 2022-03-03T13:09:43.567

If above solutions are not working for your TextView then this will definitely work:

    <com.google.android.material.button.MaterialButton
        style="?attr/buttonBarButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="0dp"
        android:minHeight="0dp"
        android:paddingHorizontal="@dimen/padding_8dp"
        android:text="Clickable Text"
        android:textColor="your text color"
        app:backgroundTint="@android:color/transparent"
        app:rippleColor="ripple effect color" />

Here, style="?attr/buttonBarButtonStyle" and app:backgroundTint="@android:color/transparent" will make this button as transparent background so that it will look like TextView and everything else will be done automatically.

score 1 · Answer 12 · answered Jul 26 '16 at 06:56

1

In addition to @Bikesh M Annur's answer, be sure to update your support libraries. Previously I was using 23.1.1 and nothing happened. Updating it to 23.3.0 did the trick.

answered Jul 26 '16 at 06:56

Mark Pazon

6,167
2
34
50

score 0 · Answer 13 · answered Dec 07 '19 at 16:02

The best way its add:

    <ImageView
        android:id="@+id/ivBack"
        style="?attr/actionButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:src="@drawable/ic_back_arrow_black"
        android:tint="@color/white" />

score 0 · Answer 14 · answered May 09 '22 at 10:37

<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@android:integer/config_shortAnimTime">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/textHint"/>
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape>
            <solid android:color="@android:color/transparent"/>
        </shape>
    </item>
</selector>




<TextView
      android:id="@+id/t9_key_6"
      android:layout_height="80dp"
      android:text="@string/number_six"
      android:background="@drawable/keyboard_button_bg"
      android:textSize="30sp" />

score 0 · Answer 15 · answered Jun 01 '22 at 14:41

selectableItemBackgroundBorderless does not work when you have some background or background color property set. It wasn't working for me.

android:background="?attr/selectableItemBackgroundBorderless"

but the good news is that it works on the foreground as well.

android:foreground="?attr/selectableItemBackgroundBorderless"

Amirhossein Naghshzan · Answer 16 · 2019-11-24T00:36:02.057

-5

Using libraries. This is one of them. Just add its dependency and put below code in xml before each elements that needs ripple effect:

<com.balysv.materialripple.MaterialRippleLayout
android:id="@+id/ripple"
android:layout_width="match_parent"
android:layout_height="wrap_content">

edited Nov 24 '19 at 00:36

answered Nov 02 '15 at 19:58

Amirhossein Naghshzan

1,178
8
17

5

oh please no, it's not the best way because you have less control over it and it's widely supported in the Android SDK itself. If anyone reads this I recommend to either look at the comment of @Bikesh or Karthik if you want to control the color. – Dion Segijn Jan 25 '17 at 12:35

How to set a ripple effect on textview or imageview on Android?

16 Answers16

Linked