How to set onClick in ListView Item?

10 February 2016 by Javal Nanda No comments

Hello, fellow android developers!!! This post is meant related to a problem which I feel is most common when using custom list item.

You might have come across a situation where you have Button/ImageButton inside your list item and
you want to handle the click event of that button and the list item separately but cannot achieve the event for the list item click in any of following methods:

setOnItemClickListener on ListView
setOnItemSelectedListener on ListView
setOnClickListener on each ListView Item.

The reason being you have other clickable/focusable components inside your list item which receives focus instead of a list item.
For example, your layout for list item looks something like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/rounded_corner"
    android:padding="10dp"
    >

    <TextView
        android:id="@+id/feed_text"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingRight="20dp"
        android:paddingBottom="5dp"
        android:maxLines="2"
        android:text="pasdfa asdfasdf wer asdfasdf2 rwafasdfasd fasdfwerasdfasdf"
        android:ellipsize="end"
        android:maxLength="140"
        android:textSize="14sp"
        android:textColor="@color/menu_text_color"/>
        
		<LinearLayout
			android:layout_below="@+id/feed_text"
            android:focusable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center_horizontal">

            <ImageButton
                android:id="@+id/upvote_button"
                android:focusable="false"
                android:focusableInTouchMode="false"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/upvote_state"/>
            <TextView
                android:focusable="false"
                android:focusableInTouchMode="false"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="10sp"
                android:paddingTop="5dp"
                android:text="UpVote"/>
        </LinearLayout>
 
</RelativeLayout> 

Here you have an ImageButton inside the list item which will consume the click event and the click listeners for list item will not be called.
To solve this issue set the descendantFocusability of the parent of ImageButton to blocksDescendants. This will block all descendants (elements) of that view group from receiving focus.
The updated layout will be as follows:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/rounded_corner"
    android:padding="10dp"
    >

    <TextView
        android:id="@+id/feed_text"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingRight="20dp"
        android:paddingBottom="5dp"
        android:maxLines="2"
        android:text="pasdfa asdfasdf wer asdfasdf2 rwafasdfasd fasdfwerasdfasdf"
        android:ellipsize="end"
        android:maxLength="140"
        android:textSize="14sp"
        android:textColor="@color/menu_text_color"/>
        
		<LinearLayout
			android:layout_below="@+id/feed_text"
            android:focusable="false"
            android:descendantFocusability="blocksDescendants"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center_horizontal">

            <ImageButton
                android:id="@+id/upvote_button"
                android:focusable="false"
                android:focusableInTouchMode="false"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/upvote_state"/>
            <TextView
                android:focusable="false"
                android:focusableInTouchMode="false"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="10sp"
                android:paddingTop="5dp"
                android:text="UpVote"/>
        </LinearLayout>
 
</RelativeLayout> 

Feel free to contact javal@idyllic-software.com for any queries or connect on linkedin

Javal Nanda

Follow me on Twitter

Subscribe To Our Blog

Get access to proven marketing ideas, latest trends and best practices.

Next up home

Contact

Lets build cool stuff

Share your contact information & we will get in touch!

I want (Tell us more about your dream project)