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
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
setClickable(true)for the bottom bar's RelativeLayout in
If anyone knows a solution to this please let me know in the comments or respond to my question asked on stackoverflow.
I've just launched a new side project of mine:
Bugfender - A modern remote logger tailor-made for mobile development
It's currently free and you can sign up here: https://app.bugfender.com/signup
Any kind of feedback is more than appreciated :-)