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 hav

Answer 1

I'm adding an answer here since i've figured another way to to this. It looks a bit like the links @Phil posted.

First i set a string array of the menu i want to display. I've written this array in an XML resource file for personal convenience.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array
            name="drawer_menu_options">
        <item>Username</item>
        <item>-sep-Flirter</item>
        <item>Recherche</item>
        <item>Amis Facebook</item>
        <item>Flirts</item>
        <item>Compte premium</item>
        <item>-sep-Menu</item>
        <item>Réglages</item>
        <item>Inviter des amis</item>
        <item>CGU</item>
    </string-array>
</resources>

Notice that I have two elements using the prefix -sep-. These will be our separators.

Then comes the DrawerMenuAdapter i've shown earlier, which is still an ArrayAdapter, on which I've added some functionalities :

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

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

    public void setSeparator(int resId){
        separatorId = resId;
    }

    public void setUserbarId(int resId){
        userbarId = resId;
    }

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

        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        if(userbarId != 0 && values[position].equals("Username")){
            rowView = inflater.inflate(this.userbarId, parent, false);

        }else if(separatorId != 0 && values[position].startsWith("-sep-")){
            rowView = inflater.inflate(this.separatorId, parent, false);

        }else{
            rowView = inflater.inflate(this.resId, parent, false);
        }

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

        /* If the current line is a separator, just display a separator. Otherwise, set the
        matching picture
         */
        if(textValue.startsWith("-sep-")){
            elementText.setText(textValue.substring("-sep-".length()));

        }else{
            if(textValue.equals("Username")){
                elementText.setText(context.getSharedPreferences("LovRUserSettings", 0)
                        .getString("firstName", "Username"));
            }else{
                elementText.setText(textValue);
            }
            ImageView elementImage = (ImageView)rowView.findViewById(R.id.element_icon);
            switch (position){
                case 2:
                    elementImage.setImageResource(R.drawable.search);
                    break;
                case 3:
                    elementImage.setImageResource(R.drawable.facebook_friends);
                    break;
                case 4:
                    elementImage.setImageResource(R.drawable.flirts_history);
                    break;
                case 5:
                    elementImage.setImageResource(R.drawable.premium);
                    break;
                case 7:
                    elementImage.setImageResource(R.drawable.settings);
                    break;
                case 8:
                    elementImage.setImageResource(R.drawable.share_app);
                    break;
                case 9:
                    elementImage.setImageResource(R.drawable.cgu);
                    break;
            }
        }


        return rowView;
    }
}

In this code, there's an object called userBar. You don't really need to pay attention to this but if you're interested, it's another menu element, using a specific layout file instead of the one I use for regular menu elements. It's a way to demonstrate that you can add whatever kind of specific layout anywhere you want, just by reading your strings.

The main point here is in the way the code searches for separators, the strings with the -sep- prefix. Once one is found, the prefix is removed, and the matching layout is attributed to the separator.

Aight, that's what i've found. After this, you'll have to find your own way to add click listeners. Mines are implemented in the DrawerLayout.setOnCliclListener which basically does the job the exact same way the Google's documentation says. But you can also use setOnclickListenerto your view as you add them, and use an XML file where you can set your own onClick attributes...

Hope it will help =)

Answer 2

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