Reputation:
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.
Upvotes: 4
Views: 1924
Reputation:
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>
Upvotes: 1