How to set ripple effect only on image button of TableRow item android

Question

I want to add custom ripple effect on image button. But if I change background , it shows color effect behind the image. Also, I set table-row and image-button wrap content but still couldn't find solution. Please help me to set ripple effect only on image button not outside space.

<TableRow
    android:id="@+id/tableRow1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="0.5"
    android:gravity="center_horizontal"
    android:layout_gravity="center_horizontal"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    >

    <ImageButton
        android:id="@+id/ess_btn_leave"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="0.5"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:src="@drawable/leave"
        android:background="?android:attr/selectableItemBackground"
        />

    <ImageButton
        android:id="@+id/ess_imgbtn_expence"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="0.5"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:background="@null"
        android:src="@drawable/expence"
        />
</TableRow>

Answer 1

Add this .xml to your drawable folder

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:drawable="@drawable/button_normal" />
</ripple>

and use this as a background to your imageButton for ripple effect.

Answer 2

From https://developer.android.com/training/material/animations.html and the original answer

Try

<ImageView
.
.
.
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
/>

Answer 3

Try this way

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>

Answer 4

Try this solution:-

In parent Layout of xml add below line:-

android:descendantFocusability="blocksDescendants"

In ImageButton set-

android:background="@drawable/grid_ripple_effect"

grid_ripple_effect.xml in that change color as per your need.

<?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/light_green"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle" android:left="-2dp"  android:right="-2dp" android:top="-2dp">
            <stroke android:width="1dip" android:color="#CABBBBBB" />
            <corners android:radius="2dp" />
            <solid android:color="@color/light_green" />
        </shape>
    </item>
</ripple>

Answer 5

you can use android:foreground="?attr/selectableItemBackground" on your image view. for default ripple

for custom ripple you need to create two files In your drawable-v21 create a file - background_ripple.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="@android:integer/config_shortAnimTime"
android:color="@color/lightGrey" >

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/white" />
    </shape>
</item>

in your normal drawable for version above 21

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <color android:color="@color/lightGrey" />
    </item>
    <item>
        <color android:color="@color/white" />
    </item>
</selector>

and do android:foreground="@drawable/background_ripple.xml on your image view.