How to set a ripple effect on textview or imagevie

2019-01-10 03:14发布

问题:

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

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


回答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)



回答3:

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


回答4:

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

add this into drawable

<?xml version="1.0" encoding="utf-8"?>
<!--this ribble animation only working for >= android version 21-->
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/click_efect" />

try this.



回答5:

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

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


回答6:

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



回答7:

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"


回答8:

Or you can try to use this library (android 9+): RippleEffect

Integration

dependencies {
    compile 'com.github.traex.rippleeffect:library:1.3'
}

Usage:

<com.andexert.library.RippleView
  android:id="@+id/more"
  android:layout_width="?android:actionBarSize"
  android:layout_height="?android:actionBarSize"
  android:layout_toLeftOf="@+id/more2"
  android:layout_margin="5dp"
  rv_centered="true">

  <ImageView
    android:layout_width="?android:actionBarSize"
    android:layout_height="?android:actionBarSize"
    android:src="@android:drawable/ic_menu_edit"
    android:layout_centerInParent="true"
    android:padding="10dp"
    android:background="@android:color/holo_blue_dark"/>

</com.andexert.library.RippleView>


回答9:

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.



回答10:

Best way is 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">


回答11:

try this. This is worked for me.

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