Android GridView highlight item as selected

Question

I am trying to build me a basic color picker, where i display a list of 10 colors for the user to choose from.

I have decided to use GridView to hold the list of colors which are in my case and ImageView with ShapeDrawables (Would love to hear about a better solution).

I'm having trouble figuring out how to highlight an item as selected when clicked and how to keep only one item selected at the same time (single choice mode).

Any idea how?

CODE:

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener {

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

        GridView gridView = (GridView) findViewById(R.id.mygrid);
        gridView.setAdapter(new MyAdapter(this));
        gridView.setOnItemClickListener(this);
    }

    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

        // Selected color
        int color = (int) adapterView.getItemAtPosition(i);
        // Selected view
        ImageView bla = (ImageView) view;
    }

    public class MyAdapter extends BaseAdapter {

        private final Context c;

        public MyAdapter(Context c) {
            this.c = c;
        }

        @Override
        public int getCount() {
            return colors.length;
        }

        @Override
        public Object getItem(int i) {
            return colors[i];
        }

        @Override
        public long getItemId(int i) {
            return 0;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {

            ImageView ivColor;

            if (view == null) {

                LinearLayout.LayoutParams lpParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                lpParams.gravity = Gravity.CENTER;

                ivColor = new ImageView(c);
                ivColor.setLayoutParams(lpParams);
            } else {

                ivColor = (ImageView) view;
            }

            ShapeDrawable shape = new ShapeDrawable(new OvalShape());
            shape.getPaint().setColor(colors[i]);
            shape.setIntrinsicWidth(180);
            shape.setIntrinsicHeight(180);

            ivColor.setImageDrawable(shape);

            return ivColor;
        }

        private int[] colors = {
                Color.BLUE, Color.BLACK, Color.CYAN, Color.GREEN, Color.YELLOW, Color.DKGRAY, Color.MAGENTA, Color.RED
        };
    }
}

XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <GridView
        android:id="@+id/mygrid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:choiceMode="singleChoice"
        android:columnWidth="64dp"
        android:horizontalSpacing="8dp"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
        android:verticalSpacing="8dp" />

</LinearLayout>

Answer 1

GridView has a "setSelection" method on it that you can use to maintain the currently selected item position. You can use a selector in the background or somewhere in your layout for each item to change the appearance:

http://developer.android.com/guide/topics/resources/color-list-resource.html

What you want is "state_selected". So if you're trying to set a background color, create a drawable xml file like this and set it as the background of your color swatch.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
  <item android:state_selected="true" android:color="hex_color" />
  <item android:state_selected="false" android:color="hex_color_unselected" />
</selector>

You have lots of options you can do, such as putting a border around the selected swatch, etc... but this is the basic idea.