How to add section separators / dividers to a ListView?

Question

I'm currently making a menu for my app, using a DrawerLayout and an ArrayAdapter subclass to achieve something looking like Facebook's drawer menu.

I currently have no problems creating the list, but now that it looks good, i'd like to add separators between different kind of options (i.e. user-related and application-related options) and a search bar on top of the menu.

The code of my current ArrayAdaptor subclass is as following :

public class DrawerMenuAdapter extends ArrayAdapter<String>{
    private Context context;
    private String[] values;
    private int resId;

    public DrawerMenuAdapter(Context context, int textViewResourceId, String[] values) {
        super(context, textViewResourceId, values);
        this.context = context;
        this.values = values;
        this.resId = textViewResourceId;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent){
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View rowView = inflater.inflate(this.resId, parent, false);

        TextView elementText = (TextView)rowView.findViewById(R.id.element_text);
        ImageView elementImage = (ImageView)rowView.findViewById(R.id.element_icon);
        String textValue = values[position];

        elementText.setText(textValue);

        //This switch adds the icons to the related elements
        switch (position){
            case 0:
                elementImage.setImageResource(R.drawable.search);
                break;
            case 1:
                elementImage.setImageResource(R.drawable.facebook_friends);
                break;
            case 2:
                elementImage.setImageResource(R.drawable.flirts_history);
                break;
            case 3:
                elementImage.setImageResource(R.drawable.premium);
                break;
            case 4:
                elementImage.setImageResource(R.drawable.settings);
                break;
            case 5:
                elementImage.setImageResource(R.drawable.share_app);
                break;
            case 6:
                elementImage.setImageResource(R.drawable.cgu);
                break;
        }


        return rowView;
    }
}

I assume that I have to override the function that populates the ListView by calling the getView function, but I can't find which function it is.

Answer 1

If you want simple sections in your ListView, take a look at this tutorial:

http://cyrilmottier.com/2011/07/05/listview-tips-tricks-2-section-your-listview/

or this tutorial:

http://bartinger.at/listview-with-sectionsseparators/

The second one is not as detailed, but probably easier to understand / kept simpler.

The basic idea is that you make your ListAdapter have different kinds of views. For example two different Views where one kind is the actual list item displaying the information, and the other kind of View being the Section divider.

From the tutorial:

ListViews and more specifically Adapters can handle several types of Views. If you take a look at the Adapter interface you will notice it contains two specific methods:

• getViewTypeCount() which returns the number of types of Views your AdapterView manages. Most of the time this method returns 1 because all items of the ListView are similar. In this case, by returning 2, the ListView will handle two types of Views: the regular item Views and the separator Views
• getItemViewType(int) must return an integer between 0 (inclusive) and getViewTypeCount() (exclusive). The given number expresses the type of the View at the given position. For instance, we can ensure the returned values are 0 for the regular item Views and 1 for the separators