How to Add Ripple Effect on Button with Background Color in Android

Android default button comes with a touch like ripple effect animation that starts from the point of contact and grows outward.

It is a cool effect to have in android but when you set a color value to android button background attribute, the ripple effect attached to the button goes away.

Here we will show you different ways to recreate ripple effect animation on android button background attribute is set to a color.

1. Using Android Button Foreground Attribute (API 23 and above)

When we assign background color to android, we can add ripple effect on the button by assigning foreground attribute with the following value android:foreground="?android:attr/selectableItemBackground".

This solution can only be used for android version 23 and above. Below is the code XML code.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="24dp"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button_effect"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:foreground="?android:attr/selectableItemBackground"
        android:background="@color/colorAccent"
        android:text="Button Effect"
        android:padding="12dp"/>

</androidx.appcompat.widget.LinearLayoutCompat>

MainActivity.java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private static final String TAG = MainActivity.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button buttonEffect = (Button)findViewById(R.id.button_effect);
        buttonEffect.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Button clicked ", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

2. Using Button BackgroundTint Attribute (API 21 and above)

Rather than setting button background color which will make the button loses its ripple effect and animation, we can just use button backgroundTint attribute and assign the color to it android:backgroundTint="@color/colorAccent".

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="24dp"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button_effect"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorAccent"
        android:text="Button Effect"
        android:padding="12dp"/>

</androidx.appcompat.widget.LinearLayoutCompat>

3. Create Custom Drawable XML File

Another option is to create a custom drawable XML file to replicate the ripple effect and animation.

Go to res folder > drawable folder > create a new drawable and name it ripple_effect.xml.

Open the XML file and add the code below to it.

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

Then, we will use the above drawable as the value of the button background attribute.

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="24dp"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button_effect"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ripple_effect"
        android:text="Button Effect"
        android:padding="12dp"/>

</androidx.appcompat.widget.LinearLayoutCompat>

There might be other ways to achieve this outside the solutions we have provided above.

If you have a different solution kindly share it in the comment box below or use our contact page.

If you have any questions or suggestions kindly use the comment box or you can contact us directly through our contact page below.

 

Add a Comment