Android: Custom List Item with nested clickable Button

This tutorial will show you how to add a button (or any other clickable item) to a customized list view item.

In the screenshot above you can see a ListView with custom built items. Each list item consists of

• TextView for the title
• TextView for the content
• RelativeLayout (clickable) consisting of
• TextView: "For more information click here"
• ImageView for the arrow icon

We start this tutorial at a point where you should already know how to create your own customized ListViews and Adapters. If you have no clue how to do so please let me know in the comments. If there's a demand I will eventually compile another tutorial about creating custom list items and list adapters in the future.
1) Build custom adapter that extends BaseAdapter and implement all the required inherited abstract methods from the parent class:

2) Implement View getView(int position, View convertView, ViewGroup parent):
This is where you create and manipulate the view that is used for a list item. I highly recommend that you take advantage of a view holder as it is described in this API example to improve speed and efficiency.

The crucial part is now that you, after you have inflated the list item's main layout

you also need to get hold of the sub-layout (bottom part). That's the part you want to be clickable.

3) Create an onClickListener for the bottom layout and associate the data (in this case a web URL) with the current view:

While for a OnItemClickListener, which is associated to each item of a ListView, we always know which item of the list has been selected through the int position paremeter. We don't have this information for our OnClickListener that is used in the bottom layout. So how do we get the neccessary information that is associated to the current list item?

The trick is to use View.setTag() and View.getTag(). The Android documentation states: “Sets the tag associated with this view. A tag can be used to mark a view in its hierarchy and does not have to be unique within the hierarchy. Tags can also be used to store data within a view without resorting to another data structure.”

In this example we use setTag() to store an URL with each sub-layout and getTag() in the onClickListener to extract that URL whenever a sub-layout was clicked. Then we create an Intent for our WebView, pass the URL to it and start a new Activity. And Voilà! You should have a web browser now displaying the website associated to the item you clicked before.

However, there's one little detail that keeps annoying me. Even though I now can click/tap the bar at the bottom via the touch screen interface I'm not able to select it via the trackball. It always selects the whole list item (see screenshot below) and from there goes directly to the next list item ignoring the bottom bar, even though I set .setFocusable(true) and setClickable(true) for the bottom bar's RelativeLayout in getView().

If anyone knows a solution to this please let me know in the comments or respond to my question asked on stackoverflow.