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>

score 3 · Answer 1 · edited May 23 '17 at 11:54

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

That would mean I have to specify an image per state which is not what I want to do as I explained — Ayyoudy, Jul 24 '12 at 02:16

FoamyGuy · Accepted Answer · 2012-07-24T03:27:54.230

1

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

focused

pressed

edited Jul 24 '12 at 03:27

answered Jul 24 '12 at 01:56

FoamyGuy

46,603
18
125
156

the images don't contain any grey.. they are transparent as I explained – Ayyoudy Jul 24 '12 at 02:13
the focused does, the pressed has a darkish blue box instead of grey. see my edit. You'd have to edit out the inside "box" in the above images to leave behind just the glow lighting effect. Can you edit your question and post one of your imagebutton xml declaration. Maybe I am misunderstanding what you are trying to do, that will make it more clear to me. – FoamyGuy Jul 24 '12 at 03:29

score 1 · Answer 3 · answered Aug 15 '13 at 23:48

1

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.

answered Aug 15 '13 at 23:48

user2687744

51
3

score 1 · Answer 4 · answered Apr 14 '15 at 16:19

1

You can write this in your xml file:

android:background="@null"

It worked for me.

answered Apr 14 '15 at 16:19

Kaspis245

418
4
17

score 0 · Answer 5 · edited Aug 17 '17 at 05:52

if u don't need the default gray background and u need your ImageButton seems like an icon without no backgrounds just use android:background attribute and set it to

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

hope that help anybody

Android ImageButton background color

5 Answers5