Adding ripple effect to already custom button
Asked Answered
I

3

5

I'm trying to add ripple effect to a custom button. But the only solution I found is adding a background which I have already done for achieving rounded corners for that button. Now I want to add the ripple effect. This is how my button tag looks so far:

<Button
    android:text="PLAY"
    android:id="@+id/button"
    android:textSize="20dp"
    android:layout_width="75dp"
    android:layout_height="75dp"
    android:background="@drawable/roundedbutton"
    android:onClick="gotomainpage"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="200dp" />
Inboard answered 15/3, 2017 at 20:24 Comment(0)
W
6

use this code in your button

android:foreground="?attr/selectableItemBackground"
Wershba answered 15/3, 2017 at 20:28 Comment(1)
I'm getting this error with that.No resource identifier found for attribute 'forground' in package 'android'Inboard
C
5

Easy

1. Creating an Ripple Drawable Contains the Backgound Shape

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?colorControlHighlight">         //defaul ripple color

    <item>
        <shape                                //the background shape when it's not being click
            android:shape="rectangle">

            <solid
                android:color="@color/colorPrimary" />

            <corners
                android:radius="32dp" />

        </shape>

    </item>

</ripple>

2. Applying the Drawable to the Button and REMOVE THE SHADOW

<Button
    style="?borderlessButtonStyle"              //remove the default shadow
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_weight="1"
    android:background="@drawable/background_button"        //here
    android:text="Sign up"
    android:textAllCaps="false"
    android:textColor="@android:color/white" />

enter image description here

Cruzcruzado answered 12/2, 2020 at 22:48 Comment(0)
H
4

Try adding a android:foreground="@drawable/ripple"

drawable/ripple.xml

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

if the View has a radius on its corners, apply this XML inside the shape (otherwise the ripple goes all the way to the corner);

<corners android:radius="10dp"/>

if you want ripples that end up as circles then use this

drawable/ripple_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/ripple_white">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

This method requires minimum API level 21 or later and android:foreground has no effect on API levels lower than 23

Halliard answered 15/3, 2017 at 20:28 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.