Android Custom Component Series "14"--android5.0 button ripple effect implementation

Today, the teacher published an article about the Android5.0 button Press ripple effect realization of "Android l water Ripple Click effect Realization", out of curiosity i downloaded the source code to see the effect, just have a Nexus mobile phone, I have a practical effect to see a bit, Find some places and the actual effect slightly different, refer to the teacher's blog to implement a simple rewrite the view component of the code, put all the code, if there is any problem or better way please point out, here again thanks to the teacher of this blog post.

Reprint please indicate source: Http://blog.csdn.net/dawanganban

By the way, if you think this article is helpful to you, make a vote for sunshine Cockroach: Click to vote

The main areas of change are:

1, when the finger is pressed, there will be two changes, one is to create a dark color on the button on the background, and then a spread of water waves.

2, there are long press and click the difference between long press when the water waves are slowly spread, if the click will quickly spread.

Demo effect (temporarily not mapped, no Android emulator installed, animation effect recording is not ideal)

The implementation process can refer to the teacher's blog post, and reference code comments (comments are very detailed, presumably not difficult to understand)

Mybutton.java

Package Com.example.myreveallayout;import Android.content.context;import Android.graphics.canvas;import Android.graphics.paint;import Android.os.systemclock;import Android.util.attributeset;import Android.view.motionevent;import Android.view.view;import android.view.viewconfiguration;/** * Android 5.0 button click Effect * Description: You can replace the view with a button, ImageButton, and other components. * @author Sun Cockroach Http://blog.csdn.net/dawanganban * */public class MyButton extends view{private static final int Invalidat E_duration = 20;  Time interval for each refresh private static int diffuse_gap = 10;  Diffusion radius increment private static int tap_timeout;  Determine the time to click and long press the private int viewwidth;                            Control width and height private int viewheight;  private int pointx;  Control origin coordinates (upper-left corner) private int pointy;private int maxradio;  Maximum radius of diffusion private int shaderradio;private Paint bottompaint;    Brush Private Paint Colorpaint;private Boolean Ispushbutton; Record whether the button is pressed public MyButton (context context, AttributeSet Attrs) {Super (context, attrs); Initpaint (); Tap_timeout = ViewconfiguratioN.getlongpresstimeout ();} /** * Initialize brush resource */private void Initpaint () {colorpaint = new paint (); bottompaint = new Paint (); Colorpaint.setcolor (Getresour CES (). GetColor (R.color.reveal_color)), Bottompaint.setcolor (Getresources (). GetColor (R.color.bottom_color));} @Overrideprotected void onsizechanged (int w, int h, int oldw, int oldh) {super.onsizechanged (W, H, OLDW, OLDH); THIS.VIEWWI DTH = W;this.viewheight = h;} private int eventx;private int eventy;private long downtime = 0; @Overridepublic boolean ontouchevent (Motionevent event) {s Witch (Event.getaction ()) {case motionevent.action_down://only need to take one time if (downtime = = 0) {downtime = Systemclock.elapsedrealtime ();} Eventx = (int) event.getx (), eventy = (int) event.gety ();//Calculates maximum radius countmaxradio (); Ispushbutton = true; Postinvalidatedelayed (invalidate_duration); Break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:if ( Systemclock.elapsedrealtime ()-Downtime < tap_timeout) {diffuse_gap = 30;postinvalidate ();} Else{cleardata ();} break;} return true;} /** * MeterCalculates the maximum radius at this time */private void Countmaxradio () {if (Viewwidth > Viewheight) {if (Eventx < VIEWWIDTH/2) {Maxradio = Viewwidth -Eventx;} Else{maxradio = Viewwidth/2 + Eventx;}} Else{if (Eventy < VIEWHEIGHT/2) {Maxradio = Viewheight-eventy;} Else{maxradio = Viewheight/2 + Eventy;}}} /** * Clean up changed data (initialize data) */private void ClearData () {downtime = 0;diffuse_gap = 10;ispushbutton = False;shaderradio = 0;postinv Alidate ();} @Overrideprotected void Dispatchdraw (canvas canvas) {super.dispatchdraw (canvas); if (!ispushbutton) return;// If the button is not pressed then return//Draw the entire background after pressing Canvas.drawrect (Pointx, pointy, Pointx + viewwidth, pointy + viewheight, bottompaint); Canvas.save ();//Draw Diffuse circular background canvas.cliprect (Pointx, pointy, Pointx + viewwidth, pointy + viewheight); Canvas.drawcircle ( Eventx, Eventy, Shaderradio, Colorpaint); Canvas.restore ();//until the radius equals the maximum radius if (Shaderradio < Maxradio) { Postinvalidatedelayed (Invalidate_duration, Pointx, pointy, Pointx + viewwidth, pointy + viewheight); ShaderRadio + = Diffuse_gap;} Else{cleardata ();}}}

CompleteSource CodeDownload pleaseClick on the bottom right corner to dance the villain, which can be downloaded in a group share.

Android Custom Component Series "14"--android5.0 button ripple effect implementation