How to switch selected ImageView border using selector

Question: How to switch selected ImageViews border using selector?

Answer:

In your dimens.xml:

<resources>
    <dimen name="filter_margin">7dp</dimen>
    <dimen name="filter_border">3dp</dimen>
</resources>

For your ImageView:

<ImageView
                android:id="@+id/filter_06"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:clickable="true"
                android:layout_marginLeft="@dimen/filter_margin"
                android:layout_marginRight="@dimen/filter_margin"
                android:scaleType="centerCrop"
                <!-- the padding and background attribute is important -->
                android:padding="@dimen/filter_border"
                android:background="@drawable/filter_selector"/>

Then create filter_selector.xml, filter_border_selected.xml, filter_border_unselected.xml in drawable/:

filter_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"
          android:drawable="@drawable/filter_border_selected"/>
    <item android:state_selected="false"
          android:drawable="@drawable/filter_border_unselected"/>
</selector>

filter_border_selected.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke android:width="@dimen/filter_border" android:color="#4171ff" />
    <padding android:left="@dimen/filter_border" android:top="@dimen/filter_border" android:right="@dimen/filter_border"
             android:bottom="@dimen/filter_border" />
</shape>

filter_border_unselected.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke android:width="@dimen/filter_border" android:color="#000000" />
    <padding android:left="@dimen/filter_border" android:top="@dimen/filter_border" android:right="@dimen/filter_border"
             android:bottom="@dimen/filter_border" />
</shape>

Then in your onClick() event:

        final ViewGroup vg = ((ViewGroup) findViewById(R.id.filter_panel));

        for(int i = 0; i < vg.getChildCount(); i++){

            vg.getChildAt(i).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //remove all filter selected state
                    for(int x = 0; x < vg.getChildCount(); x++){
                        (vg.getChildAt(x)).setSelected(false);
                    }

                    v.setSelected(true); //reselect the current clicked filter
                }
            });
        }

vxhviet/borderSelector.md