What is ripple effect android

Ripple effect in Android

What is Ripple?

Ripple is a small wave like pattern, generally formed on the surface of some liquid when you drop something on it.

What is Ripple effect in Android?

Ripple effect provides an instantaneous visual confirmation at the point of contact when users interact with UI elements.

These UI elements could be any of the View elements.
Like – Layouts, Buttons, TextViews, ListViews, etc.

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.

When was it introduced?

In the android development ecosystem, it was added in Android 5.0: API 21(LOLLIPOP). So, it does not work on pre-lollipop devices. However, 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.

Class hierarchy followed is :

[sourcecode language=”java”]
java.lang.Object
↳android.graphics.drawable.Drawable
↳android.graphics.drawable.LayerDrawable
↳android.graphics.drawable.RippleDrawable
[/sourcecode]

How to achieve Ripple effect?

It can be achieved in 2 ways :

(a) Programmatically – by using RippleDrawable class.
(b) By XML – by using Drawable XML that shows a ripple effect in response to state changes of the View.

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’s happening.

Programmatically

Our respective class will implement View.OnTouchListener interface.
It will provide us : public abstract boolean onTouch (View v, MotionEvent event) callback.
This is called, when a touch event is dispatched to a view.

Here, v : The view, the touch event has been dispatched to.
event : The MotionEvent object containing full information about the event.
This method returns True if the listener has consumed the event, False otherwise.

The anchoring position of the ripple for a given state is specified by calling setHotspot(float, float) with the corresponding state attribute identifier.

[sourcecode language=”java”]
private RippleDrawable rippleDrawable;
private Button buttonWithRipple;

buttonWithRipple = (Button) findViewById(R.id.buttonWithRipple);
rippleDrawable = (RippleDrawable) buttonWithRipple.getBackground();
buttonWithRipple.setOnTouchListener(this);

@Override
public boolean onTouch(View v, MotionEvent event) <
switch (v.getId()) <
case R.id.buttonWithRipple :
rippleDrawable.setHotspot(event.getX(), event.getY());
rippleDrawable.setColor(ColorStateList.valueOf(getResources().getColor(R.color.red)));
break; >
return false;
>
[/sourcecode]

Here, event.getX() & event.getY() gives us current pointer coordinates. And then, we set our required color to the rippledrawable object.

By XML

Setting DEFAULT Ripple effect on Android 5.0: API 21(LOLLIPOP) devices :

• If you want to apply the Standard ripple effect on Android 5.0: API 21 or more, which should be limited to your view (bounded ripple), just apply to your View background :

[sourcecode language=”java”]
android:background=»?android:attr/selectableItemBackground»
[/sourcecode]

This background attribute value :

will provide default ripple effect, which will constrain the animation, within the View that’s handling the touch event.

• If you want to apply the standard ripple effect on Android 5.0: API 21 or more, which should not be limited to your view (unbounded ripple), just apply to your View background :

[sourcecode language=”java”]
android:background=»?android:attr/selectableItemBackgroundBorderless»[/sourcecode]

This background attribute value :

[sourcecode language=”java”] selectableItemBackgroundBorderless[/sourcecode]

will provide default ripple effect, which will extend the animation beyond the bounds of its View that’s handling the touch event. It will be bounded by the nearest parent of the view with a non-null background.

Standard bounded Ripple Effect Standard Unbounded Ripple Effect

Setting CUSTOMISED Ripple effect on Android 5.0: API 21(LOLLIPOP) devices :

We create a touch feedback drawable that shows a ripple effect in response to state changes, using the ripple as root element.

This drawable may contain 0 or more child layers, including a special mask layer that is not drawn to the screen.

Attributes are as under :

• android:color – the color to use for ripple effects.

1. Must be a color value, in the form of “#rgb”, “#argb”, “#rrggbb”, or “#aarrggbb”.
2. This may also be a reference to a resource (in the form “@[package:]type:name”) or theme attribute (in the form “?[package:][type:]name”) containing a value of this type. This corresponds to the global attribute resource symbol color.

• android:radius – radius of the ripple when fully expanded.

1. Default value is computed based on the size of the ripple’s container.
2. Must be a dimension value, which is a floating point number appended with a unit (like : px, dp, sp, in, mm).
3. This may also be a reference to a resource (in the form “@[package:]type:name”) or theme attribute (in the form “?[package:] [type:]name”) containing a value of this type. This corresponds to the global attribute resource symbol radius.

USAGE :

Set this drawable as the background to your view :

• Drawable with only a mask layer and no child layer

If a mask layer is set and the ripple is set as a View background, the ripple effect will be masked against that layer.

• Drawable with a child layer and a mask layer

If a mask layer is set and the ripple is set as a View background, the ripple effect will be masked against that layer before it is drawn over the composite of the remaining child layers (if they exist).
Here, background color of button is changed by setting the child layer in the Ripple drawable XML.

• Drawable with no mask layer or child layer

If no child or mask layer is specified and the ripple is set as a View background, the ripple will be drawn atop the first available parent background within the View’s hierarchy.

