android expandablelistview how to set space between groups items

Question

I have expandablelistview and I want to add padding (or margin) between the groups items, I used margin-botton on the group items, it works but now it is also applied to the group item and its childs, I want to keep a space between groups items, not between a group item and its child, i work like this:

main xml

<?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="match_parent"
    android:orientation="vertical" 
    android:background="#FFFFFF">

    <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:typeface="serif"
        android:textSize="25dip"
        android:textColor="#025f7c"
        android:text="@string/tv_allAddresses"
        android:layout_gravity="center"
        android:layout_marginTop="20dip"
        android:layout_marginBottom="25dip"/>

    <ExpandableListView
        android:id="@+id/elv_all_addresses_addresses"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         android:padding="10dip">
    </ExpandableListView>

</LinearLayout>

group xml

<?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="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv_all_address_group_groupName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="30dip"
        android:textColor="#000000"
        android:textSize="20dip"
        android:typeface="serif" />

</LinearLayout>

child xml

<?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="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/tv_all_address_child_label"
        android:paddingLeft="50dip"
        android:typeface="serif"
        android:textSize="15dip"
        android:textColor="@color/BlueViolet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tv_all_address_child_value"
        android:textColor="#000000"
        android:layout_marginLeft="10dip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Answer 1

Because you are using adapter that is extending from BaseExpandableListAdapter so you can set padding programmatically by setting padding to group item when the group is not expanding and then remove the padding when the group is expanding and for each group set padding to last child in it.

setting padding to the last child

public View getChildView(int groupPosition, int childPosition,
            boolean isLastChild, View convertView, ViewGroup parent) {
if (childPosition == groups.get(groupPosition).getChilds().size() - 1) {
            convertView.setPadding(0, 0, 0, 20);
        } else
            convertView.setPadding(0, 0, 0, 0);
        return convertView;
}

setting padding to group item when it is expanding

public View getGroupView(int groupPosition, boolean isExpanded,
            View convertView, ViewGroup parent) {
    if (isExpanded)
            convertView.setPadding(0, 0, 0, 0);
        else
            convertView.setPadding(0, 0, 0, 20);
        return convertView;
    }

Note

I assume that you are using arraylist for your groups and your childs, you can just replace the groups.get(groupPosition).getChilds().size() - 1 by the size of your group depending in your structure

Answer 2

I case you are looking for a better option, simply add

expandablelsv.setDividerHeight();

after the group and child indicator it works completely fine in my case, give it a try

Answer 3

check if child is last and add padding on there

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

    if (isLastChild) {
        convertView.setPadding(0, 0, 0, 30);
    }

     return convertView; 
}

Answer 4

I was having the same kind of problem so i came up with a childish solution. What i did was i added to linear layout with same properties both in parent layout file and child layout file of expandable list view. And when a group is clicked i made the 'linear layout' of parent layout file invisible and my work was done.

Group Layout File

<TextView
        android:id="@+id/expandable_faqparent_id"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="2dp"
        android:layout_marginBottom="30dp"
        android:background="#ffffff"
        android:gravity="center"
        android:text="hello this is dummy text"
        android:textSize="20dp"
        android:textStyle="bold" />
<LinearLayout
    android:id="@+id/linear_parent_faq"
    android:layout_width="match_parent"
    android:layout_height="10dp"
    android:background="#cfd8dc"
    android:layout_weight="0.06"
    android:orientation="vertical">
</LinearLayout>

Child Layout File

<TextView
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/expandable_faq_child_id"
    android:text="DUMMY PARENT"
    android:background="#ffffff"
    android:gravity="center"
    android:elevation="2dp"/>
<LinearLayout
    android:id="@+id/linearfaq"
    android:layout_width="match_parent"
    android:layout_height="10dp"
    android:background="#cfd8dc"
    android:orientation="vertical">
</LinearLayout>

To hide the linear layout when any group is clicked Add this line into addChildView method in the adapter class

lv.setVisibility(View.INVISIBLE);

here lv contains the id of the linear layout

linear_parent_faq

of group layout file.

Answer 5

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;
}

Answer 6

These two attributes helps to give space

android:divider="@android:color/transparent"
android:dividerHeight="8dp"