Gridview selected item keep highlighted and confirm image

Question

I am developing an android app with GridView. The gridView contains buttons. I have customized my gridView with button adapter.

The question is: I need to keep the selected item highlighted with borders. Now the selection is disappearing after releasing the press.
I am not an expert in android. So the next step after pressing the button is to display an image of cloud shape that says "confirm".

This is what I exactly needed.

Answer 1

Create a folder named drawable in your res folder. Now create a xml file in drawable folder, name it anything (in small laters) and put this code in the file.

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

    <item android:state_focused="true" android:state_pressed="true"><shape>

            <!-- <solid android:color="#CCCCCC"/> -->

            <gradient android:endColor="#67A7F8" android:startColor="#1067C8" />

            <stroke android:width="1dp" android:color="#000000" />

            <corners android:radius="8dp" />
        </shape></item>
    <item android:state_focused="false" android:state_pressed="true"><shape>

            <!-- <solid android:color="#07B107"/> -->

            <gradient android:endColor="#67A7F8" android:startColor="#1067C8" />

            <stroke android:width="1dp" android:color="#000000" />

            <corners android:radius="8dp" />
        </shape></item>
    <item android:state_focused="true" android:state_pressed="false"><shape>
            <solid android:color="#FFFFFF" />

            <stroke android:width="1dp" android:color="#0055FF" />

            <corners android:radius="8dp" />
        </shape></item>
    <item android:state_focused="false" android:state_pressed="false"><shape>
            <gradient android:angle="270" android:centerColor="#FFFFFF" android:endColor="#FFFFFF" android:startColor="#F2F2F2" />

            <stroke android:width="0.8dp" android:color="#000000" />

            <corners android:radius="12dp" />
        </shape></item>
    <item android:state_enabled="true"><shape>
            <padding android:bottom="4dp" android:left="5dp" android:right="4dp" android:top="4dp" />
        </shape></item>

</selector>

now in your GridView code set android:drawSelectorOnTop="true" and android:listSelector properties and select the drawable you have just created. It will resolve your problem.

Your grid view code will look something like this :

    <GridView
        android:id="@+id/lstFrames_available_frames"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:animateLayoutChanges="true"
        android:columnWidth="100dp"
        android:gravity="center"
        android:horizontalSpacing="3dp"
        android:listSelector="@drawable/round_buttons"
        android:numColumns="auto_fit"
        android:drawSelectorOnTop="true"
        android:stretchMode="columnWidth"
        android:verticalSpacing="3dp" >
    </GridView>

UPDATE You can use something like this in your custom adapter to achieve what you want :

public class AlbumCoverAdapter extends BaseAdapter {

    private Activity activity;

    private static LayoutInflater inflater = null;

    private int mSelected;

    public AlbumCoverAdapter(Activity a) {
        activity = a;

        inflater = (LayoutInflater)activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    }

    public int getCount() {
        return 50;
    }

    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }

    public static class ViewHolder {
        public TextView txtCaption;

        public ImageView imgImage;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        View vi = convertView;
        ViewHolder holder;
        if (convertView == null) {
            vi = inflater.inflate(R.layout.grid_adapter, null);
            holder = new ViewHolder();
            holder.txtCaption = (TextView)vi.findViewById(R.id.txtGridText);
            holder.txtCaption.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View arg0) {
                    mSelected = (Integer)arg0.getTag();
                    notifyDataSetChanged();
                }
            });
            vi.setTag(holder);
        } else
            holder = (ViewHolder)vi.getTag();

        try {
            holder.txtCaption.setTag(position);

            if (position == mSelected) {
                holder.txtCaption.setBackgroundResource(R.drawable.round_corner_background);
            } else {
                holder.txtCaption.setBackgroundDrawable(null);

            }

            holder.txtCaption.setText("Item: " + position);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return vi;
    }

}