Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change Selection in a ListView from Orange to Green

How do I do this per selected list item.

I tried adding this to android:background

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" 
        android:state_pressed="false"
        android:drawable="@color/android_green" />
    <item android:state_focused="true" 
        android:state_pressed="true"
        android:drawable="@color/black_alpha" />
    <item android:state_focused="false" 
        android:state_pressed="true"
        android:drawable="@color/black_alpha" />
    <item android:drawable="@color/white_alpha" />
</selector> 

but it does not work, it changes the entire ListView.


Still not working, here is what I have so far

::listview_background

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:drawable="@color/black_alpha" />
    <item android:drawable="@color/white_alpha" />  
</selector> 

::My view that is using the above

<ListView android:id="@+id/list" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:layout_below="@+id/round"
    android:listSelector="@drawable/listview_background">
</ListView>

The problem is that the black_alpha will apply the the entire list, not just the selected list item

like image 363
jax Avatar asked Jan 31 '10 04:01

jax


3 Answers

Here's a good article on how to use selectors with lists.

Instead of setting it to be the android:background of the ListView, I believe you want to set android:listSelector as shown below:

<ListView android:id="@+id/list" 
      android:layout_width="fill_parent"
      android:layout_height="wrap_content" 
      android:layout_gravity="center"
      android:divider="@null" 
      android:dividerHeight="0dip"
      android:listSelector="@drawable/list_selector" />
like image 147
Jay Askren Avatar answered Nov 17 '22 21:11

Jay Askren


Jax, you said that:

The problem is that the black_alpha will apply the the entire list, not just the selected list item

I had the same problem. After playing around with it for a while, I was able to get it to stop applying the color to the whole list by using a 3x3 png image of the color I wanted instead of applying a color. So for some weird reason if you use a color you get the odd background behavior, when you use a png, it works fine. :S

So that is one way to get around it.

-----Another way----------

I found the best results when I set the listView selector to not have any states like this:

res/drawable/list_selector.xml

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

Then I take care of all the states in the background of the list item. NOT in the selector. I found I had more control this way.

res/color/list_item_bg.xml

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

Then here is my list item:

res/layout/simple_list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingRight="45dip"
android:paddingBottom="2dip"
android:layout_gravity="center_vertical"
android:background="@color/list_item_bg">
  <ImageView
    android:id="@+id/arrow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="8dip"
    android:src="@drawable/list_item_arrow" />
 <TextView
android:id="@+id/simple_list_item_label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textSize="12sp"
android:textColor="@color/list_label_color"/>
</LinearLayout>
like image 8
b-ryce Avatar answered Nov 17 '22 21:11

b-ryce


I was also facing your problem where the color change applies to the whole list.

But now its working for me now:

My main page containing the listview (noticed I did not apply the listselector here):

 <ListView 
    android:id="@+id/controlList" android:layout_width="wrap_content" android:layout_height="wrap_content"/>

Instead applied the listselector to getView, its like tell that particular row (convertView) to use the listselector.xml in drawable foldable when its state changes, e.g. pressed, focused...:

@Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder viewHolder;
            if(convertView == null){
                LayoutInflater li = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
                convertView = li.inflate(R.layout.control_list, null);
                viewHolder = new ViewHolder();

                viewHolder.topText = (TextView) convertView.findViewById(R.id.toptext);
                viewHolder.bottomText = (TextView) convertView.findViewById(R.id.bottomtext);
                convertView.setTag(viewHolder);

            }
            else{
                viewHolder = (ViewHolder) convertView.getTag();
            }


                    //each convertView will be assigned the listselector
            convertView.setBackgroundResource(R.drawable.listselector);


            viewHolder.topText.setText(testSchemes[position]);

            //viewHolder.vText.setText(testDetails[position]);
            return convertView;
        }

And finally my listselector.xml:

<?xml version="1.0" encoding="utf-8"?>

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

    <!-- Even though these two point to the same resource, have two states so the drawable will invalidate itself when coming out of pressed state. -->
    <item android:state_pressed="true" 

        android:drawable="@color/darkgreen" />

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



</selector>

This is what the above code does: All entries when first loaded are lightgreen. Scrolling up and down using cursor highlights the selected entry orange. Pressing a row turns it to darkgreen.

like image 3
Bkteo Avatar answered Nov 17 '22 22:11

Bkteo