Android ImageButton change background

Question

Is there a way to change the background on an ImageButton without creating another button for that state?

I mean, when you add an ImageButton it gets a grey background and gets slightly darker grey when selected.

Adding: android:background="@color/white", will make my background white (like i want), but noting happens when selecting the button. It would be nice with something like: android:background_selected ="the color you want here"

I want a button that has a with background in normal state and a blue background when pressing that button.

score 4 · Answer 1 · answered Jun 05 '14 at 13:56

4

You need to create a xml File in the drawable Folder with content like this:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/normal_background" android:state_pressed="false"/>
    <item android:drawable="@drawable/pressed_background" android:state_pressed="true"/>
</selector>

Than attach this as background to your button: android:background="@drawable/filename"

Source: http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList

answered Jun 05 '14 at 13:56

Thommy

5,070
2
28
51

But using this i will i have to create two buttons? First this button "@drawable/normal_background" than this button "@drawable/pressed_background" – user3711421 Jun 05 '14 at 14:15
No just one Button with @drawable/backgroundxml, where backgroundxml is the filename of your xml with the selector inside. – Thommy Jun 05 '14 at 14:21
I tried this but i dont know what @drawable/normal_background is. My project cannot a resource named normal_background – user3711421 Jun 05 '14 at 14:37
normal_background is just a wildcard for your own graphaics. You need to replace normal_background and pressed_background with the drawables which you want to show when the button is pressed or normal. – Thommy Jun 06 '14 at 06:21

score 0 · Answer 2 · answered Jun 05 '14 at 13:57

My first piece of advice would be to use a normal button, and then change it to a white color, which you can do through Android Studio's XML editor easily, if that is what you are using, and then have it turn on blue when clicked because that is the default nature of the apps that are created from Android Studio.

Volodymyr Kulyk · Answer 3 · 2015-04-20T11:55:49.783

Use OnTouchListener for your ImageButton:

int SELECTED_COLOR = Color.RED; //set to your color
int UNSELECTED_COLOR = Color.BLUE; //set to your color

OnTouchListener onTouchListener = new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
           switch(event.getAction())
           {
               case MotionEvent.ACTION_DOWN :
                   v.setBackgroundColor(SELECTED_COLOR); //selected color
                   break;
               case MotionEvent.ACTION_UP :
                   v.setBackgroundColor(UNSELECTED_COLOR); //unselected color
                     break;
           }
           return true;
    }
};

imageButton.setBackgroundColor(UNSELECTED_COLOR);
imageButton.setOnTouchListener(onTouchListener);

@Blackbelt are you kidding me? It is the right way to change bg of View in Pressed and UnPressed State! — Volodymyr Kulyk, Apr 20 '15 at 10:55

score 0 · Answer 4 · answered Jun 05 '14 at 14:05

Make two xml shapes in the folder drawable:

shape_1.xml:

      <?xml version="1.0" encoding="UTF-8" ?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
      <solid android:color="@android:color/white" />

      </shape>

shape_2.xml

     <?xml version="1.0" encoding="UTF-8" ?>
     <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
     <solid android:color="@android:color/black" />

     </shape>

create a selector_1.xml in drawable folder:

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

and set the selector as src of Your button:

            <ImageButton
    android:id="@+id/imageButton_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/selector_1" />

score 0 · Accepted Answer · edited May 23 '17 at 12:05

Thanks a lot for everyone's time. I found a great solution to what i wanted here: Standard Android Button with a different color

It only requires you to create one extra xml file.

Simplified like this:

Create a drawable folder inside res.
Create custom_button.xml inside that folder (choose selector as root element).

Past this code and link your layout button like this android:background="@drawables/custom_button"

<item android:state_pressed="true" >
    <shape>
        <gradient
            android:startColor="@color/yellow1"
            android:endColor="@color/yellow"
            android:angle="270" />
        <stroke
            android:width="3dp"
            android:color="@color/black" />
        <corners
            android:radius="3dp" />
        <padding
            android:left="10dp"
            android:top="20dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>

<item>        
    <shape>
        <gradient
            android:endColor="@color/white"
            android:startColor="@color/white"
            android:angle="270" />
        <padding
            android:left="10dp"
            android:top="20dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>

Priyanka · Answer 6 · 2014-06-05T14:39:40.843

-1

Create an xml file named imagebutton_selector in the drawable folder like this:

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

<item android:state_pressed="true" android:color="@color/blue" />
<item android:color="@color/white" />

</selector>

than in your layout xml where you added ImageButton set background like this:

<ImageButton
    ...
    android:background="@drawable/imagebutton_selector"
    ...
 />

edited Jun 05 '14 at 14:39

answered Jun 05 '14 at 14:13

Priyanka

677
5
20

Why did this get voted down? There is something like this that i want. However, your code doesnt work. I found this thread: http://stackoverflow.com/questions/1521640/standard-android-button-with-a-different-color Similar solution to your but much longer, trying to trim it down now. – user3711421 Jun 05 '14 at 14:50
@user3711421 i used same code and its working for me.. you just want to change the color on click of image button right!! – Priyanka Jun 05 '14 at 14:53
Hmm, you still use android:src="path to the icon" right? When i run the code you provided i get an error. And no concrete advice from the LogCat.. These buttons are inside of a fragment if that might be the reason why the app stop. – user3711421 Jun 05 '14 at 15:13
@user3711421 Still not found any solution of your problem ?? – Priyanka Jun 05 '14 at 17:52
I found it but couldn't post it yesterday because my account was to new. – user3711421 Jun 06 '14 at 10:53
@user3711421 Ok now post it...It can be help someone else. – Priyanka Jun 06 '14 at 11:05

Android ImageButton change background

6 Answers6