CODEWITHSUNDEEP
androidgridview
Kaitis
Kaitis

Reputation: 638

How to highlight only one item with a border in Gridview

I am trying to show the selected item in a gridview by creating a white border for it.

I managed to do it, but the problem I am having is how to "unselect" the one that was previously selected. The point is to keep only one item with a border.

Here is what I have so far :

GridView gridView = (GridView) findViewById(R.id.gridViewFX);
        gridView.setAdapter(new ImageAdapter(this));
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                for(int i = 0; i< parent.getCount(); i++){
                 //Unselect all the views in parent

                }
                //Select the item clicked
                Log.v("FILTER NAME:", filterNames.get(position));
                selectedFilterName = filterNames.get(position);

                ViewHolder selectedHolder = (ViewHolder)view.getTag();
                RoundedImageView iv = selectedHolder.getImageView();
                iv.setBorderColor(Color.WHITE);
                iv.setBorderWidth(20.f);


            }

UPDATE: Here is my ImageAdapter class and the ViewHolder:

public class ImageAdapter extends BaseAdapter {

        private LayoutInflater inflater;
        private Context mContext;

        public ImageAdapter(Context c) {
            mContext = c;
            inflater = LayoutInflater.from(mContext);
        }

        public int getCount() {
            return bitmaps.size();
        }

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

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

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            final ViewHolder holder;
            View view = convertView;
            if (view == null) {
                view = inflater.inflate(R.layout.item_grid_image_fx, parent, false);
                holder = new ViewHolder();
                assert view != null;
                holder.imageView = (RoundedImageView) view.findViewById(R.id.gridImageFXView);
                holder.textView = (TextView)view.findViewById(R.id.effectNameTextView);
                view.setTag(holder);
            } else {
                holder = (ViewHolder) view.getTag();
            }

            holder.imageView.setImageBitmap(bitmaps.get(position));
            holder.textView.setText("" + filterNames.get(position));

            return view;
        }
    }

    static class ViewHolder {
        public RoundedImageView getImageView() {
            return imageView;
        }


        RoundedImageView imageView;
        TextView textView;
    }

Any help with what to put in the for loop to "unselect" would be appreciated!

Upvotes: 1

Views: 1281

Answers (4)

amodkanthe
amodkanthe

Reputation: 4530

You can use selected item index an integer variable in your adapter then you can use following code

 notifyItemChanged(previousPosition);
 selectedPos = index_of_item_clicked;
 notifyItemChanged(selectedPos);

Upvotes: 1

Kaitis
Kaitis

Reputation: 638

SOLVED! - I finally figured it out.Here is the solution: -Replace this in code above and it works

//Unselect all views before selecting new one
                int count = parent.getChildCount();
                for (int i = 0; i < count; i++) {
                    View childAt = parent.getChildAt(i);
                    ViewHolder viewHolder = (ViewHolder)childAt.getTag();
                    viewHolder.getImageView().setBorderWidth(.0f);
                }

Upvotes: 1

amodkanthe
amodkanthe

Reputation: 4530

use selector

Write drawable file for your selector like this call it selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:state_pressed="true">
    <shape>
        <solid android:color="@color/blue" />
    </shape>
</item>

<item android:state_pressed="false">
    <shape>
       <solid android:color="@android:color/transparent" />
    </shape>
</item>
</selector>

then inside xml of gridview add following two lines

 android:drawSelectorOnTop="true"
 android:listSelector="@drawable/selector"

Upvotes: 0

Amsheer
Amsheer

Reputation: 7141

Before starts the following you have to set Id for the view.

Step 1:

Create an integer variable int id = 0;

Step 2:

Inside of onItemClick Listener change the value

id = change id here

Step 3:

Inside getView()

if (id == getLayoutId){
//Set Your Border
}else{
//Remove the border here
}

Note :

Now come to another problem you need to remove selection when click the same item. So

Under onItemClick need the conditions

if (id == your_current_clicked_id){
id = 0;
}else{
id = //set_your_id;
}

Upvotes: 1

Related Questions