How to remove specific space between parent and child in an ExpandableListView

Question

Can you help me identify why there is a space between the group and the child? In my case I want spaces between all groups and the child should be right below the group with no space (but of course space to the next group. My problem looks like this:

I have set the Group divider to this drawable (expandable_list_group_divider):

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:height="10dp"/>
</shape>

And the child divider to this (@drawable/expandable_list_child_divider):

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:height="0dp"/>
</shape>

I have defined the layout like this in the xml(it is a compund control):

<com.jws.MyExpandableListView
        android:id="@+id/expList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:scrollbars="none"
        android:divider="@drawable/expandable_list_group_divider"
        android:childDivider="@drawable/expandable_list_child_divider"/>

The custom view class:

public class MyExpandableListView extends ExpandableListView {
    protected ArrayList<Departure> departures;

    public MyExpandableListView(Context context, AttributeSet attrs) {
        super(context, attrs);

        setGroupIndicator(null);
        setChildIndicator(null);
        setHorizontalFadingEdgeEnabled(true);
        setVerticalFadingEdgeEnabled(true);
        setFadingEdgeLength(60);

        departures = new ArrayList<Departure>();
        this.setAdapter(new MyExpandableListAdapter(context, this, departures));
    }
}

And finally the expandable list adapter

public class DeparturesExpandableListAdapter extends BaseExpandableListAdapter {
    private final int DIVIDER_HEIGHT = 20;
    private LayoutInflater inflater;
    private ArrayList<Departure> departures;
    private Context context;
    private ExpandableListView expListView;

    public DeparturesExpandableListAdapter(Context context, ExpandableListView expListView, ArrayList<Departure> departures)
    {
        this.context = context;
        inflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
        this.departures = departures;
        this.expListView = expListView;
    }


    // This Function used to inflate parent rows view
    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parentView)
    {
        final Departure departure = departures.get(groupPosition);

        if(!isExpanded)
            expListView.setDividerHeight(DIVIDER_HEIGHT);
        else
            expListView.setDividerHeight(-4);

        expListView.setFooterDividersEnabled(false);

        // Inflate grouprow.xml file for parent rows
        convertView = inflater.inflate(R.layout.view_departure_overview, parentView, false);

        //Data handling in the view...

        return convertView;
    }


    // This Function used to inflate child rows view
    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild,
                             View convertView, ViewGroup parentView)
    {
        final Departure departure = departures.get(groupPosition);

        if(isLastChild)
            expListView.setDividerHeight(DIVIDER_HEIGHT);

        // Inflate childrow.xml file for child rows
        convertView = inflater.inflate(R.layout.view_departure_details, parentView, false);

        //Data handling...

        return convertView;
    }

    @Override
    public Object getChild(int groupPosition, int childPosition)
    {
        return departures.get(groupPosition);
    }

    //Call when child row clicked
    @Override
    public long getChildId(int groupPosition, int childPosition)
    {
        return childPosition;
    }

    @Override
    public int getChildrenCount(int groupPosition)
    {
        return 1;
    }


    @Override
    public Object getGroup(int groupPosition)
    {
        return departures.get(groupPosition);
    }

    @Override
    public int getGroupCount()
    {
        if(departures != null)
            return departures.size();

        return 0;
    }

    //Call when parent row clicked
    @Override
    public long getGroupId(int groupPosition)
    {
        return groupPosition;
    }

    @Override
    public void notifyDataSetChanged()
    {
        // Refresh List rows
        super.notifyDataSetChanged();
    }

    @Override
    public boolean isEmpty()
    {
        return ((departures == null) || departures.isEmpty());
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition)
    {
        return false;
    }

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

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

Image for comments:

Answer 1

this is tested and is proven to work, i wanted to come back to this even months later because none of the other methods gave me results quite how i wanted them. these are displayed exactly how OP (and myself) wanted

this is my groups or categories or whatever. basically the first linear layout is just a wrapper for a view which acts as a spacer between the categories, and then another linear layout that handles all my formatting

in the ExpandableListView(not shown) i have the divider height set to 0. the spacing is instead handled by the views

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

    <View
        android:layout_width="fill_parent"
        android:layout_height="6dp"
        android:background="@android:color/transparent"/>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="8dp"
    android:background="#50601CBA">


    <TextView
        android:id="@+id/lblListHeader"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="17dp"
        android:textColor="#FFFFFF" />

</LinearLayout>
</LinearLayout>

then in the child i have this.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="55dip"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/lblListItem"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:textColor="#FFFFFF"
        android:background="#50601CBA"
         />

</LinearLayout>

Answer 2

I used the following settings in the xml file and there is no gap between the parent and the child.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#f4f4f4" >

            <ExpandableListView
                android:id="@+id/expListView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/bg_black"
                android:divider="#FF8800"
                android:dividerHeight="2px" />

</RelativeLayout>

Most probably this is an issue with a margin setting you've got.

Answer 3

Remove all the margins and divider height, and instead add a blank space on top of groupview itself. It should do the trick.

Answer 4

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" 
android:dividerHeight="0dp"
/>

Refer http://qtcstation.com/2011/03/working-with-the-expandablelistview-part-1/

Answer 5

Assuming that you want spacing between the parents, but not between parent & child. I have failed to find a proper way of achieving it. So I did a not a smart fix, by not setting the divider height, instead since I had a custom layout for every parent item, I added a LinearLayout with a fixed height of 25dp at the top of my custom parent layout, as a result I could achieve the desire functionality, but there was a side effect , when you touch the list item, the spacing as well as the list item both are highlighted on touch.

Answer 6

Use negative margin for child view in view_departure_details.Something like this:

<TextView
android:id="text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="-10dp"
android:text="@string/my_best_text"
android:background="#FF0000"
/>

I know some people consider it a bad practice to use negative margin but right it seems to be the easiest way.

Other way(the time-consuming way) is to implement you own expandable listview so that you have more control on how things are drawn.

Answer 7

Set the child view programmatically like:

expandableListView.setDividerHeight(1);

expandableListView.setChildDivider(new ColorDrawable(Color.Black);

And group view From xml like :

    <TextView
        android:id="@+id/tv_title_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:textAppearance="?android:attr/textAppearanceMedium" />


    <ImageView
        android:id="@+id/iv_arrow"
        android:layout_width="20dp"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:layout_height="20dp"
         />


<View
    android:id="@+id/header_view"
    android:layout_width="match_parent"
    android:layout_marginTop="10dp"
    android:layout_alignParentBottom="true"
    android:layout_height="1dp" />

Answer 8

您可以在它们之间设置透明度，例如..

        android:childDivider="@android:color/transparent"

Answer 9

Modify the view's padding in the method public View getChildView() using the setPadding() method of the view.

Example:

@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild,
                             View convertView, ViewGroup parentView){
 final Departure departure = departures.get(groupPosition);

 if(isLastChild)
  expListView.setDividerHeight(DIVIDER_HEIGHT);

 // Inflate childrow.xml file for child rows
 convertView = inflater.inflate(R.layout.view_departure_details, parentView, false);

 //Data handling...

 convertView.setPadding(0, 0, 0, 0);

 return convertView;
}

In the same way, if you want modify padding of the group, you will have to modify the padding in the getGroupView() method.

Answer 10

Just set the child background color as same of exandableListView

example:


    <ExpandableListView
        android:id="@+id/expandableListView"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:indicatorLeft="@null"
        android:clipChildren="true"
        android:background="@color/colorGrayTransparent"
         />
and child item color like this :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginRight="12dp"
    android:layout_marginBottom="12dp"
    android:background="@color/colorGrayTransparent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
....
</LinearLayout>