Android - overlay small check icon over specific image in gridview or change border

Question

I've just asked a question about an hour ago, while waiting for replies, I've thought maybe I can achieve what I want differently. I was thinking of changing the image but it would be better if I could perhaps overlay something over the top of complete levels in the gridview i.e a small tick icon At the moment, when a level has been completed I am storing that with sharedpreferences So I have a gridView layout to display images that represent levels. Let's just say for this example I have 20 levels. When one level is complete is it possible to overlay the tick icon or somehow highlight the level image. Maybe change the border of the image?? Here are the image arrays I use ``` int[] imageIDs = { R.drawable.one, R.drawable.two, R.drawable.three, R.drawable.four, R.drawable.five, R.drawable.six etc....... ``` and then I have my code to set the images in gridView. Obviously there is more code in between. ``` public View getView(int position, View convertView, ViewGroup parent) { ImageView…

Accepted Answer

Yeah, definitely possible. I'd say you could simply subclass `ImageView` and handle the drawing in the `onDraw(Canvas)` method. For example (and this is just a quickie, in practice I'd probably handle drawing it at different sizes and a fixed offset in dip for different canvas sizes):

```
public class MarkableImageView extends ImageView {
    private boolean checked = true;

public MarkableImageView(Context context) {
        super(context);
    }

public MarkableImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

public MarkableImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

public void setChecked(boolean checked) {
        this.checked = checked;
        invalidate();
    }

public boolean isChecked() {
        return checked;
    }

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(checked) {
            Bitmap check = BitmapFactory.decodeResource(
                    getResources(), R.drawable.check);
            int width = check.getWidth();
            int height = check.getHeight();
            int margin = 15;
            int x = canvas.getWidth() - width - margin;
            int y = canvas.getHeight() - height - margin;
            canvas.drawBitmap(check, x, y, new Paint());
        }
    }
}
```

EDIT: Then your code would be something like:

```
public View getView(int position, View convertView, ViewGroup parent) 
{
   MarkableImageView imageView;
   if (convertView == null) {
       imageView = new MarkableImageView(context);
       imageView.setLayoutParams(new GridView.LayoutParams(140, 140));
       imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
       imageView.setPadding(5, 5, 5, 5);
   } else {
       imageView = (MarkableImageView) convertView;
   }
   imageView.setImageResource(imageIDs[position]);
   imageView.setChecked(shouldBeChecked);
   return imageView;
```

Android - overlay small check icon over specific image in gridview or change border

Solution

Problem