ExpandableListView - How to set divider only between parent elements

Question

I want to put divider only between parent elements. When i set

android:divider="@drawable/divider"

android creates divider between parent elements, but creates divider between child elements too. When i add

android:childDivider="@color/transparent"

android removes the divider between child elements, but the free space between them remains. Why? I have tried to

android:dividerHeight="0dp"

but nothing happened.

At all i want to set divider between parent elements, but i do not want any divider or empty space between child elements.

any ideas how to do that??

Spittoon

Answer 1

In order to remove dividers just from the child views and not between the parents in the expandable list:

add android:childDivider="#00000000" in the ExapandableListView attributes in XML:

<ExpandableListView
    android:id="@+id/elv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:childDivider="#00000000" />

Refer this page for more information

Albers

that is the ONLY comment so far that solved my issue after going through 50 SO pages – Breeder

Answer 2

Give Divider color and its height (dividers will be visible when groups are collapsed)

<ExpandableListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@color/color_black"
        android:dividerHeight="1dp"
        android:groupIndicator="@null" />

Corenda

Setting the height did it for me, than you! – Kook

Answer 3

The trick is to create an extra view for collapse group layout and last child layout.

collapse_group.xml:

<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent">

    <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:textSize="17sp"/>

    <!-- this is the extra view-->  
    <View 
       android:layout_width="fill_parent"
       android:layout_height="10dp"
       android:background="@android:color/transparent"/>        

</LinearLayout>

expanded_group.xml:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent">

    <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:textSize="17sp"/>

    <!-- no extra view-->       

</LinearLayout>

And apply the same technique to the child view, for the last child view insert the extra view

Feininger

That was just perfect! – Wanderoo

or maybe instead of creating two separate views just set the visibility to View.GONE for seperator View when its not required – Showman

Prefect but how about moving your "extra view" to top of collapse_group.xml & hide it in first row. I tried & it worked for me. – Seko

Answer 4

What I did was to set the ExpandableListView's divider to 0 and then insert "divider" groups into it's ExpandableListAdapter:

// To get dividers between the groups we add 'divider views' as if they were  
// themselves groups.
public int getGroupCount() {
// Actual groups are at even groupPositions, dividers at odd
    return (this.data.size() * 2) - 1;
}

public long getGroupId(int groupPosition) {
    if(groupPosition % 2 != 0) return R.id.divider;
    else return R.id.group;
}

public View getGroupView(int groupPosition, boolean isExpanded,
        View convertView, ViewGroup parent) {
    if(groupPosition % 2 != 0) {
        View divider = convertView;
        if(divider == null || divider.getId() != R.id.divider) {
            divider = this.inflater.inflate(R.layout.divider, null);
        }

        return divider;
    }

    View group = convertView;
    if(group == null || group.getId() != R.id.group) {
        group = this.inflater.inflate(R.layout.group, null);
    }

    return group;
}

Falconry

Answer 5

expListView.setDividerHeight(10);
expListView.setChildDivider(getResources().getDrawable(
            android.R.color.white));

Falsehood

Answer 6

If you want to remove child divider only, One simple trick is You can create a drawable with same color as of your child item's background color. Then set it as child divider.

ShapeDrawable sd1 = new ShapeDrawable(new RectShape());
    sd1.getPaint().setColor(YOUR CHILD ITEM BACKGROUND COLOR);
    mExpListView.setChildDivider(sd1);

Or using xml:

android:childDivider="@color/child_bg_color"

Womenfolk

Answer 7

If you want to have divider between parent element of the ExpandableListView (Header) and don't want to have divider between children and parent , which is obviously the most natural case, then you have to do following:

1. In your parent xml file add one View at the bottom of the layout with divider height and divider color that you need. Example:

2. Do same in the child xml file. Add one View at the bottom of the layout with divider height and divider color that you need. Make sure divider color and height are same like in parent xml.

3. Into your ExpandableListView Adapter method public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) manage the state of the View divider like this: Example:

   if(isExpanded){ headerDividerView.setBackgroundColor(ContextCompat.getColor(context,R.color.darker_grey)); }else{ headerDividerView.setBackgroundColor(ContextCompat.getColor(context,android.R.color.transparent)); }

BTW : In my case R.color.darker_grey is background color of the parent

4. Remove from your ExpandableListView xml all dividers and dividers height. Make ExpandableListView to not have dividers and divider height. You can use attrs like this :

   android:groupIndicator="@null" android:childIndicator="@null" android:divider="@null" android:dividerHeight="0dp"

Manassas

Answer 8

I solved it by adding two views one to header and other to child item like shown below.

Header.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<RelativeLayout
android:id="@+id/rl_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/square_box"
android:padding="@dimen/padding_10">

<ImageView
    android:id="@+id/expandableIndicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:src="@drawable/ic_downarrow" />
</RelativeLayout>

<View
android:id="@+id/view_hidden"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_below="@+id/rl_header"
android:background="@android:color/transparent" />
</RelativeLayout>

child.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<RelativeLayout
android:id="@+id/rl_childView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/square_box"
android:padding="@dimen/padding_10">

<TextView
    android:id="@+id/tv_startDate"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:gravity="left"
    android:paddingTop="@dimen/padding_5"
    android:paddingBottom="@dimen/padding_5"
    android:text="Start Date \nSep. 23, 2019"
    android:textSize="@dimen/text_16" />

<ImageView
    android:id="@+id/iv_arrow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:src="@drawable/right_arrow" />
</RelativeLayout>

<View
    android:id="@+id/view_hidden"
    android:layout_width="match_parent"
    android:layout_height="10dp"
    android:layout_below="@+id/rl_childView"
    android:background="@android:color/transparent" />
</RelativeLayout>

Now add this code to your Adapter class. The idea is to show/hide the View when group is expanded/collapsed, show on child last item.

@Override
public View getGroupView(int listPosition, boolean isExpanded, View convertView, 
ViewGroup parent) {
String listTitle = (String) getGroup(listPosition);
String listCount = "(" + getChildrenCount(listPosition) + ")";

if (convertView == null) {
    LayoutInflater layoutInflater = (LayoutInflater) 
this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    convertView = layoutInflater.inflate(R.layout.expandable_header, null);
}
View view_hidden = convertView.findViewById(R.id.view_hidden);

if (isExpanded) {
    view_hidden.setVisibility(View.GONE);
} else {
    view_hidden.setVisibility(View.VISIBLE);
}

return convertView;
}

@Override
public View getChildView(int listPosition, final int expandedListPosition,
                     boolean isLastChild, View convertView, ViewGroup parent) {
final Medication medication = (Medication) getChild(listPosition, 
expandedListPosition);
if (convertView == null) {
    LayoutInflater layoutInflater = (LayoutInflater) 
this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    convertView = layoutInflater.inflate(R.layout.expandable_item, null);
}

View view_hidden = convertView.findViewById(R.id.view_hidden);
if (isLastChild) {
    view_hidden.setVisibility(View.VISIBLE);
} else {
    view_hidden.setVisibility(View.GONE);
}

return convertView;
}

Daffy

Answer 9

set like this android:divider="@null" no divider for parents android:divider="2dp" set divider for parents

 <ExpandableListView
        android:id="@+id/expandable_list"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:divider="2dp"
        android:groupIndicator="@drawable/group_indicator" />

Welcy