Android layout - ImageView focused, but doesn't show anything on screen (no highlight)

Question

If I set my ImageView to be both clickable and focusable, it works, but I have no way to tell which image is focused. What's the best way to get it to draw an orange border around the view so the user knows it's currently in focus?

I tried dropping it in a LinearLayout and setting that to be focusable and clickable instead, but didn't have any luck. Even when I put a margin on it, there's nothing to indicate that it was selected.

Answer 1

You can use a drawable with a selector as the background.

For example, I have gallery_image_bg.xml in res/drawable:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
          android:constantSize="true">
  <item android:state_selected="true">
    <shape android:shape="rectangle">
      <solid android:color="#E6E4E0"/>
      <stroke android:width="3dp" android:color="#F9C11E"/>
      <padding android:left="3dp"
               android:top="3dp"
               android:right="3dp"
               android:bottom="3dp" />
    </shape>
  </item>
  <item android:state_pressed="true">
    <shape android:shape="rectangle">
      <solid android:color="#E6E4E0"/>
      <stroke android:width="3dp" android:color="#F9C11E"/>
      <padding android:left="3dp"
               android:top="3dp"
               android:right="3dp"
               android:bottom="3dp" />
    </shape>
  </item>
  <item>
    <shape android:shape="rectangle">
      <solid android:color="#E6E4E0"/>
      <stroke android:width="3dp" android:color="#FFF"/>
      <padding android:left="3dp"
               android:top="3dp"
               android:right="3dp"
               android:bottom="3dp" />
    </shape>
  </item>
</selector>

This creates three different-colored 3dp lines around the image. They are visible because the padding forces the image to render in a slightly smaller area.

Used in code like so:

image.setBackgroundResource(R.drawable.gallery_image_bg)

Answer 2

The quick solution is to use a listener, which will respond to the click, and set an orange border on the imageView...

imageView.setOnClickListener(listener)

But you have to do that for all the ImageView items. At least they can share the same listener.

The long solution is to implement your own View, extending ImageView, which draws its own orange border in response to a click.

I assume you want this to work like radio buttons, where clicking on an ImageView will remove the border from the previously selected ImageView? So you will need the shared listener to maintain a reference to the currently selected ImageView, which can then be "de-selected" when a new ImageView is clicked.

Answer 3

Late answer, but you can also use a LayerDrawable for the image source. Then you don't have to mess around with the background, padding, etc.

LayerDrawable d = new LayerDrawable(new Drawable[]{new BitmapDrawable(myBmp), getResources().getDrawable(R.drawable.my_selector_list)});
imageView.setImageDrawable(d);