Android ImageButton background color

Question

I have an ImageButton with a background image that has some transparency. By default, the button gets a grey background where the transparency pixels are - due to the Holo.Light theme. I tried setting the background color of the button to transparent via the setBackgroundColor(Color.TRANSPARENT) method. That works just fine and does what I need except now my button no longer has the light blue color when focused/pressed and looks rather flat (no borders around it, so it looks like an image).

I googled and saw that you can assign selectors as explained here but that would mean that I have to specify an image per button state and I don't want to do that. I want to inherit the focuses/pressed colors from the theme but overwrite the normal button background (when not pressed/focused) to transparent instead of grey. How can I achieve that?? Please provide a working example as I have tried many different combinations with no success.

Edit Thank you all for helping. I figured out how to make this work without having to recreate the same image with the focused and pressed states for each button!

Here is my solution:

My button is defined as:

<ImageButton
            android:id="@+id/ImageButton05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/button" />

And my background XML file (titled button.xml) is defined as follows:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <layer-list>
            <item android:drawable="@drawable/btn_default_pressed_holo_light"></item>
            <item android:drawable="@drawable/network_wifi"></item>
        </layer-list>
    </item>
    <item android:state_focused="true">
        <layer-list>
            <item android:drawable="@drawable/btn_default_focused_holo_light"></item>
            <item android:drawable="@drawable/network_wifi"></item>
        </layer-list>
    </item>
    <item android:state_hovered="true">
        <layer-list>
            <item android:drawable="@drawable/btn_default_focused_holo_light"></item>
            <item android:drawable="@drawable/network_wifi"></item>
        </layer-list>
    </item>
    <item>
        <layer-list>
            <item android:drawable="@drawable/btn_default_normal_holo_light"></item>
            <item android:drawable="@drawable/network_wifi"></item>
        </layer-list>
    </item>
</selector>

Answer 1

You can put something into an xml file, for example, custom_button.xml and then set background="@drawable/custom_button" in the button view.

Please refer to this link as there is an xml example: Standard Android Button with a different color

I used it in my code and it worked just the way I wanted.

Reference: Standard Android Button with a different color

---

Edited:

If you would rather use Maybe you should try to set a border. For example (Reference: Android - border for button ):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <gradient android:startColor="#FFFFFF" 
    android:endColor="#00FF00"
    android:angle="270" />
  <corners android:radius="3dp" />
  <stroke android:width="5px" android:color="#000000" />
</shape>

OR, You could try to set the style/theme for the button. (But it would be in a separate file) The style/theme contains the color attributes for various states of button such as focused / enabled / disabled/ etc.

For setting background color/image and having click highlight effect, Here is an example (Reference: How to programmatically setting style attribute in a view)

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

You can then apply this selector to a Button by setting the property android:background="@drawable/my_button".

Answer 2

I want to inherit the focuses/pressed colors from the theme but overwrite the normal button background (when not pressed/focused) to transparent instead of grey. How can I achieve that??

AFAIK you can't because the focus/pressed colors are built in to the same image resources that contain the grey background.

If you want to keep the system focus/pressed but remove the background you'll have to grab a copy of the image resources (which can be found in your SDK at /sdkroot/platforms/[version]/data/res/drawable-hdpi replace [version] with whatever api level you are after. And if needbe replace hdpi with another density) and edit out the grey button from them with a photo editor. Then make a selector that references your modified images and set that as the background for your button.

EDIT: Here are the default holo button images for focused and pressed

Answer 3

You can use ImageView instead of ImageButton to solve your problem. Please set the android:background property of the ImageView to the background color of the parent.

Answer 4

You can write this in your xml file:

android:background="@null"

It worked for me.