How to achieve Expandablelistview child custom layout?

Question

I can't figure out how to achieve this in android. I have a layout like this:

I want it such that on click of the plus button it will display the full layout like this:

This layout is the child of an expandablelistview item. So when the expandablelistview item is clicked it shows a short lost of items in that category. Then, if the user wants to see all, he will click the plus button. Any help will be appreciated.

score 1 · Answer 1 · edited Feb 14 '16 at 10:22

Create an XML layout with the name expandable_list_layout

<ExpandableListView
    android:id="@+id/data_list"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_below="@id/dynamicHeadingTxt"
    android:layout_marginTop="3dp"
    android:layout_weight="8"
    android:cacheColorHint="#00ffffff"
    android:childDivider="@drawable/child_separator"
    android:divider="@drawable/child_separator"
    android:groupIndicator="@null" >
</ExpandableListView>

Create a custom adapter. Let`s call it InboxExpandableListAdapter. This class should extend BaseExpandableListAdapter and override

public class ada extends BaseExpandableListAdapter{

@Override
public Object getChild(int groupPosition, int childPosition) {
    // TODO Auto-generated method stub
    return null;
}

@Override
public long getChildId(int groupPosition, int childPosition) {
    // TODO Auto-generated method stub
    return 0;
}

@Override
public View getChildView(int groupPosition, int childPosition,
        boolean isLastChild, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    return null;
}

@Override
public int getChildrenCount(int groupPosition) {
    // TODO Auto-generated method stub
    return 0;
}

@Override
public Object getGroup(int groupPosition) {
    // TODO Auto-generated method stub
    return null;
}

@Override
public int getGroupCount() {
    // TODO Auto-generated method stub
    return 0;
}

@Override
public long getGroupId(int groupPosition) {
    // TODO Auto-generated method stub
    return 0;
}

@Override
public View getGroupView(int groupPosition, boolean isExpanded,
        View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    return null;
}

@Override
public boolean hasStableIds() {
    // TODO Auto-generated method stub
    return false;
}

@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
    // TODO Auto-generated method stub
    return false;
}
}

If you look here, the overriden method takes two arguments i.e., a groupposition and a childposition. These suggest that we should supply the adapter with some kind of list which must contain groups and their child. I am creating a constructor for the class

public InboxExpandableListAdapter(Activity context, List<String> data, List<String> data_secondry,
        List< List<String>> dataCollections) {
    this.context = context;
    this.dataCollections = dataCollections;
    this.data = data;
    this.data_secondry = data_secondry;
}

Now getChildView method and getGroupView populates the view for each item. So inside these methods, inflate the layout which you want to show for group and their respective child

public View getChildView(final int groupPosition, final int childPosition,
        boolean isLastChild, View convertView, ViewGroup parent) {
    final String data = (String) getChild(groupPosition, childPosition);
    LayoutInflater inflater = context.getLayoutInflater();

    if (convertView == null) {
        convertView = inflater.inflate(R.layout.child_item, null);
    }

    TextView item = (TextView) convertView.findViewById(R.id.data);

    item.setText(data);
    return convertView;
}

public View getGroupView(int groupPosition, boolean isExpanded,
        View convertView, ViewGroup parent) {

    String laptopName = (String) getGroup(groupPosition);
    if (convertView == null) {
        LayoutInflater infalInflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = infalInflater.inflate(R.layout.group_item,
                null);
    }

    TextView item = (TextView) convertView.findViewById(R.id.data);
    item.setTypeface(null, Typeface.BOLD);
    item.setText(laptopName);
    return convertView;
}

In getChildView method, context.getLayoutInflater() is showing error — Ragavendra M, May 03 '18 at 10:28

score 0 · Answer 2 · answered Oct 08 '15 at 03:01

0

CoordinatorLayout is the thing which designed for such cases. Have a look at the example in Android Developers blog

Alternatively, you might have two layouts grouped - one is the topmost upper row and another one - other rows beneath it. Then handle "+" button Click event on which you'd reveal the latter one (with possible animation).

I'd proceed with CoordinatorLayout as this is preferable approach, however feel free to try both and see what suits you better.

answered Oct 08 '15 at 03:01

Sunseeker

1,503
9
21

I have read up on CoordinatorLayout and I'm still not clear how this is achievable with this. Kindly provide more guidance to this. Thanks – ifiok Oct 08 '15 at 14:15

How to achieve Expandablelistview child custom layout?

2 Answers2

Linked