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>

You should have `width` or `height` = "0dp" as per orientation due to use of `layout_weight`. — Nitin Patel, Jun 15 '17 at 06:57

score 0 · Answer 1 · answered Jun 15 '17 at 06:46

0

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.

answered Jun 15 '17 at 06:46

Vinod Pattanshetti

2,465
3
22
36

i tried this way as well. but it covers left and right side spaces around imagebutton and effect performs behind the imageButton – Shuchi Sheth Jun 15 '17 at 06:53
@ShuchiSheth then How you want ripple effect is should be cover entire imageButton? – Vinod Pattanshetti Jun 15 '17 at 06:56
i have given 0.5 weight to my imagebutton. i have set image scaletype as fitcenter. so on click of image ,it shows effect on whole layout. i want it only on imagebutton – Shuchi Sheth Jun 15 '17 at 07:04
@ShuchiSheth instead of android:layout_width="fill_parent" android:layout_height="fill_parent" try android:layout_width="match_parent" android:layout_height="wrap_content" it will work. – Vinod Pattanshetti Jun 15 '17 at 07:12

score 0 · Answer 2 · answered Jun 15 '17 at 06:47

0

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

Try

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

answered Jun 15 '17 at 06:47

Allan W

2,791
4
23
41

score 0 · Answer 3 · answered Jun 15 '17 at 06:48

0

Try this way

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

answered Jun 15 '17 at 06:48

Aditya Vyas-Lakhan

13,409
16
61
96

thank you. but i want to add custom ripple effect. how to set that? – Shuchi Sheth Jun 15 '17 at 06:51
https://stackoverflow.com/questions/24863430/android-ls-ripple-effect-touch-feedback-for-buttons-using-xml – Aditya Vyas-Lakhan Jun 15 '17 at 06:54
post your expected output screen shot so that it will easy to get it – Aditya Vyas-Lakhan Jun 15 '17 at 06:55

Nitin Patel · Answer 4 · 2017-06-15T07:06:58.343

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>

score 0 · Accepted Answer · answered Feb 09 '18 at 07:49

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.

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

5 Answers5