Home » Android » android – How to add section separators / dividers to a ListView?

android – How to add section separators / dividers to a ListView?

Posted by: admin April 23, 2020 Leave a comment

Questions:

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.

How to&Answers:

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

Answer:

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 =)