Selected state for ImageButton

Question

I have image Button like below.

<ImageButton
        android:id="@+id/imagebutton"
        android:layout_width="250dp"
        android:layout_height="100dp" 

        android:background="@drawable/perm_group_calendar"/>

perm_group_calendar.xml

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">


    <item android:state_selected="true" android:drawable="@drawable/perm_group_calendar_selected" />
    <item android:drawable="@drawable/perm_group_calendar_normal" />    
</selector>

The selected state is not working by itself. I found answer from this SO

Android ImageButton with a selected state?

I used the below code. now it works.

 imageButton.setOnClickListener(new OnClickListener() {

           public void onClick(View button) {
               if (button.isSelected()){
                   button.setSelected(false); 
                   //...Handle toggle off
               } else {
                   button.setSelected(true);
                   //...Handled toggle on
               }
           }

       });

Why We have to toggle the selected state ?

You would have to use a `ToggleButton` for that, with the `checked` property. — nhaarman, Jan 25 '14 at 19:03
imageButton.setImageDrawable(getContext().getResources().getDrawable(R.drawable.perm_group_calendar)); try this — Triode, Jan 25 '14 at 19:10
@RajeshCP Even if i use the setImageDrawable in my code , I have to set the selected state by myself using the oncliklistener, then only it works. — saravanan, Jan 25 '14 at 19:17
yeah you set the drawable like this, and rest remains the same. Inside your click listener button.setSelected(!button.isSelected()); — Triode, Jan 25 '14 at 19:18

score 2 · Accepted Answer · answered Jan 25 '14 at 19:05

2

Because the selected state isn't automatically shown by an ImageButton, which - normally (as opposed to artificially) - shows only the normal and pressed statuses (not sure about the focused state, but it should).

You could else use a custom ToggleButton (or a Switch or a CheckBox).

Anyway, your solution doesn't look that bad at all, to me.

answered Jan 25 '14 at 19:05

Phantômaxx

37,901
21
84
115

yeah . I can understand, so the selected state wont work automattically. we should do it ourself. is this the design issue from android development team. – saravanan Jan 25 '14 at 19:11
I wouldn't call it an issue. It's by design. Good that we can overcome such "limitations" in an easy way... ;) – Phantômaxx Jan 25 '14 at 19:22

score 2 · Answer 2 · edited May 23 '17 at 12:13

i think you should do some thing as the following in your drawable XML file :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/aaaa" />
    <item android:state_pressed="true" android:drawable="@drawable/aaaa"></item>
    <item android:drawable="@drawable/ic_launcher" />    
</selector>

and your ImageButton like the following :

<ImageButton
        android:id="@+id/imageView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#123456"
        android:padding="10dp"
        android:scaleType="fitXY"
        android:src="@drawable/drawableFile" />

you should add the android:state_pressed="true" , and that should do the trick for the pressed state .

as RomianGuy mentioned in this answer :

state_selected is used when an item is selected using a keyboard/dpad/trackball/etc . so i think thats why you have to toggle the state .

Hope That Helps .

It is not working. Pressed state is working . Selected state is not working. — saravanan, Jan 26 '14 at 05:34

score 0 · Answer 3 · answered Dec 25 '20 at 20:00

Just a note. If you want to change icon AND color for ImageButton - you need 2 selectors - for 'android:src' and for 'android:src' :

<ImageButton
            android:id="@+id/ibToFavorites"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_gravity="center_vertical"
            android:background="@null"
            android:src="@drawable/selector_checkin_to_favourite"
            android:tint="@color/selector_checkin_to_favourite"
            android:layout_marginEnd="15dp" />

res/drawable/selector_checkin_to_favourite.xml

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

res/color/selector_checkin_to_favourite.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected = "true"
        android:color="@color/colorAccent"/>
    <item
        android:color="@color/colorSecondary"/>
</selector>

Selected state for ImageButton

3 Answers3