Transparent background in ImageButton with ripple effect?

Question

I want to programmatically remove the grey background in ImageButton. I tried many method of removing it like -

imageButton.setBackgroundDrawable(null);

but on implementing them, I don't get the ripple effect on the ImageButton on touch. (No highlighting on touch).

Is there any way to remove the background but preserve the ripple effect or highlight.

Answer 1

If android:background="?attr/selectableItemBackground" this works than I believe this answer should solve your problem:

https://stackoverflow.com/a/28087443/2534007

Answer 2

Create your own RippleDrawable and you need to use mask for the Ripple if you're going to use transparent background.

 <!-- A red ripple masked against an opaque rectangle. --/>
 <ripple android:color="#ffff0000">
   <item android:id="@android:id/mask"
         android:drawable="@android:color/white" />
 </ripple>

Answer 3

To have a transparent background with ripple effect, the background Drawable needs to be a rippleDrawable, which can be transparent. Set it up programmatically like this.

var mask = new android.graphics.drawable.GradientDrawable();
mask.setShape(android.graphics.drawable.GradientDrawable.RECTANGLE);
mask.setColor(0xFF000000); // the color is irrelevant here, only the alpha
mask.setCornerRadius(5); // you can have a rounded corner for the effect

var rippleColorLst = android.content.res.ColorStateList.valueOf(
    android.graphics.Color.argb(255,50,150,255) // set the color of the ripple effect
);

// aaaand
var ripple = new android.graphics.drawable.RippleDrawable(rippleColorLst,null,mask);
yourImageButton.setBackground(ripple);

(Sorry for the JavaScript/NativeScript code, hope everyone can understand it)