Question

Here’s a pretty cookie cutter program that expands a list, and then when you click a child, it pops a message saying, “Child Clicked”. But I want the expandable list to consists of recipes so that when clicked, it shows a popup window of the ingredients. I tried making it an arraylist of objects instead of strings, and having the objects contain the list of ingredients, but I got all tangled up when trying to display the ingredients.. Thanks in advance!

package com.poe.poeguide;

import java.util.ArrayList;
import com.actionbarsherlock.app.SherlockActivity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.NavUtils;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ExpandableListView;
import android.widget.Toast;
import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.ActionBar.OnNavigationListener;
import com.actionbarsherlock.view.MenuItem;
import android.widget.ExpandableListView.OnChildClickListener;

public class Recipes extends SherlockActivity {
private ExpandableListView mExpandableList;

 /** An array of strings to populate dropdown list */
String[] actions = new String[] {
   "Recipes",
   "Main Page",
   "Attributes",
};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_recipes);

    /** Create an array adapter to populate dropdownlist */
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(getBaseContext(), R.layout.sherlock_spinner_item, actions);

    /** Enabling dropdown list navigation for the action bar */
    getSupportActionBar().setNavigationMode(com.actionbarsherlock.app.ActionBar.NAVIGATION_MODE_LIST);

    /** Defining Navigation listener */
    ActionBar.OnNavigationListener navigationListener = new OnNavigationListener() {


        @Override
        public boolean onNavigationItemSelected(int itemPosition, long itemId) {
            switch(itemPosition) {
            case 0:

                break;
            case 1:
                Intent a = new Intent(Recipes.this, MainActivity.class);
                startActivity(a);
                break;
            }
            return false;
        }

    };

    getSupportActionBar().setListNavigationCallbacks(adapter, navigationListener);
    adapter.setDropDownViewResource(R.layout.sherlock_spinner_dropdown_item);



    mExpandableList = (ExpandableListView)findViewById(R.id.expandable_list);

    ArrayList<Parent> arrayParents = new ArrayList<Parent>();
    ArrayList<String> arrayChildren = new ArrayList<String>();

    //======================================================================================
    //here we set the parents and the children
        //for each "i" create a new Parent object to set the title and the children
        Parent parent = new Parent();
        parent.setTitle("Pies");
        arrayChildren.add("Apple Pie ");
        arrayChildren.add("Blueberry Pie ");
        parent.setArrayChildren(arrayChildren);

        //in this array we add the Parent object. We will use the arrayParents at the setAdapter
        arrayParents.add(parent);

    //======================================================================================

    //sets the adapter that provides data to the list.
    mExpandableList.setAdapter(new MyCustomAdapter(Recipes.this,arrayParents));

    mExpandableList.setOnChildClickListener(new OnChildClickListener()
    {

        @Override
        public boolean onChildClick(ExpandableListView arg0, View arg1, int arg2, int arg3, long arg4)
        {
            Toast.makeText(getBaseContext(), "Child clicked", Toast.LENGTH_LONG).show();
            return false;
        }
    });

}


@Override
public boolean onCreateOptionsMenu(com.actionbarsherlock.view.Menu menu) {
    getSupportMenuInflater().inflate(R.menu.activity_recipes, menu);
    return super.onCreateOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
    case android.R.id.home:
        // This ID represents the Home or Up button. In the case of this
        // activity, the Up button is shown. Use NavUtils to allow users
        // to navigate up one level in the application structure. For
        // more details, see the Navigation pattern on Android Design:
        //
        // http://developer.android.com/design/patterns/navigation.html#up-vs-back
        //
        NavUtils.navigateUpFromSameTask(this);
        return true;
    }
    return super.onOptionsItemSelected(item);
}

}

Answer 1

Before we begin, note that Recipes is a confusing name for an Activity. I would highly recommend changing the name to follow the standard convention of ending with the word “Activity” (e.g., RecipeActivity).

---

First you need to create a Recipe object so you can store the name and ingredients together. This object can be as simple or as complex as you need, but let’s pretend it looks something like this:

import java.util.List;

public class Recipe {
    private String name;
    private List<String> ingredients;
    private List<String> directions;

