I want to set a ripple effect on textview and imageview in Android Studio. How can I do it?
-
1Please 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 – Anirudh Sharma Nov 2 '15 at 12:01
-
Actually i want effect for text-view and image-view select/unselect effect. – Vasant Nov 2 '15 at 12:04
-
have you tried searching for the same? – Anirudh Sharma Nov 2 '15 at 12:06
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"
/>
-
2nice 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
-
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 8:49
-
30On modern versions of android, this is now
android:background="?android:attr/selectableItemBackground"
– tmm1 Jun 16 '17 at 23:39 -
4
-
4The difference between this with/without
Borderless
youtube.com/watch?v=wOjA8tS5sbc – Gibolt Apr 20 '18 at 8:43
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)
-
2Is there any difference in using
selectableItemBackground
vsselectableItemBackgroundBorderless
– 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 6 '17 at 12:36
-
1
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"
-
4Please notice that
selectableItemBackgroundBorderless
is API 21+. Below you can chooseselectableItemBackground
to avoid compatibility issue – StevenTB Jan 30 '19 at 14:00
<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" />
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()
}
})
try this. This is worked for me.
android:clickable="true"
android:focusable="true"
android:background="?android:attr/selectableItemBackground"
-
1I already mentioned this before(stackoverflow.com/a/50347848/1954960) so instead of causing duplicate answer, please thumbs up my answer, Thank you! :) – Zafer Celaloglu Oct 1 '18 at 6:33
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."
addition to above answers is adding focusable to avoid UI editor's warning
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
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"
for circle ripple :
android:background="?attr/selectableItemBackgroundBorderless"
for rectangle ripple :
android:background="?attr/selectableItemBackground"
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.
android:background="?android:selectableItemBackground"
android:focusable="true"
android:clickable="true"
If above solutions are not working for your TextView then this will definitely work:
1. add this style
<style name="ClickableView">
<item name="colorControlHighlight">@android:color/white</item>
<item name="android:background">?selectableItemBackground</item>
</style>
2. use it just by
android:theme="@style/ClickableView"
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" />
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">
-
5oh 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