Expandable list with different size dividers for parent and child

Question

I'm new to android, and this is my first question here.

http://s11.postimg.org/tjhfoq7mb/123.png

I'm looking to create something that looks like this in the picture above.

parent/group has child = parent/group has no divider
parent/group has no child = parent/group has divider
last child = child has a full divider
not last child = not a full divider

Is it possible to accomplish this. Is yes? how?

Moinkhan · Accepted Answer · 2015-05-14T13:15:12.650

yes it is possible

@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {

    // First of all add the parent line as View in custom_expandable_parent_view.xml and reference it
    convertView = _lay.inflate(R.layout.custom_expandable_parent_view, null);
    View parentLine = convertView.findViewById(your_parent_line_id);

    if (isExpanded) {
        // Now if the your list is expanded you dont have to show it
        // so just hide it
        parentLine.setVisibility(GONE);
    }

    return convertView;
}

@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {

    // now in add both childLine and  parentLine in custom_expandable_child_view.xml
    // reference both of them

    convertView = _lay.inflate(R.layout.custom_expandable_child_view, null);
    View parentLine = convertView.findViewById(your_id);
    View childLine = convertView.findViewById(your_id);

    // consider currently both line are showing in everychild.

    if (isLastChild) {
        // now, if it is last child then we have to show parentLine that means a long line. So we only hide childLine
        childLine.setVisibility(View.GONE);
    } else {
        // now, if it is not last child then we have to show childLine that means a short line. for all child except the long one   
        // so here we hide the parent one
        parentLine.setVisibility(View.GONE);
    }

    return convertView;
}

This is what my code i have done it. Bcoz i also want same layout like yours. i have explain it .. So make your changes according to your requirement.

enter image description here

This looks much simpler, I'll try this and get back to you. Many thanks — BenZ Rayne, May 14 '15 at 13:04
I've some confusions, Can you please add the layout of the row item just to give me an idea on how to draw that parent line and child line. Pardon me if I'm being noob. I'm new to android — BenZ Rayne, May 14 '15 at 13:08
Sorry, but I dont know how to draw such a line. Can you add code of layout of a row? — BenZ Rayne, May 14 '15 at 13:18
Yes, Finally I was able to accomplish what I was looking for. Many Thanks, you saved the day. -_- — BenZ Rayne, May 15 '15 at 09:02
yes... i know that ...but remember this ...... lol ... you can up vote later.. — Moinkhan, May 15 '15 at 12:07

score 1 · Answer 2 · edited May 23 '17 at 11:44

Note: the response below is for a non-expandable list.

That is definitely doable. You can create rows not only for the options and headers, but also for the separators, and give these separator rows the style you want (height 0.5dp, desired margin).

Basically, the same solution as suggested in https://stackoverflow.com/a/13634801/1816603, but using 4 layouts: 2 for options (for parents and childs) and 2 for separators (parent-level separator and child-level separator).

For simplicity, the item type and content can be put together in the same string, or for a more elegant solution you could create a class containing the row type and row text.

final ListView drawerList = (ListView) findViewById(R.id.left_drawer);

// Add options to the list drawer
final List<String>  listOptions = new ArrayList<>();

listOptions.add("1Parent 1");
listOptions.add("2Child 1");
listOptions.add("4");
listOptions.add("2Child 2");
listOptions.add("3");
listOptions.add("1Parent 2");
listOptions.add("3");
listOptions.add("1Parent 3");

drawerList.setAdapter(new ArrayAdapter<String>(this, R.layout.list_item_parent, listOptions) {

    @Override
    public boolean areAllItemsEnabled()
    {
        return false;
    }

    @Override
    public boolean isEnabled(int position)
    {
        String selected = listOptions.get(position);
        if ( (selected.charAt(0) == '3') || (selected.charAt(0) == '4') )
            return false;
        else return true;
    }

    @Override
    public View getView(int position, View coverView, ViewGroup vg) {
        LayoutInflater inflater = (LayoutInflater) parent.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        int type = getItemViewType(position);
        if (type == 1) // parent
        {
            View rowView = inflater.inflate(R.layout.list_item_parent, vg, false);

            TextView text1 = (TextView) rowView.findViewById(R.id.list_item_text);
            text1.setText(listOptions.get(position).substring(1));

            return rowView;
        }
        else if (type == 2) // child
        {
            View rowView = inflater.inflate(R.layout.list_item_child, vg, false);

            TextView text1 = (TextView) rowView.findViewById(R.id.list_item_text);
            text1.setText(listOptions.get(position).substring(1));

            return rowView;
        }
        else if (type == 3) // parent separator
        {
            View rowView = inflater.inflate(R.layout.list_separator_parent, vg, false);
            return rowView;
        }
        else if (type == 4) // child separator
        {
            View rowView = inflater.inflate(R.layout.list_separator_child, vg, false);
            return rowView;
        }
    }

    @Override
    public int getViewTypeCount() {
        return 4;
    }

    @Override
    public int getItemViewType(int position) {
        String selected = listOptions.get(position);

        return Character.getNumericValue(selected.charAt(0)) - 1;
    }
});

Where the layouts would be defined as:

list_item_parent - Row with full width, for the text of the parent options
list_item_child  - Row with margin on the left, for the text of the parent options
list_separator_parent - Row with dark background, height 0.5dp and full width
list_separator_child - Row with dark background, height 0.5dp and margin on the left

Thank you, I've an idea now. Well, I did already made the data structure thinking I'll use ExpandableListView. I've to change everything now -_- — BenZ Rayne, May 14 '15 at 13:01
Oh, I didn't see any reference to the expandability in the question. — Jose Gómez, May 14 '15 at 13:05
Right. Well, it's good that you had your question solved anyway. — Jose Gómez, May 14 '15 at 13:28
Thank you for your time. I've a feeling that your solution will come to use for me in the future, and for others too. — BenZ Rayne, May 15 '15 at 09:05

Expandable list with different size dividers for parent and child

2 Answers2