如何在 Android 上的 textview 或 imageview 上設置漣漪效果？

Question

我想在 Android Studio 中設置 textview 和 imageview 的漣漪效果。 我該怎么做？

Answer 1

參考：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"
/>

Answer 2

如果您希望波紋限制為 TextView/ImageView 的大小，請使用：

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

（我覺得更好看）

Answer 3

請參閱下面的答案以了解漣漪效應。

Textview 或視圖上的波紋：

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

Button 或 Imageview 上的波紋：

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

Answer 4

添加android:clickable="true" android:focusable="true"

對於漣漪效應

android:background="?attr/selectableItemBackgroundBorderless"

對於可選效果

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

對於按鈕效果

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

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

將此添加到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" />

Answer 6

您可以使用android-ripple-background

啟動效果

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

停止動畫：

rippleBackground.stopRippleAnimation();

對於科特林

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

Answer 7

對於圓形波紋： android:background="?attr/selectableItemBackgroundBorderless"

對於矩形波紋： android:background="?attr/selectableItemBackground"

Answer 8

如果@Bikesh M Annur （此處）發布的投票良好的解決方案對您不起作用，請嘗試使用：

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

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

此外，當使用android:clickable="true"添加android:focusable="true"因為：

"聲明為可點擊但未聲明為可聚焦的小部件無法通過鍵盤訪問。 "

Answer 9

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

Answer 10

嘗試這個。 這對我有用。

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

Answer 11

除了上述答案之外，還添加了可聚焦以避免 UI 編輯器的警告

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

Answer 12

如果上述解決方案不適用於您的TextView ，那么這肯定會起作用：

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

在這里， style="?attr/buttonBarButtonStyle"和app:backgroundTint="@android:color/transparent"將使該按鈕成為透明背景，使其看起來像 TextView，其他一切都將自動完成。

Answer 13

或者，您可以嘗試使用此庫（android 9+）： RippleEffect

積分

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

用法：

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

Answer 14

除了@Bikesh M Annur 的回答，請務必更新您的支持庫。 以前我使用的是 23.1.1，但什么也沒發生。 將其更新到 23.3.0 就可以了。

Answer 15

其添加的最佳方式：

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

Answer 16

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

Answer 17

當您設置了一些背景或背景顏色屬性時，selectableItemBackgroundBorderless 不起作用。 它不適合我。

android:background="?attr/selectableItemBackgroundBorderless"

但好消息是它也可以在前台工作。

android:foreground="?attr/selectableItemBackgroundBorderless"

Answer 18

使用庫。 這是其中之一。 只需添加其依賴項並將以下代碼放在 xml 中每個需要漣漪效應的元素之前：

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