android listview semitransparent selection color of a row

Question

I need to implement a semi-transparent selection of a row in a listview, and for 'pressed' state also.

If I apply solid color, then everything is working as expected. But if I apply semi-transparent color (#44444444) then I see default selection color (orange on my 2.3 android) and on top of it there is my color (it dims orange a little).

Why is there orange color under my one? How to fix this problem?

Here is my code: Selector xml in drawable/listselectorinvisible.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"
    android:state_selected="false"
    android:drawable="@color/transparent" />

<item android:state_pressed="true" 
    android:drawable="@color/semitransparent" />

<item android:state_selected="true" android:state_pressed="false"
    android:drawable="@color/semitransparent" />
</selector>

Listview row is defined in layout/topscore_row.xml

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" 
android:layout_height="wrap_content" 
android:layout_width="fill_parent"
android:background="@drawable/listselectorinvisible">
  <TextView android:layout_height="wrap_content" android:id="@+id/scrowNum" android:textColor="@color/fontButColor" android:text="#" android:textSize="24sp" android:layout_width="32dip" android:gravity="right|top" android:layout_gravity="top"></TextView>
  <LinearLayout android:layout_height="wrap_content" android:id="@+id/scrowNamLay" android:layout_width="142dip" android:orientation="vertical">
    <TextView android:layout_height="wrap_content" android:paddingTop="2dip" android:layout_width="fill_parent" android:id="@+id/scrowPlayer" android:textColor="@color/fontButColor" android:text="@string/tblPlayer" android:textSize="24sp" android:paddingLeft="2dip"></TextView>
    <TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/scrowOpPlayer" android:textColor="@color/fontButColor" android:text="@string/tblPlayer" android:textSize="14sp" android:paddingLeft="2dip"></TextView>
  </LinearLayout>
  <ImageView android:id="@+id/scrowImg" android:layout_height="wrap_content" android:src="@drawable/small_im_bt" android:padding="2dip" android:layout_marginTop="2dip" android:layout_width="26dip"></ImageView>
  <TextView android:layout_height="wrap_content" android:layout_width="48dip" android:id="@+id/scrowScore" android:layout_marginRight="5dip" android:gravity="right" android:textColor="@color/fontButColor" android:text="@string/tblScore" android:textSize="26sp"></TextView>
  <TextView android:layout_height="wrap_content" android:id="@+id/scrowTime" android:textColor="@color/fontButColor" android:text="@string/tblTime" android:gravity="center_horizontal" android:textSize="26sp" android:layout_width="58dip"></TextView>
</LinearLayout>

And finally the listview itself:

<ListView android:layout_width="match_parent" android:id="@+id/scoreList" android:paddingLeft="5dip" android:paddingRight="5dip" 
  android:cacheColorHint="#00000000" 
  android:choiceMode="none" 
  android:clickable="false" 
  android:focusable="false" 
  android:focusableInTouchMode="false" 
  android:longClickable="false" android:layout_height="298dip">
</ListView>

After failure of setting color in xml, I also tried to set listselectorinvisible in my CustomArrayAdapter via convertView.setBackgroundResource(R.drawable.listselectorinvisible); but no luck.

Code of the CustomAdapter:

        /* (non-Javadoc)
     * @see android.widget.ArrayAdapter#getView(int, android.view.View, android.view.ViewGroup)
     */
    @Override
    public View getView(int position, View convertView, ViewGroup parent)
    {
        View v = convertView;
        if (v == null) 
        {
            LayoutInflater vi = (LayoutInflater)app.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            v = vi.inflate(R.layout.topscore_row, null);
        }

        Score score = objects.get(position);
        int color = getColor(position, score);

        if (score != null) 
        {
            ImageView iv = (ImageView) v.findViewById(R.id.scrowImg);
            if (iv != null) 
            {
                iv.setImageResource(imgs[score.gameType]);
            }
            TextView tv = (TextView) v.findViewById(R.id.scrowNum);
            tv.setText(Integer.toString(position+1) + ".");
            tv.setTypeface(app.mainFont);
            tv.setTextColor(color);
            .... ....               
        }

        v.setBackgroundResource(R.drawable.listselectorinvisible);

        return v;

    }               

Thank you in advance.

Trembly

Answer 1

You have to set android:listSelector="@drawable/listcolor" in ListView

Your ListView will be

<ListView android:layout_width="match_parent" android:id="@+id/scoreList" android:paddingLeft="5dip" android:paddingRight="5dip" 
  android:cacheColorHint="#00000000" 
  android:choiceMode="none" 
  android:clickable="false" 
  android:focusable="false" 
  android:focusableInTouchMode="false" 
  android:longClickable="false" 
android:listSelector="@drawable/listcolor"
android:layout_height="298dip">
</ListView>

Have a look on the below URl

How to set Selection Color to ListView

Thanks Deepak

Bateau

Interesting, thanks. I am wondering though if it doesn't slow down things as it supresses the optimization mechanism of cacheColorHint. I will try tonight with a semi-transparent color as Northern Captain suggested, I like this design. – Kaitlynkaitlynn

Thanks for suggestion. I've just tried it on emulator and orange color disappeared, I see only my semitransparent. But this color also applied to the whole list while I am pressing the item in the list. I did not try it on a real device, don't have it with me, maybe this is a bug in emulator... – Trembly

@Kaitlynkaitlynn - I've also tried your code with addStatesFromChildren, but it don't change anything – Trembly

Checked android:listSelector attribute on the real device and got the same effect: while in pressed state selector color is applied to the whole listview, not only to the pressed row. Any ideas? – Trembly

Answer 2

After hours of playing around with the same issue, I finally got a solution.

First, in the ListView set listSelector="@android:color/transparent" (for some reason @null doesn't work here)

Second, have your row's most parent background be a stateful drawable (possibly stateful color) with state_pressed="@color/with_transparency"

Gilmer

I would add to this that it's safe to set the list background color to something as a solid which most people would want to do I think – Lissie

Answer 3

I dont'know if it matters but you selector doesn't have a default state (that should be the last one).

Also, it doesn't answer your question , but In top_score row, consider adding the following to your xml, to your root layout :

android:addStatesFromChildren="true" 

It will say the list item to catch the state of children, i.e. for a compound component to act as a single component and take the state of any component inside. (e.g. if one is selected then the compound component becomes selected).

Regards, Stéphane

Kaitlynkaitlynn