change color of selected listview item

Question

I want to change color of list item when it will press

For that I did like below,

list_item_selector.xml

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

    Selected 
  <item 
    android:state_focused="true" 
    android:state_selected="false" 
    android:drawable="@drawable/list_focused"/> 

  Pressed
  <item 
    android:state_selected="true" 
    android:state_focused="false"
    android:drawable="@drawable/list_selected" />  

</selector> 

I have set the color in colors.xml like below,

 <drawable name="list_focused">#36C170</drawable>
  <drawable name="list_selected">#9EC136</drawable>

and in my ListView I wrote like this,

<ListView
            android:id="@+id/list_centers_complete"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" 
            android:cacheColorHint="@android:color/transparent"
            android:listSelector="@drawable/list_item_selector" />

but when I am clicking on list item, the whole background color is changed instead of only list item.

How can I solve this? Is there any way?

Thank you

Solution 1

Apply "@drawable/list_item_selector" to the row of that list(List item) not a List itself..

Something like, your list item (list row)..

<?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="fill_parent"
    android:orientation="horizontal"
    android:background="@drawable/list_item_selector">
        <TextView       android:id="@+id/textForList"
        android:layout_height="fill_parent"
        android:layout_width="wrap_content"
        android:padding="10sp"  />
.
.
.
</LinearLayout>

list_item_selector.xml

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

    <item android:state_focused="true">
    <shape>
        <solid android:color="#66FFFFFF" />
    </shape>
</item>
    <item>
    <shape>
        <solid android:color="#FF666666" />
    </shape>
</item>

</selector>

Solution 2

You should be setting the selector to the row and not the listview itself.

Solution 3

Try with a custom adapter this also helps you to have full control over your items and set a default item selected; listView XML and item XML have no special setup.

public class ListAdapter extends ArrayAdapter<MyObj> {

private final int layoutInflater;
private Context context;
private  List<MyObj> items;
private int mSelectedItem = 0;
private int TAG_UNSELECTED = 0;
private int TAG_SELECTED = 1;

public ListAdapter(Context context, int resource, List<MyObj> items) {
    super(context, resource, items);
    this.context = context;
    this.layoutInflater = resource;
    this.items = items;
}

public void selectItem(int position) {
    mSelectedItem = position;
    notifyDataSetChanged();
}


@Override
public int getViewTypeCount() {
    return 2;
}

@Override
public int getItemViewType(int position) {
    return position == mSelectedItem ? TAG_SELECTED : TAG_UNSELECTED;
}


@Override
public View getView(int position, View convertView, ViewGroup parent) {

    View v = convertView;
    if (v == null) {
        LayoutInflater vi = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = vi.inflate(layoutInflater, null);
    }

    MyObj myObj = items.get(position);
    TextView textView = (TextView) v.findViewById(R.id.title);
    textView.setText(myObj.title);

    int type = getItemViewType(position);
    if(type == TAG_SELECTED) {
        v.setBackgroundColor(Color.parseColor("#1da7ff"));
        textView.setTextColor(Color.parseColor("#ffffff"));
    } else {
        v.setBackgroundColor(Color.parseColor("#f8f8f8"));
        textView.setTextColor(Color.parseColor("#474747"));
    }

    return v;
}

}

Then in your activity:

            ListView listView = (ListView) findViewById(R.id.list_view);
            ListAdapter adapter = new ListAdapter(mContext, R.layout.item_layout, list);
            listView.setAdapter(adapter);
            adapter.selectItem(0); // Default selected item

            // Get selected item and update its background
            listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                    adapter.selectItem(position);
                }
            });

Solution 4

<item android:state_activated="true">
  <shape android:shape="rectangle">
    <solid android:color="#333333" />
    <padding android:left="5dp" android:right="5dp" />
  </shape></item>
<item><shape android:shape="rectangle">
        <solid android:color="#222222" />
    </shape></item>

View more solutions

Comments

[Jyosna]

but android:listSelector -- this is available . It means we are setting to row

[Jyosna]

my each itam consists of 3 TextViews then where I ll put this? in LinearLayout??

[Sudarshan Bhat]

your problem is actually discussed here stackoverflow.com/questions/2183447/…

[Sudarshan Bhat]

create a linear layout. nest all the three text views inside this linear layout and then set selector to your linear layout.

[Jyosna]

as an background? like android:background="@drawable/list_item_selector" ??

[Jyosna]

android:drawable="#FF666666" this will show err thats why i puted into colors.xml

[Developer]

@user370305 can u help me on this stackoverflow.com/questions/18099756/…