Implement Divider between the last item of the child and next Groupheader expandableListview

Question

I have implemented expandablelistview in android app and also implemented divider in it.

I have one problem in not getting the divider between the last item of the child and next group header.

Following image is how I want :

But following is what I'm getting:

Here if you compare both images the divider between the CID and About Set is not coming how to implement that divider ?

Also the groupIndicator is not changing inspite of providing the xml in the groupindicator containing the item tag with 2 different images in android:state_expanded and android:state_empty.

But the property of android:state_expanded and android:state_empty doesn't appear.

Citronellal

Answer 1

It's very easy to Implement.
1- We will add divider in groub_item_layout and child_item_layout:
group_item_layout :

<?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="wrap_content"
    android:background="@color/white"
    android:minHeight="50dp"
    android:orientation="vertical">

    <View
        android:id="@+id/adapter_divider_top"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#B6B6B6" />

    <TextView
        android:id="@+id/tv_adapter_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:paddingBottom="10dp"
        android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
        android:paddingRight="10dp"
        android:paddingTop="10dp"
        android:text="Home"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/primary_text" />

</LinearLayout>

child_item_layout :

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

    <TextView
        android:id="@+id/tv_adapter_desc"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="10dp"
        android:text="description"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#212121" />

    <View
        android:id="@+id/adapter_divider_bottom"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/divider" />
</LinearLayout>

2- In your Adapter getChildView() and getGroupView() Methods:

 @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View view, ViewGroup viewGroup) {

        if (view == null) {

            view = mInflater.inflate(R.layout.group_item_layout, null);

            mGroupViewHolder = new GroupViewHolder();

            mGroupViewHolder.tvTitle = (TextView) view.findViewById(R.id.tv_adapter_title);

            mGroupViewHolder.dividerTop = view.findViewById(R.id.adapter_divider_top);

            view.setTag(mGroupViewHolder);

        } else {

            mGroupViewHolder = (GroupViewHolder) view.getTag();

        }

        // That if you want to show divider in expanded group only.
        // If you want to show divider in all group items remove this block.
        if (isExpanded) {

            mGroupViewHolder.dividerTop.setVisibility(View.VISIBLE);

        } else {

            mGroupViewHolder.dividerTop.setVisibility(View.INVISIBLE);

        }
        // That if you want to show divider in expanded group only.

        String myTitle = getGroup(groupPosition);

        if(myTitle != null) {

            mGroupViewHolder.tvTitle.setText(myTitle);

        }

        return view;
    }

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


        if (view == null) {

            view = mInflater.inflate(R.layout.child_item_layout, null);

            mChildViewHolder = new ChildViewHolder();

            mChildViewHolder.tvDesc = (TextView) view.findViewById(R.id.tv_adapter_desc);

            mChildViewHolder.dividerBottom = view.findViewById(R.id.adapter_divider_bottom);

            view.setTag(mChildViewHolder);

        } else {

            mChildViewHolder = (ChildViewHolder) view.getTag();

        }

        if(isLastChild) {

            mChildViewHolder.dividerBottom.setVisibility(View.VISIBLE);

        } else {

            mChildViewHolder.dividerBottom.setVisibility(View.INVISIBLE);

        }

        Timesheet timesheet = getChild(groupPosition, childPosition);

        if(timesheet != null) {

            mChildViewHolder.tvDesc.setText(timesheet.getDescription());

        }


        return view;
    }

Hope this helps anyone.

Hanrahan

Answer 2

Firstly make custom expandable listview... then add different divider to header and its child

Refer the code(header of expandable listview xml):-

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

    <ImageView
        android:id="@+id/divider_top"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/divider_vertical" />

    <TextView
        android:id="@+id/lblListHeader"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/divider_top"
        android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
        android:textColor="#c5e26d"
        android:textSize="17dp" />

    <ImageView
        android:id="@+id/divider_bottom"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/lblListHeader"
        android:layout_centerHorizontal="true"
        android:background="@drawable/divider" />

</RelativeLayout>

Sizing

Answer 3

Instead of using ExpandableListView's divider, you can make your own. Set the background of the lists's parent elements to

android:background="@drawable/top_divider"

Where drawable/top_divider.xml contains

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="-1dp" android:right="-1dp" android:bottom="-1dp">
      <shape>
            <solid android:color="@android:color/transparent" />
            <stroke android:width="1dp" android:color="@android:color/black" />
      </shape>
    </item>
</layer-list>

Gulch