How to correctly use ViewHolder with custom view in list adapter

Question

In my Android app, I have ListView which contains list of cars. Each car has list of (1 to 10) groups.

In each list item I have horizontal list of groups. Im using FlowLayout for this horizontal list, adding "manually" views to this.

Im wondering am I using this ViewHolder concept completely wrong?

At least this is eating much more memory than with out the horizontal list inside each item (FlowLayout).

Should I have own list adapter for this horizontal list, or how to improve this?

/**
 * List adapter (BaseAdapter), getView
 *
 */
@Override
public View getView(int position, View convertView, ViewGroup parent) {

    ViewHolder holder = null;
    Car car = (Car) getItem(position);

    if (convertView == null) {
        convertView = mInflater.inflate(R.layout.list_item_cars, null);
        holder = new ViewHolder();
        holder.carName = (TextView)convertView.findViewById(R.id.car_name);
        holder.carGroups = (FlowLayout)convertView.findViewById(R.id.car_groups);
        convertView.setTag(holder);
    }
    else {
        holder = (ViewHolder)convertView.getTag();
    }

    holder.carName.setText(car.getName());
    buildGroupsFlowLayout(holder.carGroups, car.getGroups());
    return convertView;
}

/**
 * Build FlowLayout
 */
private void buildGroupsFlowLayout(FlowLayout flowLayout, List<CarGroup> groupsList) {

    flowLayout.removeAllViews();
    int i = 0;

    for(CarGroup group : groupsList) {
        View groupItemView = mInflater.inflate(R.layout.car_group_item, null);
        TextView lineView = (TextView)groupItemView.findViewById(R.id.car_group_item_goup_text);
        lineView.setText(group.getName());
        lineView.setTextColor(group.getColor());

        flowLayout.addView(groupItemView, i, new FlowLayout.LayoutParams(FlowLayout.LayoutParams.WRAP_CONTENT, FlowLayout.LayoutParams.WRAP_CONTENT));
        i++;
    }
}

public static class ViewHolder {
    public TextView carName;
    public FlowLayout carGroups;
}

Answer 1

Try creating custom view for your Car (like CarView) with all UI logic in it, and then use it as a ViewHolder.

Maybe something like this:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    CarView carView;
    if(convertView == null){
        carView = new CarView(context);
    } else {
        carView = (CarView) convertView;
    }
    carView.setData(getItem(position));
    return carView;
}

And the CarView (you could put your FlowLayout logic here):

public class CarView extends FrameLayout{

  public SeriesTileView(Context context) {
    this(context, null);
  }

  public SeriesTileView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public SeriesTileView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    inflate(context, R.layout.view_car, this);
    findViews();
  }  

  public void setData(Car car) {
    nameTextView.setText(car.getName());
  }

}