{"id":33196,"date":"2016-03-14T17:53:52","date_gmt":"2016-03-14T12:23:52","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=33196"},"modified":"2016-04-14T12:31:11","modified_gmt":"2016-04-14T07:01:11","slug":"ripple-effect-in-android","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/ripple-effect-in-android\/","title":{"rendered":"Ripple effect in Android"},"content":{"rendered":"

What is Ripple?<\/strong><\/p>\n

Ripple<\/em> is a small wave like pattern, generally formed on the surface of some liquid when you drop something on it.<\/p>\n

\"ripple\"<\/p>\n

What is Ripple effect in Android?<\/strong><\/p>\n

Ripple effect<\/em> provides an instantaneous visual confirmation at the point of contact when users interact with UI elements.<\/p>\n

These UI elements could be any of the View elements.
\nLike \u2013 Layouts, Buttons, TextViews, ListViews, etc.<\/p>\n

Whenever the user clicks or touches any UI element like, a button, it is desirable to provide some kind of visual confirmation, so that the user knows that their touch or click was successful. Responsive interaction encourages deeper exploration of an app by creating timely, logical, and delightful screen reactions to the user input. However, this interaction should not be distracting to the user. Traditionally in Android, this has been handled using state list drawables to provide different colored or shaded drawables which indicate that a control is in touched or pressed state. With the Android Lollipop, a new touch feedback mechanism was introduced to provide this touch feedback and is loosely based on the concept of ripples on the card metaphor which features strongly in Material design. These ripples are actually really easy to implement.<\/p>\n

When was it introduced?<\/strong><\/p>\n

In the android development<\/a> ecosystem, it was added in Android 5.0: API 21(LOLLIPOP)<\/strong>. So, it does not work on pre-lollipop devices. However<\/em>, we have external libraries which can be used to give the same effect. Links for the same are provided at the end of the blog.<\/p>\n

Class hierarchy followed is :<\/p>\n

[sourcecode language=”java”]
\njava.lang.Object
\n\u21b3android.graphics.drawable.Drawable
\n\u21b3android.graphics.drawable.LayerDrawable
\n\u21b3android.graphics.drawable.RippleDrawable
\n[\/sourcecode]<\/p>\n

 <\/p>\n

How to achieve Ripple effect?<\/strong><\/p>\n

It can be achieved in 2 ways :<\/p>\n

(a) Programmatically – by using RippleDrawable<\/strong> class.
\n(b) By XML \u2013 by using Drawable XML<\/strong> that shows a ripple effect in response to state changes of \u00a0 \u00a0 \u00a0 \u00a0 the View.<\/p>\n

In order to understand how the ripple is drawn it would be nice to slow the animation down. The ripple animation runs slower when we perform a long press, so we can use that to see exactly what\u2019s happening.<\/p>\n

Programmatically<\/span><\/strong><\/p>\n

Our respective class will implement View.OnTouchListener<\/em> <\/strong>interface.
\nIt will provide us : public abstract boolean onTouch (View v, MotionEvent event)<\/em> <\/strong>callback.
\nThis is called, when a touch event is dispatched to a view.<\/p>\n

Here, v<\/em><\/strong> : The view, the touch event has been dispatched to.
\nevent<\/em><\/strong> : The MotionEvent object containing full information about the event.
\nThis method returns True<\/strong> if the listener has consumed the event, False<\/strong> otherwise.<\/p>\n

The anchoring position of the ripple for a given state is specified by calling setHotspot(float, float)<\/strong> <\/em>with the corresponding state attribute identifier.<\/p>\n

[sourcecode language=”java”]
\nprivate RippleDrawable rippleDrawable;
\nprivate Button buttonWithRipple;<\/p>\n

buttonWithRipple = (Button) findViewById(R.id.buttonWithRipple);
\nrippleDrawable = (RippleDrawable) buttonWithRipple.getBackground();
\nbuttonWithRipple.setOnTouchListener(this);<\/p>\n

@Override
\npublic boolean onTouch(View v, MotionEvent event) {
\nswitch (v.getId()) {
\ncase R.id.buttonWithRipple :
\nrippleDrawable.setHotspot(event.getX(), event.getY());
\nrippleDrawable.setColor(ColorStateList.valueOf(getResources().getColor(R.color.red)));
\nbreak; }
\nreturn false;
\n}
\n[\/sourcecode]<\/p>\n

Here, event.getX() & event.getY()<\/em><\/strong> gives us current pointer coordinates. And then, we set our required color to the rippledrawable object.<\/p>\n

\"1\"<\/p>\n

 <\/p>\n

By XML<\/span><\/strong><\/p>\n

Setting DEFAULT Ripple effect on Android 5.0: API 21(LOLLIPOP) devices :<\/span><\/strong><\/p>\n