set background over the image on ImageView

Question

My gridView displays images (imageItem) from local storage with Picasso. Image's state is changed when it is selected by clicking the select icon in the top right conner, and on the selected state, the image has blue border like this:

I tried something like this:

public void onClick(View v) {
            if(!v.isSelected()){
                imageItem.setBackgroundResource(R.drawable.photoborder);
            }else{
                imageItem.setBackgroundDrawable(null);
            }
        }
    });

And I did see the border when the image has not been loaded. When Picasso finishes loading image, the border has been covered:

How to set border over image in ImageView? Thank you very much for any suggestion!!

Here is the layout for each image item:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

       <custome.SquaredImageView
        android:id="@+id/image_item_in_gridview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/ic_launcher"
        android:background="@drawable/attachment_gallery_images_items_background" />

    <ImageView
        android:id="@+id/imageCheckStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="2dp"
        android:layout_marginTop="2dp"
        android:padding="2dp"
        android:src="@drawable/abc_ic_cab_done_holo_dark" />

</RelativeLayout>

Answer 1

Your layout has 2 views; SquaredImageView to display the image, and ImageView as selection indicator. When you set the background for SquaredImageView, it will be placed behind SquaredImageView (as it is a background).

What you need is to add a View in front of SquaredImageView, then to modify its background in the code.

Add a View in your XML layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="right">

    <custome.SquaredImageView
        android:id="@+id/image_item_in_gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher"
        android:background="@drawable/attachment_gallery_images_items_background" />

    <View
        android:id="@+id/imageCheckBorder"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/photoborder" />

    <ImageView
        android:id="@+id/imageCheckStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="2dp"
        android:layout_gravity="right"
        android:layout_marginTop="2dp"
        android:padding="2dp"
        android:src="@drawable/abc_ic_cab_done_holo_dark" />

</FrameLayout >

Then modify the code to change the background of that View, instead of SquaredImageView. (in this example, it's named as imageCheckBorder)

public void onClick(View v) {
    if(!v.isSelected()){
        imageCheckBorder.setBackgroundResource(R.drawable.photoborder);
    }else{
        imageCheckBorder.setBackgroundDrawable(null);
    }
}