set background over the image on ImageView

android, gridview, imageview

Solution

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);
    }
}

Problem

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> ```

Original source