How can I have an ImageView selector when using Picasso (Square) on Android?

Question

I know that Picasso sets the "src" therefore leaving the "image.background" in peace, but I cannot seem to make the ImageView respond to a selector (as in when it's touched to show the standard holo selector or any custom one).

Does anybody have a working sample? I must be missing something. I've tried different selectors but I don't see the touched state.

I've tried doing a setselected(true) in onClick() but I know that this is something that the View handles automatically if there's a drawable with states like:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:state_window_focused="false" android:drawable="@android:color/transparent" />

  <!-- Even though these two point to the same resource, have two states so the drawable will invalidate itself when coming out of pressed state. -->
  <item android:state_focused="true"  android:state_enabled="false" android:state_pressed="true" android:drawable="@drawable/abc_list_selector_disabled_holo_light" />
  <item android:state_focused="true"  android:state_enabled="false"                              android:drawable="@drawable/abc_list_selector_disabled_holo_light" />
  <item android:state_focused="true"                                android:state_pressed="true" android:drawable="@drawable/abc_list_selector_background_transition_holo_light" />
  <item android:state_focused="false"                               android:state_pressed="true" android:drawable="@drawable/abc_list_selector_background_transition_holo_light" />
  <item android:state_focused="true"                                                             android:drawable="@drawable/abc_list_focused_holo" />

</selector>

The Java code to load the image is:

Picasso.with(mContext).load(url).error(R.drawable.error).fit().into(holder.someIV);

And the XML for that someIV looks like:

<ImageView
    android:id="@+id/list_item_image"
    android:layout_width="match_parent"
    android:layout_height="@dimen/mixset_list_image_size"
    android:layout_marginTop="1dp"
    android:layout_marginLeft="1dp"
    android:layout_marginRight="1dp"
    android:contentDescription="@string/mixes"
    android:scaleType="centerCrop"
    android:background="@drawable/mix_list_art_selector"
    android:cropToPadding="false" />

The background is set to the above selector.

Any ideas? Thanks.

Answer 1

Here's what I did:

what I wanted to highlight was an ImageView that was part of the layout of a list_item (technically speaking, a row).

But I didn't want to highlight the whole row, just an image inside it.

I had to wrap the ImageView in a FrameLayout.

  <FrameLayout
    android:id="@+id/list_item_image_wrapper"
    android:layout_width="match_parent"
    android:layout_height="@dimen/mixset_list_image_size"
    android:clickable="true"
    android:foreground="@drawable/mix_list_art_selector">
  <ImageView
      android:id="@+id/list_item_image"
      android:layout_width="match_parent"
      android:layout_height="@dimen/mixset_list_image_size"
      android:layout_marginTop="1dp"
      android:layout_marginLeft="1dp"
      android:layout_marginRight="1dp"
      android:contentDescription="@string/mixes"
      android:scaleType="centerCrop"
      android:clickable="false"
      android:focusable="false"
      android:cropToPadding="false" />
</FrameLayout>

… and also move the Click Listeners to the FrameLayout.

Thanks to @jason_t for the pointer to the solution.

Please note that for other widgets like TextView, the above is likely not needed.