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?

Raptorial

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 stackoverflow.com/help/how-to-ask – Streusel

Actually i want effect for text-view and image-view select/unselect effect. – Raptorial

have you tried searching for the same? – Streusel

Answer 1

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

Adriaadriaens

nice its worked with me on lollipop,but this way for which android android version? and does it work on pre-lollipop? – Bakemeier

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. – Gebelein

@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 – Subsist

On modern versions of android, this is now android:background="?android:attr/selectableItemBackground" – Roee

How can use this when I want a custom background ?? – Frightened

The difference between this with/without Borderless youtube.com/watch?v=wOjA8tS5sbc – Alleviate

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). – Howse

How do I change the ripple color? – Sunk

Thank you for this! btw if you want to use your own custom image use app:srcCompat="@drawable/ic_location" – Inbreed

Also, should be added android:focusable="true". – Bhopal

@BasheerAL-MOMANI What if we already have a background? How can we do it then? – Alvita

@MohammadZarei then use foreground ripple effect with the background. – Arlettaarlette

Answer 2

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)

Bramwell

Is there any difference in using selectableItemBackground vs selectableItemBackgroundBorderless – Fermanagh

I don't know why it was not bounded to borders and it expand through whole layout – Arnuad

@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) – Livengood

and also need to set this >>> android:focusable="true" – Wiggle

Answer 3

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"

Raptorial

Please notice that selectableItemBackgroundBorderless is API 21+. Below you can choose selectableItemBackground to avoid compatibility issue – Carriecarrier

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. – Murage

Answer 4

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"

Guidepost

Answer 5

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

Wrecker

Answer 6

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()
    }
})

Andean

nice! is there a Kotlin version of this? – Medallion

@Medallion yes. Sorry for delay – Andean

Answer 7

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

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

Flypaper

Answer 8

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

Quadricycle

Answer 9

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

Lithesome

Answer 10

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

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

Kursk

Answer 11

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.

Musca

Answer 12

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.

Thermoplastic

Answer 13

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

Roth

Answer 14

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

Abhenry

Answer 15

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"

Barbey

Answer 16

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

Gauze

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. – Heine