110

I have an imagebutton that doesn't respond with a touch animation when it is clicked because it is a static image unlike regular buttons on lollipop which come with the built in ripple effect. I would like to add the material design ripple touch effect to the image but can't seem to find a way to implement it. I can set a color filter over the image but that is not the ripple effect. An example of what I'm trying to do is when you hold an album cover image in Google Play Music and a shadow ripple moves across the image.

sanic
  • 2,065
  • 4
  • 20
  • 33

6 Answers6

316

For even better result: 

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>
i.shadrin
  • 5,038
  • 2
  • 21
  • 13
  • 7
    This is the better answer - giving the circular feel as well as the ripple effect, thank you. – em_ Nov 10 '15 at 18:32
  • How do you invert the effect for use on a dark background? – Fletcher Johns Aug 18 '16 at 10:11
  • 3
    Should this also work with colored drawables? For me no touch effect is visible although applying the background. My theme is extending from Theme.AppCompat.Light.DarkActionBar, could this be a problem? – Display name Oct 14 '16 at 11:59
  • 14
    instead background use it foreground for all views it working fine. – Gopi Cg Jan 27 '17 at 12:12
  • 2
    Has anyone found a way to do this and also change the background color? Changing BackgroundTint does not work and setting the Foreground to "?attr/selectableItemBackgroundBorderless" gives a nasty padding on the button. – Sev Feb 15 '17 at 20:46
  • `android:foreground="?attr/selectableItemBackgroundBorderless"` does work - however if you have a non-square image for your button then you'll end up getting a square overlay – Someone Somewhere Oct 02 '17 at 17:07
  • 2
    Gotta love how I've looked through tons of Google's documentation and have never seen this...Style info is so unbelievably undiscoverable. – GetSwifty Feb 27 '18 at 17:17
  • 1
    If you're using a dark background, the ripple may not be visible enough. You change it to a light colored ripple by adding `android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"` (works on < API 21). See https://stackoverflow.com/q/28605031/599535 for other solutions. – Lifes Dec 03 '19 at 20:26
31

You can just add a background to your ImageButton like this :

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/btn_dialog"
    android:background="?android:attr/selectableItemBackground" />
JJD
  • 50,076
  • 60
  • 203
  • 339
Nicolas
  • 663
  • 6
  • 17
  • 4
    Use android:foreground="?attr/selectableItemBackgroundBorderless" – MFQ Sep 02 '18 at 20:13
  • @MFQ How it is different from the ?android:attr/selectableItemBackground – Shubham AgaRwal Sep 03 '18 at 10:21
  • 1
    @killer selectableItemBackgroundBorderless = give a circular ripple with no bounds like if you click on an icon in the Toolbar, but selectableItemBackground give rectangle ripple , you can see the difference if you long clicked on the icon that implement this drawbels – MFQ Sep 05 '18 at 16:55
10

I got good answers from i.shadrin (here) and Nicolars (here).

The difference between their answers is that ?attr/selectableItemBackgroundBorderless can give you an android.view.InflateException, so the ?android:attr/selectableItemBackground is the solution.

FWIW, I do not know why the exception happens, because the first answer worked fine in all my old projects, but in my recent project not (maybe because the app theme = android:Theme.Material?).

The strange thing that was happening is that though the ripple effect was shown it was out-bounding the ImageButton, so the solution is:

  • To use the android:foreground="?android:attr/selectableItemBackgroundBorderless" instead of android:background="?android:attr/selectableItemBackgroundBorderless"

Hope it help you if you are facing the same.

Filipe Brito
  • 5,329
  • 5
  • 32
  • 42
9

If you already have a background and don't want to change it, use foreground;

<ImageButton
    android:layout_width="60dp"
    android:layout_height="match_parent"
    android:background="@drawable/preview_in_4k_background"
    android:src="@drawable/ic_full_screen_24px"
    android:layout_marginLeft="5dp"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:layout_column="2"/>
Sabri Meviş
  • 2,231
  • 1
  • 32
  • 38
-1

You can use MaterialButton (com.google.android.material.button.MaterialButton) instead of ImageButton with this properties. If you use material components.

 <style name="IconOnlyButton">
    <item name="iconPadding">0dp</item>
    <item name="iconGravity">textStart</item>
 </style>

<com.google.android.material.button.MaterialButton
    style="@style/IconOnlyButton"
    app:icon="@drawable/ic_refresh"/>
Özer Özcan
  • 1,253
  • 16
  • 17
-1

For me solution given by i.shadin was not working because of image, setting the drawable as foreground was working but it's supported after API 23.

Here is My Solution:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

    <androidx.appcompat.widget.AppCompatImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/men_img" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnMale"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:insetLeft="0dp"
        android:insetTop="0dp"
        android:insetRight="0dp"
        android:insetBottom="0dp"
        app:backgroundTint="@android:color/transparent"
        app:cornerRadius="0dp"
        app:elevation="0dp"
        app:strokeWidth="0dp" />
</FrameLayout>
RHS.Dev
  • 412
  • 6
  • 18