Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting different divider color to each element in list view

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?

like image 818
MrBug Avatar asked Oct 17 '12 12:10

MrBug


2 Answers

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.

like image 135
slybloty Avatar answered Sep 20 '22 10:09

slybloty


  1. Seperate your list item and your whole list in xml
  2. Create a custom adapter for your list items and instantiate your list
  3. 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);
like image 42
Vrashabh Irde Avatar answered Sep 19 '22 10:09

Vrashabh Irde