Add ripple effect to my button with button background color?

Question

I created a button and I want to add ripple effect to that button!

I created a button bg XML file: (bg_btn.xml)

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#FFFFFF" android:endColor="#00FF00" android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>

And this is my ripple effect file: (ripple_bg.xml)

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

And This is my Button which I want to add ripple effect:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button"
android:layout_centerHorizontal="true"
android:layout_marginTop="173dp"
android:textColor="#fff"
android:background="@drawable/ripple_bg"
android:clickable="true" />

But after adding ripple effect button background is transparent, and button display only when clicked, like this:

Before Click

On Click

But I need both button background color and ripple effect, I found some of this code in different blogs of Stack Overflow, but still it is not working!

Solution 1

Here is another drawable xml for those who want to add all together gradient background, corner radius and ripple effect:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimaryDark">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark" />
            <corners android:radius="@dimen/button_radius_large" />
        </shape>
    </item>

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/colorPrimaryLight"
                android:startColor="@color/colorPrimary"
                android:type="linear" />
            <corners android:radius="@dimen/button_radius_large" />
        </shape>
    </item>
</ripple>

Add this to the background of your button.

<Button
    ...
    android:background="@drawable/button_background" />

PS: this answer works for android api 21 and above.

Solution 2

Add the "?attr/selectableItemBackground" to your view's android:foreground attribute if it already has a background along with android:clickable="true".

Solution 3

Add Ripple Effect/Animation to a Android Button

Just replace your button background attribute with android:background="?attr/selectableItemBackground" and your code looks like this.

      <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackground"
        android:text="New Button" />

Another Way to Add Ripple Effect/Animation to an Android Button

Using this method, you can customize ripple effect color. First, you have to create a xml file in your drawable resource directory. Create a ripple_effect.xml file and add following code. res/drawable/ripple_effect.xml

<?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="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

And set background of button to above drawable resource file

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_effect"
    android:padding="16dp"
    android:text="New Button" />

Solution 4

In addition to Jigar Patel's solution, add this to the ripple.xml to avoid transparent background of buttons.

<item
    android:id="@android:id/background"
    android:drawable="@color/your-color" />

Complete xml :

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/your-color"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/your-color" />
        </shape>
    </item>
    <item
        android:id="@android:id/background"
        android:drawable="@color/your-color" />
</ripple>

Use this ripple.xml as background in your button :

android:background="@drawable/ripple"

Solution 5

When the button has a background from the drawable, we can add ripple effect to the foreground parameter.. Check below code its working for my button with a different background

    <Button
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:gravity="center"
    android:layout_centerHorizontal="true"                                                             
    android:background="@drawable/shape_login_button"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    android:text="@string/action_button_login"
     />

Add below parameter for the ripple effect

   android:foreground="?attr/selectableItemBackgroundBorderless"
   android:clickable="true"

For reference refer below link https://jascode.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/

View more solutions

Comments

[user25]

please make screenshots much smaller next time.. (resize before uploading)

[Suragch]

@user25, you can also just add an l or m to the image link. (see my edit)

[Anoop M Maddasseri]

Those who wanted to relay on foreground property, use this hack for backward compatibility - stackoverflow.com/a/65213848/4694013

[rakcode]

im using minSDK lvl 21

[rakcode]

there is no v21 drawable folder, only one folder that folder itself v21 folder

[rakcode]

yeah, i used this API also, if i use this API after clicking my app is crashing

[rakcode]

actually, im testing my app in my phone with debug mode, and my OS is CyanogenMod13 (Android 6, Marshmellow)

[Urvika G]

For me, ripple effect did not appear. it was just a color switch for the button :/ My android version is 5.1.1 so it should work. Could you help? I followed your steps

[SpyZip]

android:color should be different from the mast android:color, or you want see the ripple effect

[Filipe Brito]

The bad is that if you need a button to fill 100% the horizontal screen you won't.

[Filipe Brito]

We didn't need to use the <item android:id="@android:id/mask"> [...]. Unless you want an oval mask. Thanks for your answer!

[Sartheris Stormhammer]

What does this <item android:id="@android:id/mask"> do anyway, I created 2 similar elements with and without that attribute, and they look exactly the same

[Sudheesh R]

@SartherisStormhammer from official docs: If a mask layer is set, the ripple effect will be masked against that layer before it is drawn over the composite of the remaining child layers. If no mask layer is set, the ripple effect is masked against the composite of the child layers. This is the link, developer.android.com/reference/android/graphics/drawable/…

[Sartheris Stormhammer]

@SudheeshR that just makes it more confusing

[Sudheesh R]

@SartherisStormhammer From that official documentation It's pretty clear I think. Ripple effect will draw over child/masked layers. Please read the doc again, you'll get the point.

[Tyler]

if you want a background you just add another item to the ripple, like: <item android:drawable="?attr/colorPrimary"/>

[Tyler]

doesn't always work, but you can add a background to the ripple effect as noted in the comments of the accepted answer

[fdermishin]

You need to use different colors for ripple and for background, but not the same "@color/your-color"

[Sudheesh R]

Absolutely. I didn't meant those are same colors.. Just use whatever color you want..

[Admin]

@pei How you guys get this infos from? I mean how you know that there's an XML element called ripple to do this job?

[Pei]

It's one of the concepts used in material design. Please start typing a new root tag in a drawable xml in Android Studio then you should be able to see all the available tags including ripple.

[Prashant]

what is the use of mask item?

[Pei]

It's the mask in which ripple effect is applied. Without it you won't be able to make the ripple effect to be in the same shape of the background.

[bnayagrawal]

I had to use this solution as I have used a custom background for my button. It worked great.

[M.kazem Akhgary]

this requires api level 21

[oiyio]

it works but how it works is not explained. it should be related with item's id. Should be referenced.

[JorgeAmVF]

@ROAR, that's right, but at least: "This is not an error; the application will simply ignore the attribute. However, if the attribute is important to the appearance or functionality of your application, you should consider finding an alternative way to achieve the same result with only available attributes, and then you can optionally create a copy of the layout in a layout-vNN folder which will be used on API NN or higher where you can take advantage of the newer attribute." So it works well on devices above API 23 and is ignored when below (we can just tools:ignore="UnusedAttribute).

[Ali Khaki]

Attribute android:foreground has no effect on API levels lower than 23

[Weekend]

without Android support library, it would be ?android:attr/selectableItemBackground (android:attr instead of attr)

[juztcode]

@Pei, where do you place this file? in the anim folder?

[Vadim Kotov]

android:foreground attribute has not effect on API levels lower than 23

[iCantC]

One drawback of this approach is, even though my button background was oval the ripple propagated till the rectangular edges.

[SunnyShiny9]

Why should programmaticallly set backgroundResource again, while layout xml defines Button's background?

[David Miguel]

If you add ?android you won't be using the AppCompat lib, but the one from the OS (so it will crash in api<11). You have to use it without the android: namespace prefix.

[Gibolt]

Thanks for the note 📝. I'd expect most devs have min level above 11, so no problem

[Kraigolas]

@juztcode As you can see in the statement android:background="@drawable/button_background", you should place this in the drawable folder.

[RFM]

@VadimKotov Google should completely ban all API levels smaller than 23. I find absolutely 0 excuse for companies to still request development for such prehistoric versions.

[Shubham Panchal]

For those who are using a custom background for their View, you can set android:foreground="?attr/selectableItemBackground".

[Kumar Santanu]

Api level 23 above