set background color in imagebutton on click

Question

Here is my file. I want to change the background color of my image button when it is clicked so the user can see it is clicked because when I clicked it does not seem I clicked it but it is working. I can see on other questions that you need a drawable to be able to do it but i do not know what will I put in the xml file in the drawable folder. Can you please help me? Thank you.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<RelativeLayout
    android:id="@+id/webViewHeaderArea"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:background="@android:color/white">

    <ImageButton
        android:id="@+id/btnCloseWebView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerHorizontal="false"
        android:layout_centerInParent="true"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        android:src="@drawable/close"
        android:background="@null"
        android:contentDescription="@string/button" />

    <ImageButton
        android:id="@+id/btnReload"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/btnCloseWebView"
        android:src="@drawable/reload"
        android:background="@null"
        android:contentDescription="@string/button" />

    <ImageButton
        android:id="@+id/btnBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="15dp"
        android:src="@drawable/back"
        android:background="@null"
        android:contentDescription="@string/button" />

    <ImageButton
        android:id="@+id/btnStop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="17dp"
        android:layout_toRightOf="@+id/btnBack"
        android:src="@drawable/stop"
        android:background="@null"
        android:contentDescription="@string/button" />

    <ImageButton
        android:id="@+id/btnForward"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="16dp"
        android:layout_toRightOf="@+id/btnStop"
        android:src="@drawable/forward"
        android:background="@null"
        android:contentDescription="@string/button" />

</RelativeLayout>

    <WebView android:id="@+id/web_engine"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent" />

have a look http://developer.android.com/guide/topics/ui/controls/button.html#CustomBackground scroll to custom background — Tarun, Mar 29 '14 at 13:25

score 2 · Accepted Answer · answered Mar 29 '14 at 13:27

2

you need to create one xml file in drawable folder named contact_bg.xml.

Then, in that you have to write like below.

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

set this as a image source in your image button.

and put two file in drawable-hdpi named contact.png and contact_hover.png

Hope, this will help

answered Mar 29 '14 at 13:27

Komal Sorathiya

228
1
9

where should i call contact_bg? – duderbear Mar 29 '14 at 14:04
android:src="@drawable/contact_bg" set this in your imagebutton – Komal Sorathiya Mar 31 '14 at 05:24

score 0 · Answer 2 · edited May 23 '17 at 11:59

You can use selector for this. Either use drawable images or you can define your own shapes for each of the state. You can do some thing like this.

<item android:state_pressed="true" >
    <shape>
        <gradient
       <!-- set values here -->
            />
        <stroke
       <!-- set values here -->
             />
        <corners
      <!-- set values here -->
             />
        <padding
      <!-- set values here -->
            />
    </shape>
</item>

Also check out this link

set background color in imagebutton on click

2 Answers2