How to set button background drawable image with ripple effect in android

Question

My Xml code:

<Button
    android:id="@+id/link_btn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/google_btn" />

I am applying Default ripple effect

<Button
    android:id="@+id/link_btn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/selectableItemBackground" />

but I need button background "@drawable/google_btn" with
"?android:attr/selectableItemBackground". it's means i need ripple effect with custom background.

Humidor

How can i do that one – Humidor

It is worth stressing out that (as @zahidul mentioned), ripple effects are for Android v21 and above only. – Coast

Answer 1

In your drawable-v21 folder you can write code for ripple effect by your own. Make a drawable xml file and set starting tag by ripple. Like this :

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccentDark">
    <item>
        <selector xmlns:android="http://schemas.android.com/apk/res/android" >
            <item
                android:drawable="@color/button_accent_dark"
                android:state_checked="false"/>
            <item
                android:drawable="@color/button_accent"
                android:state_checked="true" />
            <item
                android:drawable="@color/button_accent_dark" />

        </selector>
    </item>
</ripple>

Footworn

Thank you @Zahidul Islam.. That is working and one more Doubt how can I apply ripple effects on below V21 – Humidor

Answer 2

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 ripple effect

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

Liturgist

Answer 3

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight" >

    <item
        android:id="@android:id/mask"
        android:drawable="@drawable/btn_rectangle"/>
    <item android:drawable="@drawable/btn_rect_states"/>

</ripple>

Try the above code here in drawables give your own custom drawable backgrounds as you need it.

Goddard

Thats great below v21 ripple dont work so there you eed to create selector file of your button states for normal and for pressed state @PrithivDharmaraj.. Kindly accept or upvote if my answer helps you.. – Goddard

Answer 4

Another option is to create a layer list drawable and set that as a background. For example:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_background"/>
    <item android:drawable="?attr/selectableItemBackground"/>
</layer-list>

Giusto