GridView item list selector for multiple items not working in Android

Question

I want to draw selector on long press as shown in the picture. When I do long press on one item, the CAB menu is activated. But the list selector indicator goes off once after clicking. I want that list selectors to be active till the CAB menu is active for allowing multiple selection. And the color should toggle if I do double tap. This code works as a flicker when I click on it. Any one faced similar thing? Is there a hack to bring this functionality?

Gridview with multiple selection:

GridView setchoice in my OnCreate:

gridView.setChoiceMode(GridView.CHOICE_MODE_MULTIPLE_MODAL);
gridView.setMultiChoiceModeListener(new MultiChoiceModeListener());

This is working fine:

gridView.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View v,
            int position, long id) {

    ImageView iv = (ImageView) v
                        .findViewById(R.id.imageview2);
                ViewGroup gridChild = (ViewGroup) gridView
                        .getChildAt(position);
                ViewGroup gridGrandChild = (ViewGroup) gridChild
                        .getChildAt(0);
                ViewGroup gridGreatGrandChild = (ViewGroup) gridGrandChild
                        .getChildAt(0);
                int childSize = gridGreatGrandChild.getChildCount();
                if (iv.getId() == gridGreatGrandChild.getChildAt(1)
                        .getId()) {
                    if (iv.getVisibility() == 4)
                        iv.setVisibility(View.VISIBLE);
                    else
                        iv.setVisibility(View.INVISIBLE);
                }
}});

I am trying to implement the same code inside the MultiChoiceModeListener() class after the CAB menu is activated. Copied the same code inside

public void onItemCheckedStateChanged(ActionMode mode, int position,
            long id, boolean checked) {
}

method. But I am unable to access the elements inside the viewgroup. But I am able to access the GridView in whole. But not the individual child inside the Grid.

Here is my gridview layout:

    <GridView
            android:id="@+id/grid_view"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:columnWidth="190dp"
            android:drawSelectorOnTop="true"
            android:choiceMode="multipleChoice"
            android:horizontalSpacing="3dp"
            android:listSelector="@drawable/list_selector"
            android:numColumns="auto_fit"
            android:paddingRight="4dp"
            android:stretchMode="spacingWidthUniform"
            android:verticalSpacing="3dp" >
        </GridView>

Each item in the GridView is constructed with this layout:

<FrameLayout
    android:id="@+id/frameLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <RelativeLayout
        android:id="@+id/relativelayout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <ImageView
            android:id="@+id/imageview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
        </ImageView>

        <ImageView
            android:id="@+id/imageview2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/imageview"
            android:layout_alignLeft="@+id/imageview"
            android:layout_alignRight="@+id/imageview"
            android:layout_alignTop="@+id/imageview"   
            android:visibility="invisible"
             android:background="#76f9a49c"            
             >
        </ImageView>
    </RelativeLayout>

    <ImageView
        android:id="@+id/tagimage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|right"
        android:layout_marginRight="-4dp"
        android:src="@drawable/tag"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/countimage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="5dp"
        android:src="@drawable/dealcount_overlay"
        android:visibility="invisible" />

    <TextView
        android:id="@+id/count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="11dp"
        android:layout_marginRight="24dp"
        android:text="100"
        android:textColor="#fff"
        android:visibility="invisible" >
    </TextView>

    <ProgressBar
        android:id="@+id/progressbar"
        style="@android:style/Widget.ProgressBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:visibility="visible" />
</FrameLayout>

<TextView
    android:id="@+id/textView_nodata"
    android:layout_width="wrap_content"
    android:layout_height="150dp"
    android:layout_below="@+id/frameLayout1"
    android:layout_centerHorizontal="true"
    android:text="No data available. Try different query!"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:visibility="gone" />

</RelativeLayout>

Here is my list_selector.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@color/gridviewlistselector" android:state_focused="true" android:state_pressed="false"/>
<item android:state_focused="true"><shape>
        <solid android:color="#66000000" />
    </shape></item>
<item android:state_selected="true"><shape>
        <solid android:color="#66000000" />
    </shape></item>
<item android:state_pressed="true"><shape>
        <solid android:color="#66000000" />
    </shape></item>
<item android:state_enabled="false" android:state_focused="true"><shape>
        <solid android:color="#66000000" />
    </shape></item>

</selector>

How can I achieve the functionality? I am getting stuck at this. I tried various combinations on Selectors. But nothing seems to be working for me. Do I need to provide any other detail?

Ellingson

Answer 1

I'm not sure it's the right solution, but I set this for the android:background on my list items:

<selector xmlns:android="http://schemas.android.com/apk/res/android"
        android:exitFadeDuration="@android:integer/config_mediumAnimTime" >

    <!-- I never see this one - the grid items are not focusable -->
    <item android:state_pressed="false" android:state_focused="true" android:drawable="@drawable/list_focused" />

    <!-- while pressed -->
    <item android:state_pressed="true" android:drawable="@drawable/pressed_background" />

    <!-- while selected in actionmode -->
    <item android:state_activated="true" android:drawable="@color/pressed" />

    <item android:drawable="@android:color/transparent" />
</selector>

I did not set the android:listSelector attribute on the grid view.

Whippletree

But I need the solution only for listSelector items in my gridview – Ellingson

Yes. No other code was required. CHOICE_MODE_MULTIPLE_MODAL like yours. Also, I left out the attributes android:choiceMode and android:drawSelectorOnTop. – Whippletree

But this will be applied only to the background right. I want it to be on top of the grid view item. I have a semi transparent overlay on top of the grid view item. – Ellingson

No, I suppose it won't work in that case. I have also not been able to get this working using the GridView's listSelector. If you aren't able to find the real solution, you could put the selector on an overlay view within the list item view as a workaround. Good luck. – Whippletree

not perfect but useful hint.. i gave +1 for this..!! – Rorie

Answer 2

I m suggested to implement custom drawables as per your requirement.In long press listener ,you can apply it whatever state you are being required. This is one of the way to write code from our own scratch.

https://github.com/rameshkec85/Example-Android-CustomDrawableStates

Evaginate

Answer 3

this can be achieved by tracking the selected items and changing their backgrounds inside the adapter.

I guess you will get little help from this post

Frederickson

Answer 4

Give padding in your grid item. Maintain bean class for each object in grid adapter to track object is selected or unselected. Based on this value you can update your grid item background color acc to state selected/unselected. Update the object value in onitemclieck listner and also view background.

Trucking

Answer 5

For this you need to change Grid View Item, BackgroundColor on single/long click.

Below is the reference code, for the same:

GridView.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        mAdapter.setSelected(position,true);                                          
        view.setBackgroundColor(Color.XYZ);
    }
}

Hope this help's. Thanks.

Retrench

I need a transparent overlay on top. Not on the background. – Ellingson

Then you do not need to call setBackgroundColor, but remember that the background of you view should be transparent (in order to get overlay on top). Once you call setSelected(), the Grid view should select the item according to selector XML. – Retrench