How to change color of ListView items on focus and on click

Question

i have a list View in my app (this is the xml layout):

   <?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/arrayList"
       android:layout_width="fill_parent"
android:layout_height="fill_parent"
       android:textFilterEnabled="true"
       android:scrollbars="vertical"
       android:drawSelectorOnTop="true">
</ListView>

Each item of my list View is composed of two TextView:

    <?xml version="1.0" encoding="utf-8"?>
<TableLayout android:layout_width="fill_parent"
       xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/row_container"
       android:padding="5px" android:layout_height="wrap_content"
       android:background="@color/white" android:shrinkColumns="0">
               <TableRow>
               <TextView android:layout_height="wrap_content"
                       android:layout_width="wrap_content" android:layout_below="@+id/
description"
                       android:id="@+id/description"
                       android:textColor="@color/black"
                       android:scrollHorizontally="true"
                       android:singleLine="true"></TextView>
       </TableRow>
       <TableRow>
               <TextView android:layout_width="wrap_content"
                       android:layout_height="wrap_content" android:id="@+id/result"
                       android:textColor="@color/grey"
                       android:maxLines="1"
                       android:scrollHorizontally="true"></TextView>
       </TableRow>

</TableLayout>

I'm populating my listView from an ArrayAdapter, in this way:

public class Matches extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);        
    //set layout

    setContentView(R.layout.list_layout);
  // obtain reference to listview
  ListView listView = (ListView) findViewById(R.id.arrayList);

  ArrayAdapter<Match> arrayAdapter = new ArrayAdapter<Match>(
        this, R.layout.custom_row, R.id.description, createItems()) {

     @Override
     public View getView (int position, View convertView, ViewGroup parent){
        Match item = getItem (position);
        LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View rowView = inflater.inflate(R.layout.custom_row, null);
        TextView description = (TextView)rowView.findViewById(R.id.description);
        TextView result = (TextView)rowView.findViewById(R.id.result);
        description.setText(item.description + "  Risultato: " + item.result );
        result.setText(item.date + "  " + item.hour);
        return rowView;
     }
  };

  listView.setAdapter(arrayAdapter);

My goal is to be able to change the text color and the backgorund of these child views whenever the parent is selected or pressed.

How can i do it?

Outstand

How would you set focus without the user clicking? – Tombstone

Answer 1

The child views in your list row should be considered selected whenever the parent row is selected, so you should be able to just set a normal state drawable/color-list on the views you want to change, no messy Java code necessary. See this SO post.

Specifically, you'd set the textColor of your textViews to an XML resource like this one:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:drawable="@color/black" /> <!-- focused -->
    <item android:state_focused="true" android:state_pressed="true" android:drawable="@color/black" /> <!-- focused and pressed-->
    <item android:state_pressed="true" android:drawable="@color/green" /> <!-- pressed -->
    <item android:drawable="@color/black" /> <!-- default -->
</selector> 

Jaunty

Hey Yoni, what does setItemsCanFocus(boolean) mean? – Farlie

Answer 2

In your main.xml include the following in your ListView:

android:drawSelectorOnTop="false"

android:listSelector="@android:color/darker_gray"

Dimension

The focused list cell stays highlighted after releasing the touch, if you do it this way. – Llywellyn

Answer 3

<selector xmlns:android="http://schemas.android.com/apk/res/android" >    
    <item android:state_pressed="true" android:drawable="@drawable/YOUR DRAWABLE XML" /> 
    <item android:drawable="@drawable/YOUR DRAWABLE XML" />
</selector>

Ridotto

Hey Dhiral, what does setItemsCanFocus(boolean) mean? – Farlie

Answer 4

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" />

Hosiery

Answer 5

listview.setOnItemLongClickListener(new OnItemLongClickListener() {

        @Override
        public boolean onItemLongClick(final AdapterView<?> parent, View view,
                final int position, long id) {
            // TODO Auto-generated method stub

             parent.getChildAt(position).setBackgroundColor(getResources().getColor(R.color.listlongclick_selection));

            return false;
        }
    });

Tiffa

Sir Many Places Create Null Pointer exception. – Minna

Answer 6

Very old but I have just struggled with this, this is how I solved it in pure xml. In res/values/colors.xml I added three colours (the colour_...);

<resources>

    <color name="black_overlay">#66000000</color>

    <color name="colour_highlight_grey">#ff666666</color>
    <color name="colour_dark_blue">#ff000066</color>
    <color name="colour_dark_green">#ff006600</color>

</resources>

In the res/drawable folder I created listview_colours.xml which contained;

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colour_highlight_grey" android:state_pressed="true"/>
    <item android:drawable="@color/colour_dark_blue" android:state_selected="true"/>
    <item android:drawable="@color/colour_dark_green" android:state_activated="true"/>
    <item android:drawable="@color/colour_dark_blue" android:state_focused="true"/>
</selector>

In the main_activity.xml find the List View and add the drawable to listSelector;

<ListView
    android:id="@+id/menuList"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:listSelector="@drawable/listview_colours"
    android:background="#ff222222"/>
</LinearLayout>

Play with the state_... items in the listview_colours.xml to get the effect you want.

There is also a method where you can set the style of the List View but I never managed to get it to work

Cookhouse

Answer 7

Declare list item components as final outside your setOnClickListener or whatever you want to apply on your list item like this:

final View yourView;
final TextView yourTextView;

And in overriding onClick or whatever method you use, just set colors as needed like this:

yourView.setBackgroundColor(Color.WHITE/*or whatever RGB suites good contrast*/);
yourTextView.setTextColor(Color.BLACK/*or whatever RGB suites good contrast*/);

Or without the final declaration, if let's say you implement an onClick() for a custom adapter to populate a list, this is what I used in getView() for my setOnClickListener/onClick():

//reset color for all list items in case any item was previously selected
for(int i = 0; i < parent.getChildCount(); i++)
{
  parent.getChildAt(i).setBackgroundColor(Color.BLACK);
  TextView text=(TextView) parent.getChildAt(i).findViewById(R.id.item);
  text.setTextColor(Color.rgb(0,178,178));
}
//highlight currently selected item
 parent.getChildAt(position).setBackgroundColor(Color.rgb(0,178,178));
 TextView text=(TextView) parent.getChildAt(position).findViewById(R.id.item);
 text.setTextColor(Color.rgb(0,178,178));

Oldline