如何为Android 5.0以下版本创建涟漪效果

Question

如何应用类似这样的波纹效果

我已经在app/build.gradle中添加了依赖项

app/build.gradle

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

build.gradle

allprojects{
    repositories{
        jcenter()
        maven(url "https://jitpack.io" }

XML文件：

<com.andexert.library.RippleView
        android:id="@+id/rect1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
  <Button
      android:id="@+id/enterButton"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="Save your user name" />
 </com.andexert.library.RippleView>

Java类文件

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.save_user);
    editText=(EditText) findViewById(R.id.userNameEditText);
    button=(Button) findViewById(R.id.enterButton);

    sharedPreferences=getSharedPreferences(SHARED_NAME_STRING, MODE_PRIVATE);
    String userNameString=sharedPreferences.getString(USER_NAME_STRING, "");

    editText.setText(userNameString);

    button.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            String string=editText.getText().toString();
            Intent intent=new Intent(SaveUser.this, MainActivity.class);
            intent.putExtra("user", string);

            SharedPreferences.Editor editor=sharedPreferences.edit();
            editor.putString(USER_NAME_STRING, string);
            editor.commit();

            startActivity(intent);

        }
    });
}

它可以工作，但我的问题是在涟漪效果完成之前打开了另一个活动，并且当我按返回按钮时，剩余的涟漪效果才完成。我该如何解决？？

- Amrita Stha

Answer 1

对于棒棒糖(API>21)，请在drawable-v21中创建btn_ripple_effect.xml文件并添加以下代码

 <?xml version="1.0" encoding="utf-8"?>

    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:color="?android:colorAccent"
        tools:targetApi="lollipop">
        <item android:drawable="@color/cancel_btn_clr" /> <!-- default -->
        <item android:id="@android:id/mask">
            <shape android:shape="rectangle">
                <solid android:color="?android:colorAccent" />
            </shape>
        </item>
    </ripple>

对于5.0以下的版本（API<21），在drawable文件夹中创建btn_ripple_effect.xml文件，并放入以下代码

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/colorAccent"></solid>
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="@color/cancel_btn_clr"></solid>
        </shape>
    </item>
</selector>

按照下面的方式创建按钮

<Button
                    android:id="@+id/button3"
                    style="@style/cancel_btn_style"
                    android:layout_marginLeft="50dp"
                    android:text="Cancel"
                    />

将此添加到您的style.xml中

          <style name="cancel_btn_style" parent="Theme.AppCompat">
<item name="android:textSize">15sp</item>
<item name="android:textColor">#ffffff</item>
<item name="android:layout_height">36dp</item>
<item name="android:layout_width">90dp</item>
<item name="android:background">@drawable/btn_ripple_effect</item>

- user5439728

---

对于早期的设备，btn_ripple_effect.xml 中的父标签是什么？ - Rohit Singh

@RohitSingh 应该是一个选择器。 - Sohayb Hassoun

这个解决方案不需要任何外部依赖，因此它是一个更好的答案。 - 0xPixelfrost

它甚至没有产生涟漪效果，只有背景改变了。 - juztcode

Answer 2

你可以尝试使用这个库 balysv/material-ripple。

在你的 gradle 中添加这行代码：

compile 'com.balysv:material-ripple:1.0.2'

这就是如何做到的：

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

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="Button inside a ripple"/>
</com.balysv.materialripple.MaterialRippleLayout>

- Farouk Touzi

---

您可以完美地在SDK 8中使用它，在库的描述中，搜索支持Android API版本<14 ;) - Farouk Touzi

LinearLayout 应该是 MaterialRippleLayout 的父布局。 - Farouk Touzi

这不是一个好主意，因为它只能在xml方面支持一个子元素。想象一下，如果你要对100个按钮做同样的操作，会发生什么！而且显然它不能支持Java代码来实现涟漪效果。我已经测试了一个按钮，但是我无法得到良好的结果。 - SAYE

Answer 3

对于棒棒糖(API>21)，请在drawable-v21目录下创建btn_ripple_effect.xml文件，并放入以下代码：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f8c7c9c8"
    tools:targetApi="lollipop">

    <item android:id="@android:id/mask">

        <shape android:shape="oval">
            <corners android:radius="@dimen/dp10" />
            <solid android:color="#f8ced6d2" />

        </shape>
    </item>
</ripple>

对于早期Lollipop版本（API<21），在drawable文件夹中创建btn_ripple_effect.xml文件，并添加以下代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#f8ced6d2"/>
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="@color/transparent"/>
        </shape>
    </item>
</selector>

像这样在ImageView上使用它：

<ImageView
  android:id="@+id/imageViewOffer"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerVertical="true"
  android:background="@drawable/btn_ripple_effect"
  android:src="@mipmap/ic_offers"/>

- Neelu Agrawal

---

这不是涟漪效应。 - SamHoque

Answer 4

我知道这已经有点老了，但是你可以在库提供的onRippleCompleteListener中执行你的操作。像这样:

rippleView.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {

@Override
public void onComplete(RippleView rippleView) {
//Your code here...
}
});

希望这能有所帮助。 :)

- Varun Ramani

Answer 5

使用appcompat库。

com.android.support:appcompat-v7:22.1.1

扩展 "Base.TextAppearance.AppCompat.Button"

<style name="BrowseContentButton" parent="Base.TextAppearance.AppCompat.Button">
    <item name="android:textColor">@color/grey_0</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">48dp</item>
</style>

应用样式。

 <Button
        android:id="@+id/browseMultimedia"
        style="@style/BrowseContentButton"
        android:layout_below="@id/browseGuidelines"
        android:layout_toRightOf="@+id/divider"
        android:text="@string/browse_multimedia"
        />

- rahul.ramanujam

---

所有这些都可以工作，但我的问题是在涟漪效果完成之前另一个活动就打开了，当我按下返回按钮时，剩余的涟漪才会完成。我该如何解决它？ - Amrita Stha

我已经上传了Java文件，其中包括XML文件和依赖项。但是当单击按钮时，涟漪效果尚未完成，另一个页面（SaveUser页面）就会打开。如何解决这个问题？ - Amrita Stha

哪个涟漪？使用这段代码，你无法在安卓5.0以下的系统上获得它！ - Leo DroidCoder