Question 126781 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Ripple effect on a ImageButton does not work

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

Tags:

2

Answers


  1. 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

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search