ImageButton doesn't highlight on click with Transparent background

Question

I've set up an ImageButton to be transparent, so the icon matches the backgrond panel like the Android ActionBar. This looks fine as I want it to.

However, when the background is transparent, there isn't the blueish highlight you see as when you press a transparent button in the action bar.

Can I have an ImageButton that is transparent and also has the highlight flash when clicked?

<ImageButton
    android:id="@+id/nextItemButton"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@null"
    android:src="@drawable/ic_media_ff" />

Solution 1

All you need to do is to set the proper background. If you want it to be transparent in normal state and blueish in pressed stated.

Create a StateListDrawable like this one in res/drawable directory.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/my_bluish_color" android:state_pressed="true"/>
    <item android:drawable="@android:color/transparent"/>
</selector>

This way the default background is transparent. When pressed the background has the color you specified (instead of color you can use any drawable here).

Solution 2

I came across this same problem. Finally, I got a sample of a code with that attribute:

android:background="?android:selectableItemBackground"

This attibute will give a transparent background with selectable highlight to any View (Button, ImageButton, TextView...) WITHOUT MORE CODING!!!

Solution 3

Just to add on Fernandez good answer:

If you want the effect to be Round and not rectangle use:

android:background="?android:selectableItemBackgroundBorderless"    

(*for V21 and up).

Solution 4

If you want to do it programmatically, here is one solution:

Create a custom ImageButton class and Override drawableStateChange():

public class CustomImageButton extends ImageButton {

    @Override
    protected void drawableStateChanged() {
        Log.d("Button", "isPressed: " + isPressed() );
        if( isPressed() ){
            setBackgroundResource( android.R.color.holo_blue_dark );
        }  else {
            setBackgroundResource( android.R.color.transparent );
        }
        super.drawableStateChanged();

    }

    public CustomImageButton( Context context ) {
        super( context );
    }

    public CustomImageButton( Context context, AttributeSet attrs ) {
        super( context, attrs );
    }

    public CustomImageButton( Context context, AttributeSet attrs, int defStyle ) {
        super( context, attrs, defStyle );
        // TODO Auto-generated constructor stub
    }



}

View more solutions

Comments

[Stealth Rabbi]

Unfortunately, the button highlight in the built in android styles isn't public. This is the custom color I ended up going with. Was as close as i could get to the Jelly Bean color, which I think is the same color in ICS: #057891 Using the StateListDrawable worked great.

[Tomik]

The default pressed color depends on the device and the version of Android it is running. The Holo theme uses semitransparent bluish 9-patch drawable in the pressed state.

[NightWhistler]

If you're using ActionBarSherlock, use android:background="?selectableItemBackground" instead.

[Badams]

Can this be set to a view programmatically?

[jonathanrz]

Good solution, but requires Api level 11 :/

[syklon]

For those who were wondering, this lives in attrs... Personally I'd use it in its fully qualified state "?android:attr/selectableItemBackground" to keep it readable

[JDJ]

This should be selected as the best answer.

[M Penades]

Totally agree, this should be the selected answer

[Damien Praca]

Definetely the best answer, I've been searching for this specifically, thanks!!

[randy]

this should be the best answer