    @Override
    public String toString() {
        // By default, the Adapter classes in Android will call toString() on
        // your object to figure out how it should appear in lists. To make sure
        // the list displays the recipe name, we return the recipe name here.
        return name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public List<String> getIngredients() {
        return ingredients;
    }

    public void setIngredients(List<String> ingredients) {
        this.ingredients = ingredients;
    }

    public List<String> getDirections() {
        return directions;
    }

    public void setDirections(List<String> directions) {
        this.directions = directions;
    }
}

Notice that we override toString() for this object and return the recipe name. This way, when we ask our adapter class to display a list of Recipe objects, it knows what text should be shown for each item in the list.

---

When creating the data for your list, instead of:

ArrayList<String> arrayChildren = new ArrayList<String>();

Use:

List<Recipe> arrayChildren = new ArrayList<Recipe>();

(Note: You might need to modify the Parent class to take List<Recipe> or the generic List<?> for the children if that field is only accepting List<String> right now.)

Let’s add one sample Recipe object:

Recipe salsa = new Recipe();
salsa.setName("Pineapple Salsa");
salsa.setIngredients(Arrays.asList("pineapple", "cilantro", "lime", "jalapeno"));
salsa.setDirections(Arrays.asList("Blend ingredients and enjoy"));
arrayChildren.add(salsa);

Now that your list is backed by Recipe objects instead of just strings, it’s simply a matter of getting that object when a list item is clicked. Here’s how you might do this:

mExpandableList.setOnChildClickListener(new OnChildClickListener() {
    @Override
    public boolean onChildClick(ExpandableListView parent, View v,
            int groupPosition, int childPosition, long id) {
        // Get the selected recipe
        Recipe recipe = (Recipe) parent.getExpandableListAdapter()
                .getChild(groupPosition, childPosition);

        // Build a string listing the ingredients
        StringBuilder message = new StringBuilder("Ingredients:\n");
        for (String ingredient : recipe.getIngredients())
            message.append("\n").append(ingredient);

        // Display a dialog listing the ingredients
        new AlertDialog.Builder(MyGreatHelloWorldActivity.this)
                .setTitle(recipe.getName()).setMessage(message)
                .setPositiveButton("Yum!", null).show();

        // Return true because we handled the click
        return true;
    }
});

---

Update: Here’s how you can complete the task with a no-frills adapter for expandable lists.

I created a generic class called ExpandableListGroup (equivalent to your Parent class) to hold the children. The class is generic so it will work with any kind of objects, but we’ll use it with Recipe objects.

import java.util.List;

public class ExpandableListGroup<T> {
    private String name;
    private List<T> children;

    public ExpandableListGroup(String name, List<T> children) {
        this.name = name;
        this.children = children;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public List<T> getChildren() {
        return children;
    }

    public void setChildren(List<T> children) {
        this.children = children;
    }

    @Override
    public String toString() {
        return name;
    }
}

Then I created the following generic ExpandableListArrayAdapter class:

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.TextView;

public class ExpandableListArrayAdapter<T> extends BaseExpandableListAdapter {
    private List<ExpandableListGroup<T>> groups;
    private LayoutInflater inflater;

    public ExpandableListArrayAdapter(Context context,
            List<ExpandableListGroup<T>> groups) {
        inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        this.groups = groups;
    }

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded,
            View convertView, ViewGroup parent) {
        ExpandableListGroup<T> group = getGroup(groupPosition);
        if (convertView == null) {
            convertView = inflater.inflate(
                    android.R.layout.simple_expandable_list_item_1, parent,
                    false);
        }

        TextView text = (TextView) convertView;
        text.setText(group.toString());
        return convertView;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition,
            boolean isLastChild, View convertView, ViewGroup parent) {
        T item = getChild(groupPosition, childPosition);
        if (convertView == null) {
            convertView = inflater.inflate(
                    android.R.layout.simple_expandable_list_item_1, parent,
                    false);
        }

        TextView text = (TextView) convertView;
        text.setText(item.toString());
        return convertView;
    }

    @Override
    public T getChild(int groupPosition, int childPosition) {
        return groups.get(groupPosition).getChildren().get(childPosition);
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    @Override
    public int getChildrenCount(int groupPosition) {
        return groups.get(groupPosition).getChildren().size();
    }

    @Override
    public ExpandableListGroup<T> getGroup(int groupPosition) {
        return groups.get(groupPosition);
    }

    @Override
    public int getGroupCount() {
        return groups.size();
    }

    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    @Override
    public boolean hasStableIds() {
        return true;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }
}

Now, here’s how you tie it all together:

// Create one list per group
List<Recipe> appetizers = new ArrayList<Recipe>(),
        desserts = new ArrayList<Recipe>();

// TODO: Create Recipe objects and add to lists

List<ExpandableListGroup<Recipe>> groups = Arrays.asList(
        new ExpandableListGroup<Recipe>("Appetizers", appetizers),
        new ExpandableListGroup<Recipe>("Desserts", desserts));
mExpandableList.setAdapter(new ExpandableListArrayAdapter<Recipe>(this,
        groups));