Android ExpandableListView with custom complex layout for items

Question

I'm working on an android application and I've hit a wall with a complex layout hierarchy I want to implement. The application will list the menus of a coffee place. As of right now, the menu looks like this:

The list is implemented as a RecyclerView. The custom adapter for the view takes care of each element's actions. Touching an element increments the order price and adds 1 to the total selected elements. You can also click the number to get a pick up dialog and change the amount.

As you can imagine there is a lot of code there.

This is the theoretical layout I want to implement:

I'm focusing on the inner ExpandableListView. Basically I want to categorize the menu items by food, drink, etc.

The problem I have is that I don't know how can I preserve the "complexity" of the item's layout. I've managed to create a simple ExpandableListView with only the item name, like this:

But I really don't know how to use the item adapter I created for the previous layout within the ExpandableListView. Unfortunately I can't share much code, but I'm not asking for a code snippet, but more for orientation on how I could implement this, ideas, tips... It's my very first Android application :-)

Any help would be very much appreciated.

Thanks a lot!

Answer 1

Well, I found a solution for my problem, at the end of the day it was not that complicated. I'll try to summarise in case someone is on the same situation.

To begin with, you're going to have to create a custom adapter for your ExpandableListView. I did have a custom adapter for my previous RecyclerView, and it used the ViewHolder patter, that was confusing me.

This example actually was very useful to understand how to implement the custom adapter. The important method to override is getChildView. In that method the whole child view is constructed.

@Override
public View getChildView(int listPosition, final int expandedListPosition,
                             boolean isLastChild, View convertView, ViewGroup parent) {
        final MenuItem item = (MenuItem) getChild(listPosition, expandedListPosition);

        if (convertView == null) {
            LayoutInflater layoutInflater = (LayoutInflater) this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = layoutInflater.inflate(R.layout.menu_item, null);
        }

        // Save final reference to be able to access it in inner classes
        final View finalConvertView = convertView;

        // Set the item name
        TextView itemName = (TextView) convertView.findViewById(R.id.item_menu_name);
        itemName.setText(item.getName());

        // Set item price
        TextView itemPrice = (TextView) convertView.findViewById(R.id.item_menu_price);
        itemPrice.setText(item.getFormattedPrice());

This is not the complete code, but you can see how its just a matter of getting the views in the menu_item.xml layout and populating them :-)

Before I was using Android data bingind, but I don't know how to use it without a ViewHolder.