how to customize views of ExpandableList

Question

I need an ExpandableList in my Android app. By extending ExpandableListActivity whose content view is as the following:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >

   <ExpandableListView
      android:id="@id/android:list"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent" />

   <TextView
      android:id="@+id/tv_add"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="@string/txt_add" />
</LinearLayout>  

and extending BaseExpandableListAdapter I am now able to display data of groups and children in a TextView.
However, I want to customize the view of children. How may I be able to do so through another xml file?

EDIT:
Here's my row.xml for the view of children:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >

 <TextView 
     android:id="@+id/title"
     android:textSize="16sp"
     android:textStyle="bold"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:gravity="left"
 />

 <TextView 
     android:id="@+id/description"
     android:textSize="10sp"
     android:textStyle="normal"
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content"
     android:gravity="left"
 />
</LinearLayout>

Answer 1

Create two layout xml files for Group and Child views respectively - For example, *group_layout.xml* and *child_layout.xml* These layouts are inflated and used in the custom ExpandableListAdapter as shown below.

You can customize the Adapter class and set that adapter to the ExpandableListView.

public class SampleActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
         ExpandableListView listView = (ExpandableListView) findViewById(R.id.listView);

         ExpandableListAdapter adapter = new ExpandableListAdapter(this, new ArrayList<String>(), new ArrayList<ArrayList<Vehicle>>());

         // Set this adapter to the list view
         listView.setAdapter(adapter);
    }
}

Custom Adapter class can be created as shown below:

class ExpandableListAdapter extends BaseExpandableListAdapter {
 public ExpandableListAdapter(Context context, ArrayList<String> groups,
            ArrayList<ArrayList<Vehicle>> children) {
        this.context = context;
        this.groups = groups;
        this.children = children;
    }
    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return children.get(groupPosition).get(childPosition);
    }

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

    // Return a child view. You can load your custom layout here.
    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild,
            View convertView, ViewGroup parent) {
        Vehicle vehicle = (Vehicle) getChild(groupPosition, childPosition);
        if (convertView == null) {
            LayoutInflater infalInflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = infalInflater.inflate(R.layout.child_layout, null);
        }
        TextView tv = (TextView) convertView.findViewById(R.id.tvChild);
        tv.setText("   " + vehicle.getName());
        return convertView;
    }

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

    @Override
    public Object getGroup(int groupPosition) {
        return groups.get(groupPosition);
    }

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

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

    // Return a group view. You can load your custom layout here.
    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView,
            ViewGroup parent) {
        String group = (String) getGroup(groupPosition);
        if (convertView == null) {
            LayoutInflater infalInflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = infalInflater.inflate(R.layout.group_layout, null);
        }
        TextView tv = (TextView) convertView.findViewById(R.id.tvGroup);
        tv.setText(group);
        return convertView;
    }

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

    @Override
    public boolean isChildSelectable(int arg0, int arg1) {
        return true;
    }
}

Hope this helps you.

Answer 2

Thx to PRC, but according to my row.xml, the correct version of getChildView would be

 @Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild,
        View convertView, ViewGroup parent) {
    LinearLayout layout;
    Vehicle vehicle = (Vehicle) getChild(groupPosition, childPosition);
    if (convertView == null) {
        LayoutInflater infalInflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        layout = (LinearLayout) infalInflater.inflate(R.layout.child_layout, null);
    }
    TextView tv = (TextView) convertView.findViewById(R.id.tvChild);
    tv.setText("   " + vehicle.getName());
    return layout;
}