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" />

score 143 · Answer 1 · edited Dec 13 '12 at 01:05

143

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!!!

edited Dec 13 '12 at 01:05

Dave Clemmer

3,741
12
49
72

answered Dec 13 '12 at 00:45

Fernandez

1,431
2
9
2

3

If you're using ActionBarSherlock, use android:background="?selectableItemBackground" instead. – NightWhistler Feb 23 '13 at 15:14
1

Can this be set to a view programmatically? – Badams Apr 05 '13 at 18:24
7

Good solution, but requires Api level 11 :/ – jonathanrz Sep 23 '13 at 02:02
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 – syklon Oct 15 '13 at 19:34
1

This should be selected as the best answer. – JDJ May 20 '14 at 21:45
Totally agree, this should be the selected answer – M Penades Jul 09 '15 at 23:58
Definetely the best answer, I've been searching for this specifically, thanks!! – Damien Praca Jun 08 '16 at 09:28
this should be the best answer – randy Apr 04 '17 at 19:09

score 39 · Accepted Answer · answered Oct 10 '12 at 19:48

39

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

answered Oct 10 '12 at 19:48

Tomik

23,857
8
121
100

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. – Stealth Rabbi Oct 11 '12 at 19:20
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. – Tomik Oct 11 '12 at 19:47

score 10 · Answer 3 · answered Dec 16 '15 at 13:59

10

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

answered Dec 16 '15 at 13:59

Udi Reshef

1,083
1
11
14

score 2 · Answer 4 · edited Jan 09 '13 at 06:50

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
    }



}

ImageButton doesn't highlight on click with Transparent background

4 Answers4

Linked

Related