这是在棒棒糖前设备上产生涟漪效应的正确方法吗？

Question

Material Design is out, and with it are some of the new magic features that have been hard to code using ordinary skills, which are supposedly only found in the Silicon Valley. Pun intended.

Anyway, I'm trying to get the Ripple effect working on API<21, that is, pre-lollipop devices. In its most literal sense, the ripple effect, water, for that matter.

Here's what I have tried. The approach is simple. I colour three layouts gray, three white, then the other three white and the three gray and then shut up.

However, the implementation has not worked. Only the second runnable runs and the effect is not materialised.

Here's my activity.java :

package dreamnyc.ripple;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;


public class MainActivity extends ActionBarActivity {
    public String TAG = "okay";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final Button b;
        final RelativeLayout la1;
        final LinearLayout la2, la3, la4, la5, la6, la7;

        la1 = (RelativeLayout) findViewById(R.id.l1);
        la2 = (LinearLayout) findViewById(R.id.l2);
        la3 = (LinearLayout) findViewById(R.id.l3);
        la4 = (LinearLayout) findViewById(R.id.l4);
        la5 = (LinearLayout) findViewById(R.id.l5);
        la6 = (LinearLayout) findViewById(R.id.l6);
        la7 = (LinearLayout) findViewById(R.id.l7);

        b = (Button) findViewById(R.id.button);
        b.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                la7.setBackgroundColor(Color.LTGRAY);


                final Runnable r1 = new Runnable() {
                    @Override
                    public void run() {
                        synchronized (this) {
                            try {

                                la7.setBackgroundColor(Color.WHITE);
                                la6.setBackgroundColor(Color.LTGRAY);
                                la4.setBackgroundColor(Color.LTGRAY);
                                la2.setBackgroundColor(Color.LTGRAY);
                                la5.setBackgroundColor(Color.WHITE);
                                la3.setBackgroundColor(Color.WHITE);
                                la1.setBackgroundColor(Color.WHITE);
                                wait(100);


                            } catch (InterruptedException e) {

                                Log.d(TAG, "exception encountered" + e);

                            }

                            synchronized (this) {
                                try {


                                    final Runnable r2 = new Runnable() {
                                        @Override
                                        public void run() {
                                            la7.setBackgroundColor(Color.WHITE);
                                            la5.setBackgroundColor(Color.LTGRAY);
                                            la3.setBackgroundColor(Color.LTGRAY);
                                            la1.setBackgroundColor(Color.LTGRAY);
                                            la6.setBackgroundColor(Color.WHITE);
                                            la4.setBackgroundColor(Color.WHITE);
                                            la2.setBackgroundColor(Color.WHITE);

                                        }


                                    };
                                    wait(10);
                                } catch (InterruptedException e) {
                                    e.printStackTrace();
                                }

                            }



                        }

                    }
                };

                runOnUiThread(r1);

            }
        });


    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Here's the layout :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:id="@+id/l1">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:padding="15dp"
        android:id="@+id/l2">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"
            android:padding="15dp"
            android:id="@+id/l3">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:padding="15dp"
                android:id="@+id/l4">

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center_horizontal"
                    android:padding="15dp"
                    android:id="@+id/l5">

                    <LinearLayout
                        android:orientation="vertical"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center_horizontal"
                        android:padding="15dp"
                        android:id="@+id/l6">

                        <LinearLayout
                            android:orientation="vertical"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_gravity="center"
                            android:padding="15dp"
                            android:id="@+id/l7">


                            <Button
                                android:layout_width="fill_parent"
                                android:layout_height="wrap_content"
                                android:text="Ripple"
                                android:id="@+id/button"
                                android:layout_marginTop="130dp" />
                        </LinearLayout>
                    </LinearLayout>


                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

Please head over to the IDE you use and see what happens, with or without the second runnable.

Here are the screenshots :

Runnable one alone : One

Runnable two alone : Two

Both : Same as one, though both.

One

Answer 1

For lollipop(API>21) use this

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

For pre lollipop (API<21)

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