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:

Brett

post MyExpandableListView class, and also what happen if yu add another child to the parent?? does it have a margin to the next child? – Footage

Try this SO solution, it worked for me. – Vizza

Tha solution somehow Works. However, when scrolling in the list the spaces and non spaces gets moved around so the groups gets no Space and the child gets the Space. I don't know if this can be an index problem? – Brett

I have added some more code snippets now. Hope it helps. – Brett

have you tried setting negative top margin/padding on your child's layout? – Xe

I can give it negative values and it works, but I cannot have the layout be be as needed then. – Brett

Can share layout for listitem, both group and child. – Perdure

@FireFly3000 - Perhaps you could try a height of "1dp" for the child divider and see if it makes any difference. I think that "0dp" might be causing problems. – Gaiseric

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>

Rammer

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.

Gallic

I have tried your suggestion but it doesn't Work like that in my case. I don't see any changes :( – Brett

can you paste the code of your class and of your adapter please? – Gallic

what if you remove DIVIDER_HEIGHT in the DeparturesExpandableListAdapter? Line 2. – Gallic

That also Means that I will remove all the setDividerHeight code in the adapter. If I do so it looks like the second image I have posted. The oranges are the Group dividers and the Blacks the child dividers. – Brett

Then just decrease its size. – Gallic

could you check if the view_departure_details.xml file has any margins? I would remove those – Gallic

Hi @FireFly3000 can you please accept the answer if this has helped you? – Gallic

Answer 3

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/

Janeanjaneczka

Changing the color to 'transparent' doesn't remove the excess space. It just matches the space's color to that of the background. – Gaiseric

and also remove margin Top and margin bottom from parent and child layout ( in xml file ) – Janeanjaneczka

it doesn't change anything, the space is still there. – Marivelmariya

Answer 4

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

Perdure

For e.g. wrap the container of view_departure_overview.xml with another view, and supply your old container with margin. – Perdure

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.

Canakin

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.

Opposable

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" />

Famish

Answer 8

You can set Transparency between them like..

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

Ceratodus

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.

Wanitawanneeickel

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>

Wayne