Add border to ImageView inside GridView

Question

How do I add a border to an ImageView inside a GridView after clicking on an image and disappear border if again clicked on the same image again?

gv_gridview.setOnItemClickListener(new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> parent, View v, int position, long Id) {
            // TODO Auto-generated method stub
            Toast.makeText(getBaseContext(),"You clikced on "+position,Toast.LENGTH_SHORT ).show();
            //  gv_gridview.setSelected(true);
            //  gv_gridview.setDescendantFocusability(ViewGroup.FOCUS_AFTER_DESCENDANTS);
            //  gv_gridview.setDrawSelectorOnTop(true);
        }
    });

Answer 1

This is grid item selection problem

I assume that your grid item is an ImageView.

Solution

Find working example project here: https://github.com/jskierbi/sample-gridview-select

1. You need to add CheckedImageView class to your project, so grid view can check the items for you.

import android.content.Context;
import android.util.AttributeSet;
import android.widget.Checkable;
import android.widget.ImageView;

public class CheckedImageView extends ImageView implements Checkable {

    boolean mFlgChecked = false;

    private static final int[] CHECKED_STATE_SET = {
            android.R.attr.state_checked
    };

    public CheckedImageView(Context context, AttributeSet attrs) {

        super(context, attrs);
    }

    @Override
    public int[] onCreateDrawableState(int extraSpace) {

        final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);
        if (isChecked()) {
            mergeDrawableStates(drawableState, CHECKED_STATE_SET);
        }
        return drawableState;
    }

    @Override
    public boolean isChecked() {

        return mFlgChecked;
    }

    @Override
    public void setChecked(boolean checked) {

        mFlgChecked = checked;
        refreshDrawableState();
    }

    @Override
    public void toggle() {

        mFlgChecked = !mFlgChecked;
    }
}

2. Add colors (res/values/colors.xml):

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="image_selected">#0000FF</color>
    <color name="transparent">#00000000</color>

</resources>

3. Add selector, this will define which color is used for which state of your image (res/drawable/checked_image.xml):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@color/image_selected" />
    <item android:drawable="@color/transparent" />

</selector>

3. Add grid item layout (res/layout/grid_view_item.xml)

Remember to change com.example.CheckedImageView package name so it reflects where you put your CheckedImageView class.

<?xml version="1.0" encoding="utf-8"?>
<com.example.CheckedImageView android:id="@+id/image"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/checked_image"
    android:cropToPadding="true"
    android:padding="6dp" />

4. And finally, use this layout in adapter. Below is full code for my Activity class:

import android.app.Activity;
import android.os.Bundle;
import android.support.annotation.DrawableRes;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;


public class MainActivity extends Activity {

    private static final @DrawableRes int[] IMAGES = {
            R.drawable.a001, R.drawable.a002, R.drawable.a003, R.drawable.a004, R.drawable.a005,
            R.drawable.a006, R.drawable.a007, R.drawable.a008, R.drawable.a009, R.drawable.a010,
            R.drawable.a011, R.drawable.a012, R.drawable.a013, R.drawable.a014, R.drawable.a015,
            R.drawable.a016, R.drawable.a017, R.drawable.a018
    };

    private GridView mGridView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mGridView = ((GridView) findViewById(R.id.gridview));
        mGridView.setChoiceMode(GridView.CHOICE_MODE_SINGLE);
        mGridView.setAdapter(new BaseAdapter() {
            @Override public int getCount() {
                return IMAGES.length;
            }
            @Override public Object getItem(int position) {
                return IMAGES[position];
            }
            @Override public long getItemId(int position) {
                return IMAGES[position];
            }
            @Override public View getView(int position, View convertView, ViewGroup parent) {
                if (convertView == null || !(convertView instanceof ImageView)) {
                    ImageView imageView = (ImageView) getLayoutInflater().inflate(R.layout.grid_view_item, parent, false);
                    imageView.setImageResource(IMAGES[position]);
                    convertView = imageView;
                }
                return convertView;
            }
        });
    }
}

5. Finally, you can use mGridView.getCheckedItemPosition() to get position of checked item.

Screen:

Answer 2

Not sure if this is what you are looking for but you can try the following...

In Your <GridView> Tag

android:horizontalSpacing="1dp"
android:verticalSpacing="1dp"