Android custom ArrayAdapter | Change icon on ImageView click

Question

I have a list with elements that use a custom layout which consists of a text view and an image view. For this, I follow ViewHolder pattern like explained here. The image views display one of two icons and I want to change the icon of the clicked image view.

So my first approach was to define the on click listener of the ImageViews in the overridden getView function of my adapter class. The problem is that when the icon of the first ImageView changes and I scroll down to the last its icon changed as well. This question here was not helpful.

Here I found that it's not the best way to handle the click in the getView function but it's better to do it in the listView.setOnItemClickListener. I tried it but I am not able to find out whether an ImageView was clicked or not as the parent object holds the list item and the view parameter the LinearLayout in which the ImageView is contained (even when I click directly in the ImageView). Setting android:focusable="false" of the outer LinearLayout as it is suggested here did not help.

I'm sure someone must have had this issue / use case but I'm not able to find a solution. So, what's the best way to handle the click of the ImageView in my custon list item view?

when you click in the imageview you should have the second icon.what if you clicked again, the first icon appears? — Karim, Jul 02 '17 at 22:09

score 0 · Answer 1 · answered Jul 02 '17 at 22:29

If you have two icons, you can simply put a custom checkbox instead of an imageview :

<CheckBox

            android:id="@+id/customchechecbox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/checkbox_selector"
            android:button="@android:color/transparent"  />


checkbox_selector :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/checkbox" 
          android:state_checked="false"/>
    <item android:drawable="@drawable/checkboxselected" 
          android:state_checked="true"/>
    <item android:drawable="@drawable/checkbox"/>    
</selector>

I see the point of your approach but regard it as a "tricky workaround" which is why I followed @DaveNOTDavid's advice. — Patrick, Jul 03 '17 at 14:59

score 0 · Accepted Answer · answered Jul 02 '17 at 22:34

0

Try adding the following attributes to the clickable ImageView instead of its ViewGroup, your LinearLayout:

android:focusable="false"
android:focusableInTouchMode="false"

... and as far as updating UI in a AdapterView/ListView/RecyclerView goes, you should make good use of an int flag that tracks the position of the list item that was clicked, and then set it as a conditional statement in getView() before invoking notifyDataSetChanged(), since "every other" row will be updated, especially in lists of say, 100 rows.

I actually answered this in a similar question here and here.

answered Jul 02 '17 at 22:34

DaveNOTDavid

1,753
5
19
37

1

Thanks, I got it working. As a matter of fact, the values _focusable_ and _focusableInTouchMode_ did not make a difference. I created a private variable in my `Adapter` class which stores the position of the image with the pause icon. In the `draw` method I distinguished between the cases where position of the `draw` method equals the position of the pause icon to set the correct icon. [Here](https://stackoverflow.com/a/16453443) I found some advice where to assign the `OnClickListener` to have good performance. – Patrick Jul 03 '17 at 14:57

Android custom ArrayAdapter | Change icon on ImageView click

2 Answers2