How To Add Ripple Effect/Animation To Button or Any Views in Android Studio

How To Add Ripple Effect/Animation To Button or Any Views in Android Studio

Adding custom ripple effect to your button, layout, card view, or any other views will make your app look more professional and gorgeous. It will give instant touch feedback to the users.
So, in the article, we will show you how to add a custom ripple effect. But Note that this won’t show any effects for APIs before 23.

It’s going to be much easy, so keep patience and follow the steps.

Step 1 – Creating A Drawable Resource File For Custom Ripple Effect

Expand the ‘res‘ folder. Select the ‘Drawable‘ folder from Android Studio and click the right mouse button. Then select ‘New‘ and then Click ‘Drawable Resource File‘.

Now, name it ‘custom_ripple_effect‘. Then, select ‘Version‘ from the Available Qualifiers list on the left side and click on ‘>>‘ to take it to the right side.

Now, write ‘21‘ value for the Platform API Level and click ‘OK

Then remove all the existing codes. Now, we are going to use ripple code for the ripple effect:

<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorAccent">>
//change '@color/colorAccent' with your desired color
</ripple>

So, now jump into the next step.

Step 2 – Adding Ripple Effect In Button or Any View

Now, in your Button or View, set any background color you like. Then, we need to make sure our view is focusable and clickable. To do so, we will add these two attributions:

android:clickable="true"
android:focusable="true"

We are going to set the drawable resource file as the Foreground of the Button or View. So, add this attribution to your Button or View:

android:foreground="@drawable/custom_ripple_effect"

Congratulations!

You have successfully added Ripple Effect/Animation to your Button or other Views in Android Studio.

Thanks For Allowing Us To Help You 🙂
If you are confused or want to know something, then let us know in the comment box, we will reach you as soon as possible. Don’t Forget To Subscribe our Newsletter, YouTube Channel, and Like Our Facebook Page To Keep Updated With Awesome Things. Follow us on Twitter to stay updated with the latest news & changes.

Leave a Reply

Your email address will not be published. Required fields are marked *

Ads Blocker Image Powered by Code Help Pro
Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

 

Ads are the only way for us to keep this site up and running. We don\'t show any malicious or annoying ads.

 

So, help us by disabling your adblocker on our site :(

Refresh