Setting different divider color to each element in list view

Asked 17/10, 2012 at 12:36 Answered 17/10, 2012 at 12:45

android android-layout android-listview divider

I want to have a list with different dividers between the list elements. I have used this code to define a white divider with height 1:

_listView.setDivider(new ColorDrawable(Color.WHITE));
_listView.setDividerHeight(1);

However it sets the divider for all the element to be white, and I want only some of them to be white and the other in different color.

How can i do that?

Ushaushant answered 17/10, 2012 at 12:36 Comment(2)

Are you trying to alternate colours, or define different coloured dividers at different points? – Soldier 17/10, 2012 at 12:39

i am trying to define different divider colors for different elements depend of the content. i am trying to do it programatically when i am creating the list, but when i define different color it changes all the dividers to this color and not just the specific element's divider i wanted to change. – Ushaushant 17/10, 2012 at 12:44

Set the divider to height to 0 and implement a View in your item layout with the height of 1 and change its color based on the list item every time the view is built.

Here's an XML layout sample:

<?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="vertical" >

    <TextView 
        android:id="@+id/text"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />

    <View 
        android:id="@+id/divider"
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:background="#FFFFFFFF" />

</LinearLayout>

And this is how you change the color in the adapter:

public class MyAdapter extends BaseAdapter {
    /** List of items to show */
    private ArrayList<String> items = new ArrayList<String>();
    private Context context;
    private int color[];

    public OffersAdapter(Context c, ArrayList<String> items, int color[])
    {
        super();
        this.context = c;
        this.items = items;
        this.color = color;
    }

    public int getCount() {
        return items.size();
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

public View getView(final int position, View convertView, ViewGroup parent) {
    final ViewHolder viewHolder;

    if(null == convertView)
    {
        LayoutInflater inflater = LayoutInflater.from(context);
        convertView = inflater.inflate(R.layout.list_item, parent, false);

        viewHolder.text = (TextView) convertView.findViewById(R.id.text);
        viewHolder.divider = (View) convertView.findViewById(R.id.divider);

        convertView.setTag(viewHolder);
    } else {
        //Retrieve the current view
        viewHolder = (ViewHolder) convertView.getTag(); 
    }

    //This is where you chance the divider color based on the item  
    viewHolder.divider.setBackgroundColor(color[position]);

  viewHolder.text.setText(items.get(position));

    return convertView;
}

//Holds the current view
 private static class ViewHolder {
         public TextView text;
         public View divider;
     }   
}

Where int color[] is a list of the colors you want to use.

More about ViewHolder read here.

Labor answered 17/10, 2012 at 12:42 Comment(13)

i have tried that. but then when pressing on the element and holding you will see the background color not in right position, it will cover the view i created. – Ushaushant 17/10, 2012 at 12:46

yes i did... _listView.setDivider(new ColorDrawable(Color.WHITE)); _listView.setDividerHeight(1); – Ushaushant 17/10, 2012 at 12:53

Don't set the divider like that. That's the list divider. Ignore that one. Change the color of the view created to be your divider as I showed in my answer. – Labor 17/10, 2012 at 12:55

You have to create the ViewHolder. – Labor 17/10, 2012 at 13:12

ViewHolder is not a inbuilt type - @Labor has shown an example of the view holder pattern - a reccomended pattern in android - it has to be defined like this here static class ViewHolder { View divider; } – Tomtit 17/10, 2012 at 13:15

how this class should look like ? – Ushaushant 17/10, 2012 at 13:16

I've edited the answer and posted a whole adapter class sample. – Labor 17/10, 2012 at 13:30

but when pressing (and holding it pressed) on the item the color in the background will cover the bottom divider. i need it to be between the dividers (top and bottom )without covering it – Ushaushant 17/10, 2012 at 13:35

What color in the background? You need to be more specific in your explanation. – Labor 17/10, 2012 at 13:38

And yes. When you press an item and hold it pressed it gets highlighted. That's how it is designed. – Labor 17/10, 2012 at 13:39

ok, and this highlighted color should be between the top and bottom dividers. however with this solution this highlighted color will come under the bottom divider and not between the two dividers. – Ushaushant 17/10, 2012 at 13:42

Then try this: listView.setDrawSelectorOnTop(false); – Labor 17/10, 2012 at 13:50

i have created my layout at runtime so there is no xml file for it. – Ushaushant 17/10, 2012 at 14:22

Seperate your list item and your whole list in xml
Create a custom adapter for your list items and instantiate your list
Depending on the criteria you want change the divider colour for each new item you add from the adapter to the list

Example:

listitem.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" >

    <TextView 
        android:id="@+id/sometext"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />

    <View 
        android:id="@+id/customdivider"
    android:layout_width="fill_parent"
    android:layout_height="1dp"
          />

</LinearLayout>

list.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
   >

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

</LinearLayout>

CustomAdapter.java

public class CustomAdapter extends BaseAdapter {

    private Activity activity;
    private ArrayList<HashMap<String, String>> data;
    private static LayoutInflater inflater = null;

    public SubjectListAdapter(Activity a, ArrayList<HashMap<String, String>> d) {
        activity = a;
        data = d;
        inflater = (LayoutInflater) activity
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    }

    public int getCount() {
        return data.size();
    }

    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }



        public View getView(int position, View convertView, ViewGroup parent) {
            View vi = convertView;
            if (convertView == null)
                vi = inflater.inflate(R.layout.listitem, null);

        //Find the divider here and depending on your criteria change the colour - if required take data from main activity if you need it to change the colour 
       View divider= (View) vi.findViewById(R.id.customdivider); 
       if(your criteria)
          divider.setBackgroundColor(R.color.white); //assuming white is defined in              colors
       else
         set to whatever color
        return vi;
        }
}

In Your Activity

    ListView list = (ListView) findViewById(R.id.totallynewlist);

    // creating new HashMap
    HashMap<String, String> map = new HashMap<String, String>();
    <//Pass whatever condition you want for your criteria here if you need to - optional>
    ListPass.add(map);

    adapter = new CustomAdapter(this, ListPass);

    list.setAdapter(adapter);

Tomtit answered 17/10, 2012 at 12:45 Comment(7)

but which method changes the divider only for a specific element ? the method setDivider changes the divider color for all elements. – Ushaushant 17/10, 2012 at 13:2

This basically does not use set divider - it creates a view of 1 dp, that you can change the colour of for each list item depending on your criteria. Change the background of item view divider to whatever colour you need – Tomtit 17/10, 2012 at 13:4

We are now changing it for each row of the list, so dont use list divider - thats a list method and applies to the entire list – Tomtit 17/10, 2012 at 13:6

i want to do it programatically in runtime without using XML layouts. – Ushaushant 17/10, 2012 at 13:11

List elements are filled programmatically at runtime using adapters, but list items are defined in xml. This is the best way to work with any list. What exactly do you mean "I want to do it programmatically in runtime "? – Tomtit 17/10, 2012 at 13:13

i have created my layout at runtime so there is no xml file for it. – Ushaushant 17/10, 2012 at 13:45

For listitem.xml, I don't think you want the orientation to be horizontal. – Galling 23/1, 2019 at 6:23

Recommended topics

Hot tags