CODEWITHSUNDEEP
androidbackgroundimagebutton
user3711421
user3711421

Reputation: 1808

Android ImageButton change background

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.

Upvotes: 0

Views: 3885

Answers (6)

Volodymyr Kulyk
Volodymyr Kulyk

Reputation: 6546

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

Upvotes: 0

user3711421
user3711421

Reputation: 1808

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:

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

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

Upvotes: 0

Priyanka
Priyanka

Reputation: 675

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

Upvotes: -1

Opiatefuchs
Opiatefuchs

Reputation: 9870

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

Upvotes: 0

AeroVTP
AeroVTP

Reputation: 336

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.

Upvotes: 0

Thommy
Thommy

Reputation: 5407

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

Upvotes: 4

Related Questions