Ripple effect on a ImageButton does not work

Question

I set an ImageButton in a RelativeLayout and i want to show a Ripple effect when the button get clicked. As far as i know it have to be enabled by default but for some reason it doesn't show even if i set ?attr/selectableItemBackgroundBorderless or ?attr/selectableItemBackground as foreground or background (i used ?android:attr instead of ?attr too).

I tried everything, i made a custom Ripple effect drawable and setted it as foreground/background and it stills not working.

The app is API 21 > targeting 31, i don't know if it have anything to do with it but i using Material3.dark as main theme.

Anyone have an idea of what could be wrong here?

ImageButon:

 <ImageButton
            android:id="@+id/tb_music"
            style="@style/top_bar_button"
            android:layout_marginLeft="8dp"
            android:src="@drawable/note" />

Style top_bar_button:

<style name="top_bar_button">
        <item name="android:layout_width">64dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:background">#00000000</item>
        <item name="android:foreground">@drawable/ripple_effect</item>
        <item name="android:clickable">true</item>
    </style>

ripple_effect.xml:

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#FFFFFF">

    <item android:id="@android:id/mask"
        android:drawable="@android:color/white">
        <shape android:shape="rectangle"> </shape>
    </item>

</ripple>

How the button looks

snachmsm · Answer 1 · 2022-05-03T20:20:12.580

0

don't use background attribute with ImageButton or Button. These widgets have 9-patch set as background, so when you overwrite it you basically lose default Androids button style and padding. Now you bascially may have in here ImageView or even TextView with drawable set to left/right

for coloring button (image or common, or even other Views) use android:tint attribute, but this will work with API23+ (so you may look for some compat/androidX version if you need API21, note it implements TintableBackgroundView, so we may assume that tint attribute will work, with custom not-android prefix)

also in question you should show your ripple effect drawable file, but even assuming that is is properly written - you have set transparent background, thus ripple effect won't be visible, as it works only in bounds of background - you transparent color removed default "shape" of this View. Just like elevation and translationZ params, these are adding some shadow under View, but only for not transparent, you've also lost this visual effect in here

so in short: remove background attribute leaving default one (or set it as non-transparent-at-all 6-hash solid color, but this will become just colored rectangle) and get familiar with tint and tintMode

aaand if you need a ripple effect on transparent rectange View then afaik thats possible also, but with mask param in drawables XML. and you don't need ImageButton, any View is clickable in Android, especially when set View.OnClickListener using Java/Kotlin. so ImageView will be sufficiet

edited May 03 '22 at 20:20

answered May 03 '22 at 20:09

snachmsm

17,866
3
32
74

Sorry i forgot ripple_effect.xml. Just added. So, basically is better use ImageView instead of ImageButton to make a transparent button with a icon and a nice ripple effect ? – ヘロニモ May 04 '22 at 00:14
buttons have own style and thats all. if you are removing this "default look" with e.g. solid background or other styling then there is no purpose for using `ImageButton` instead of `ImageView`. note that [`ImageButton`](https://developer.android.com/reference/android/widget/ImageButton) `extends ImageView`, its almost same widget – snachmsm May 04 '22 at 05:23
Anyways i tried using ImageView instead and stills not showing up. – ヘロニモ May 04 '22 at 05:46
have you removed `background`, optionally adding `tint`? do you have AndroidX imported and current? update your current code – snachmsm May 04 '22 at 07:32
also note that [`android:foreground`](https://stackoverflow.com/questions/52329249/why-doesnt-androidforeground-attribute-work) attribute was made for `FrameLayout` initially and works for other `View`s since API23, so on some device/emulator with 5.0 API21 it won't work also (so use AndroidX for backward compatibility widget) – snachmsm May 04 '22 at 07:42
I testing it on a API 29 device – ヘロニモ May 05 '22 at 03:03

score 0 · Answer 2 · answered May 04 '22 at 06:36

0

I don't know why ripple does not work in your app but when I tested it, It is working properly. I think you didn't give padding to your ImageButton. You can see my XML code that how my code shows the Ripple effect.

        <ImageButton
            android:id="@+id/imageButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:background="?attr/selectableItemBackground"
            android:clickable="true"
            android:focusable="true"
            app:srcCompat="@drawable/note"
            tools:ignore="ContentDescription" />
        <!--            Make sure that you have added padding to show ripple effect. Otherwise ripple effect not show-->

Let me know if your problem is not solved yet.

answered May 04 '22 at 06:36

M DEV

763
1
7
20

note that for using custom `app:srcCompat` you still need [AppCompatImageView](https://developer.android.com/reference/androidx/appcompat/widget/AppCompatImageButton), so importing AndroidX. when done IDE is probably automatically switching default `ImageButton`s to its `AppCompat` versions – snachmsm May 04 '22 at 07:34
@snachmsm I have imported AndroidX – ヘロニモ May 05 '22 at 03:00
Gonna try adding padding – ヘロニモ May 05 '22 at 03:02

Ripple effect on a ImageButton does not work

ImageButon:

Style top_bar_button:

ripple_effect.xml:

2 Answers2