How to set a ripple effect on textview or imageview on Android?
AndroidAndroid ImageviewTextviewMaterial DesignAndroid Problem Overview
I want to set a ripple effect on textview and imageview in Android Studio. How can I do it?
Android Solutions
Solution 1 - Android
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"
/>
Solution 2 - Android
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)
Solution 3 - Android
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"
Solution 4 - Android
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"
Solution 5 - Android
<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" />
Solution 6 - Android
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()
}
})
Solution 7 - Android
for circle ripple :
android:background="?attr/selectableItemBackgroundBorderless"
for rectangle ripple :
android:background="?attr/selectableItemBackground"
Solution 8 - Android
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."
Solution 9 - Android
android:background="?android:selectableItemBackground"
android:focusable="true"
android:clickable="true"
Solution 10 - Android
addition to above answers is adding focusable to avoid UI editor's warning
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
Solution 11 - Android
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.
Solution 12 - Android
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.
Solution 13 - Android
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" />
Solution 14 - Android
<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" />
Solution 15 - Android
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">