ImageView selector does not work

Question

I am forming a tabhost like layout in my application with several ImageView. When I select on an item, the image will change. However, I tried to click on it, nothing happens! why???

activity_main.xml

<TableLayout 
    android:id="@+id/main_tab_bar"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:stretchColumns="0,1,2,3,4">
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView 
            android:id="@+id/news"
            android:clickable="true"
            android:focusable="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/main_tab_news_selector"/>
        <ImageView 
            android:id="@+id/share"
            android:clickable="true"
            android:focusable="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/main_tab_share_selector"/>
        <ImageView 
            android:id="@+id/camera"
            android:clickable="true"
            android:focusable="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/main_tab_camera_selector"/>
        <ImageView 
            android:id="@+id/status"
            android:clickable="true"
            android:focusable="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/main_tab_status_selector"/>
        <ImageView 
            android:id="@+id/others"
            android:clickable="true"
            android:focusable="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/main_tab_others_selector"/>
    </TableRow>
</TableLayout>

main_tab_news_selector.xml (the other selectors are just similar)

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

</selector>

Solution 1

Just add this to your ImageView

android:clickable="true"  

Solution 2

Your drawable xml code should look like this

<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/pressed.png" />
    <item android:state_selected="true" android:drawable="@drawable/select.png" />
   <item android:state_activated="true" android:drawable="@drawable/pressed.png" />
    <item android:drawable="@drawable/normal.png" />
</selector>

Solution 3

Set the focusableInTouchMode to be true and listen to its state_focus in the selector.

It solves the problem :)

activity_main.xml

<TableLayout 
    android:id="@+id/main_tab_bar"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:stretchColumns="0,1,2,3,4">
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView 
            android:id="@+id/news"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/main_tab_news_selector"/>
        <ImageView 
            android:id="@+id/share"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/main_tab_share_selector"/>
        <ImageView 
            android:id="@+id/camera"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/main_tab_camera_selector"/>
        <ImageView 
            android:id="@+id/status"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/main_tab_status_selector"/>
        <ImageView 
            android:id="@+id/others"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/main_tab_others_selector"/>
    </TableRow>
</TableLayout>

the selectors

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

    <item android:drawable="@drawable/ic_action_airplane_mode_on" />

</selector>

Solution 4

You have to change

1. ImageView to ImageButton
2. src to background

src also works butt it show some space around the drawable.

Write android:state_focused="true" before android:drawable="@drawable/ic"

View more solutions