Drawable with only a mask Drawable with a mask Drawable with no mask or

layer and no child layer layer and a child layer child layer

Below are the references to various libraries which can be used to apply Ripple Effect on Pre-Lollipop devices :

• https://github.com/siriscac/RippleView.git
• https://github.com/balysv/material-ripple.git
• https://github.com/traex/RippleEffect.git
• https://android-arsenal.com/tag/167

Thanks to Google for its Material Design 🙂

Источник

Adding Ripple Effect to RecyclerView item

I am trying to add Ripple Effect to RecyclerView’s item. I had a look online, but could not find what I need. I assume it has to be a custom effect. I have tried android:background attribute to the RecyclerView itself and set it to «?android:selectableItemBackground» but it did not work.:

This is the RecyclerView that I am trying to add the effect to:

6 Answers 6

I figured out. The only thing that I had to do is to add this attribute:

to the root element of the layout that my RecyclerView adapter inflates like that:

Result:

If you are still not able to see ripple effect, add these lines also to the root element of the layout.

As already answered, the simplest solution is to just add one of the following as your RecyclerView row’s background:

However if you are experiencing problems with this method or if you want finer control over the colors, then you can do the following.

Custom Ripple Effect

This answer is starting with this simple Android RecyclerView example. It will look like the following image.

Add selector for pre API 21 devices

Before API 21 (Android 5.0 Lollipop), clicking a RecyclerView item just changed its background color (no ripple effect). That is what we are going to do, too. If you still have users with those devices, they are used to that behavior, so we aren’t going to worry about them too much. (Of course, if you really want the ripple effect for them, too, you could use a custom library.)

Right click your res/drawable folder and choose New > Drawable resource file. Call it custom_ripple . Click OK and paste in the following code.

I used colorAccent as the highlight color for the pressed state because it was already available, but you can define whatever color you want.

Add Ripple Effect for API 21+ devices

Right click your res/drawable folder and choose New > Drawable resource file. Call it custom_ripple again. Don’t click OK, yet this time, though. From the Available qualifiers list choose Version, then click the >> button and write 21 for the Platform API level. Now click OK and paste in the following code.

Again, I used colorAccent for the ripple color because it was available, but you can use whatever color you want. The mask confines the ripple effect to just the row layout. The mask color apparently doesn’t matter so I just used an opaque white.

Set as the background

In your RecyclerView item’s root layout, set the background to the custom ripple that we created.

In the example project that we started with, it looks like this:

Finished

That’s it. You should be able to run your project now. Thanks to this answer and this YouTube video for help.

Источник

How to set a ripple effect on textview or imageview on Android?

I want to set a ripple effect on textview and imageview in Android Studio. How can I do it?

15 Answers 15

If you want the ripple to be bounded to the size of the TextView/ImageView use:

(I think it looks better)

Please refer below answer for ripple effect.

ripple on Textview or view :

ripple on Button or Imageview :

Add this into drawable

Start Effect

Stop animation:

Add android:clickable=»true» android:focusable=»true»

For Ripple Effect

For Selectable Effect

For Button effect

try this. This is worked for me.

for circle ripple : android:background=»?attr/selectableItemBackgroundBorderless»

for rectangle ripple : android:background=»?attr/selectableItemBackground»

In the case of the well voted solution posted by @Bikesh M Annur (here) doesn’t work to you, try using:

Also, when using android:clickable=»true» add android:focusable=»true» because:

«A widget that is declared to be clickable but not declared to be focusable is not accessible via the keyboard.«

addition to above answers is adding focusable to avoid UI editor’s warning

Источник

How to make a circular ripple on a button when it’s being clicked?

Background

On the dialer app of Android, when you start searching for something, and you click the arrow button on the left of the EditText, you get a circular ripple effect on it :

The problem

I’ve tried to have it too, but I got a rectangular one:

The question

How do I make the button have a circular ripple effect when being clicked? Do I have to create a new drawable, or is there a built in way for that?

12 Answers 12

If you already have a background image, here is an example of a ripple that looks close to selectableItemBackgroundBorderless:

state_pressed_ripple.xml: (opacity set to 10% on white background) 1AFFFFFF

If you are using AppCompat theme, then you could set the background of the view as:

This will add circular ripple on 21 and above and square background on below 21.

Another attribute with round ripple effect, specially for action bar:

UPD: Ripple color can be changed by this attribute:

But keep in mind, this attribute applies to all default ripple effects.

Create and set a ripple drawable as background. Something like this.

Just Add this background to your view

You can create circle ripple drawable using android:radius attribute in xml.

Pay attention, that your your_radius should be less then your view width and height. For example: if you have view with size 60dp x 60dp your_radius should be near 30dp (width / 2 or height / 2).

just add this item in your activity xml

If you want more generic XML files, I have two files:

1) btn_ripple_background with code:

2) ripple_circuler_shape with code:

finally the usage: android:foreground=»@drawable/ripple_btn_background»

Источник