Creating ViewHolders for ListViews with different item layouts

Question

I have a ListView with different layouts for different items. Some items are separators. Some items are different because they hold different kinds of data, etc.

I want to implement ViewHolders to speed up the getView process, but I'm not quite sure how to go about it. Different layouts have different pieces of data (which makes naming difficult) and different numbers of Views I want to use.

How should I go about doing this?

The best idea I can come up with is to create a generic ViewHolder with X items where X is the number of Views in an item layout with the highest number of them. For the other views with a small number of Views, I'll just use a subsection of those variables in the ViewHolder. So say I have 2 layouts I use for 2 different items. One has 3 TextViews and the other has 1. I would create a ViewHolder with 3 TextView variables and only use 1 of them for my other item. My problem is that this can get really ugly looking and feels really hacky; especially when an item layout may have many Views of many different types.

Here is a very basic getView:

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    MyHolder holder;

    View v = convertView;
    if (v == null) {
        LayoutInflater vi = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = vi.inflate(R.layout.layout_mylistlist_item, parent, false);

        holder = new MyHolder();
        holder.text = (TextView) v.findViewById(R.id.mylist_itemname);
        v.setTag(holder);
    }
    else {
        holder = (MyHolder)v.getTag();
    }

    MyListItem myItem = m_items.get(position);

    // set up the list item
    if (myItem != null) {
        // set item text
        if (holder.text != null) {
            holder.text.setText(myItem.getItemName());
        }
    }

    // return the created view
    return v;
}

Suppose I had different types of row layouts, I could have a ViewHolder for each type of row. But what type would I declare "holder" to be at the top? Or would I declare a holder for each type and then use the one for the type of row I'm on.

Portingale

Answer 1

ListView has a built in type management system. In your adapter, you have several types of items, each with their own view and layout. By overriding getItemViewType to return the data type of a given position, ListView is garunteed to pass in the correct convertview for that type of data. Then, in your getView method simply check the datatype and use a switch statement to handle each type differently.

Each Layout type should have its own viewholder for naming clarity and ease of maintainence. Name the ViewHolders something related to each data type to keep everything straight.

Trying to overlap everything into one ViewHolder is just not worth the effort.

Edit Example

@Override 
public View getView(int position, View convertView, ViewGroup parent) { 
    int viewType = this.getItemViewType(position);

    switch(viewType)
    {
       case TYPE1:

        Type1Holder holder1; 

         View v = convertView; 
         if (v == null) { 
             LayoutInflater vi = (LayoutInflater)getContext().getSystemService     (Context.LAYOUT_INFLATER_SERVICE); 
             v = vi.inflate(R.layout.layout_mylistlist_item_type_1, parent, false); 

             holder1 = new Type1Holder (); 
             holder1.text = (TextView) v.findViewById(R.id.mylist_itemname); 
             v.setTag(holder1); 
         } 
         else { 
             holder1 = (Type1Holder)v.getTag(); 
         } 

         MyListItem myItem = m_items.get(position); 

         // set up the list item 
         if (myItem != null) { 
             // set item text 
             if (holder1.text != null) { 
                 holder1.text.setText(myItem.getItemName()); 
             } 
         } 

         // return the created view 
         return v; 


     case TYPE2:
            Type2Holder holder2; 

         View v = convertView; 
         if (v == null) { 
             LayoutInflater vi = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
             v = vi.inflate(R.layout.layout_mylistlist_item_type_2, parent, false); 

             holder2 = new Type2Holder (); 
             holder2.text = (TextView) v.findViewById(R.id.mylist_itemname); 
             holder2.icon = (ImageView) v.findViewById(R.id.mylist_itemicon); 
             v.setTag(holder1); 
         } 
         else { 
             holder2 = (Type2Holder)v.getTag(); 
         } 

         MyListItem myItem = m_items.get(position); 

         // set up the list item 
         if (myItem != null) { 
             // set item text 
             if (holder2.text != null) { 
                 holder2.text.setText(myItem.getItemName()); 
             } 

             if(holder2.icon != null)
                 holder2.icon.setDrawable(R.drawable.icon1);
         } 


         // return the created view 
         return v; 


       default:
           //Throw exception, unknown data type
    }
} 

Bos

Perhaps I need some brushing up on my Java then. At the beginning of the getView functions in my ListActivities, I instantiate my defined holder for that ListView. I then check convertView for null and either getTag or create the holder and set the items. If I'm going to use different holders for item types, what should I declare my holder as in the start of getView? Or do I need to instantiate 1 for all my item types and initialize and use the one that corresponds to the row's type? – Portingale

@Andrew, each holder would be individually defined in one of the case statements. Put all of your existing code into ecah case statement, but change the viewholder type and data handling for each one. I'll edit my answer with an example in a bit. – Bos

Ya, I understand what you want me to do, but my problem is I must declare the variable to use outside of the switch (much like "holder" has been declared outside of the "if (v == null)"); so what datatype do I declare it as? – Portingale

Ah, I see what you are wanting me to do. You want me to use a switch around the entire getView function. At the moment my switch is inside "if (v == null)". Ok, I can try this, thank you. – Portingale

@Portingale think of it as writing an entirely different getView function for each view type, since you are returning an entirely different view. You could even extract each of the case statements into it's own method if you want. – Bos

@Andrew, make sure you implement getItemViewType correctly. The docs are pretty good on that. – Bos

Here if i do View v= convertview again in Case Type2 then it gives me error of Duplicate variable because View v declared in inner side of Switch case.. and if i declare view outside of Switch case then runtime error occurs.. – Hoofed

above answer will be ending up with a classcastexception when you try to cast view holder in second type because convertview will have holder of first one. – Pursy

@pyus13 No it wont, the key is that when you override those methods, listview guarantees to give you corrent view type back – Napalm

@pyus13 to fix the exception, make sure to also override getViewTypeCount to return the total number of different view types in your listview. The answer only mentioned overriding getItemViewType – Periapt

@Periapt thanks,getViewTypeCount solved my problem. – Swiss

My current implementation is the same but with recyclerview. Yay 2015. I was however thinking if a "god" View holder would be worth it. Your answer made me stick to my guns. – Immaculate

You might need to add braces to the case statements - Variables in a switch case have a global scope for that switch construct. – Cyprinid

Answer 2

Another example.

public class CardArrayAdapter extends ArrayAdapter {

public CardArrayAdapter(Context context) {
    super(context, R.layout.adapter_card);
}

@Override
public View getView(int position, View view, ViewGroup parent) {

    final Card card = getItem(position);
    ViewHolder holder;

    //if (view != null) {
        //holder = (ViewHolder) view.getTag();
    //} else {
    Log.d("card.important?", card.name + " = " + Boolean.toString(card.important));
    if(card.important) {
        view = LayoutInflater.from(getContext()).inflate(R.layout.adapter_card_important, parent, false);
    }else {
        view = LayoutInflater.from(getContext()).inflate(R.layout.adapter_card, parent, false);
    }
    holder = new ViewHolder(view);
    view.setTag(holder);
    //}

    // IMG
    Picasso.with(getContext())
            .load(card.logo)
            .placeholder(R.drawable.ic_phonebook)
            .error(R.drawable.ic_phonebook)
            .fit()
            .centerCrop()
            .transform(new CircleTransform())
            .into(holder.logo);

    holder.name.setText(card.name);

    if(card.important) {
        holder.category.setVisibility(View.VISIBLE);
        if (card.category.equals("airline")) {
            card.category = "airlines";
        }
        int id = getContext().getResources().getIdentifier(card.category, "string", getContext().getPackageName());
        holder.category.setText(getContext().getResources().getString(id));
    }else {
        holder.category.setVisibility(View.GONE);
    }

    holder.tagline.setText(card.tagline);
    holder.favorite.setChecked(card.favorite);

    holder.favorite.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            card.favorite = ((CheckBox) v).isChecked();
            card.save();
        }
    });

    return view;

}

static class ViewHolder {
    @InjectView(R.id.logo) ImageView logo;
    @InjectView(R.id.name) TextView name;
    @InjectView(R.id.category) TextView category;
    @InjectView(R.id.tagline) TextView tagline;
    @InjectView(R.id.favorite) CheckBox favorite;
    public ViewHolder(View view) {
        ButterKnife.inject(this, view);
    }
}

}

Heterotypic

I think, this will work, but it make viewholder less usable, since everytime it change type, you inflate new layout – Gunplay

Answer 3

Using view types is not the simplest way. Sometimes it's better not to use ViewType, but implement a class hierarchy which will do all the things.

Okay, we have a task to show a furniture items in the list - chairs, beds and so on. First implement the object model:

public abstract class FurnitureBase  {
    @LayoutRes
    abstract public int getLayoutFileResource();
    abstract public HolderFurnitureBase getHolder(View convertView);
}


public class FurnitureChair extends FurnitureBase  {
    public double price;
    public Material material;
    ...

    public FurnitureChair(double price, Material material) {
        ...
    }


    @Override
    public int getLayoutFileResource() {
        return R.layout.item_furniture_chair;
    }


    @Override
    public HolderFurnitureBase getHolder(View convertView) {
        return new HolderFurnitureChair(convertView);
    }
}


public class FurnitureBed extends FurnitureBase  {
    public double price;
    public BedSize size;
    ...

    public FurnitureBed(double price, BedSize size) {
        ...
    }


    @Override
    public int getLayoutFileResource() {
        return R.layout.item_furniture_bed;
    }


    @Override
    public HolderFurnitureBase getHolder(View convertView) {
        return new HolderFurnitureBed(convertView);
    }
}

Next, create holders:

public abstract class HolderFurnitureBase
{
    public HolderFurnitureBase(View convertView) { };

    public abstract void renderItem(FurnitureBase item);
}

public class HolderFurnitureChair extends HolderFurnitureBase
{
    private final ImageViewAccent mIconAction;
    private final TextViewPrimaryDark mPrice;
    ...

    public HolderFurnitureChair(View convertView)
    {
        // just init views
        super(convertView);
        this.mIconAction = convertView.findViewById(R.id.item_furniture_chair_icon_action;
        this.mPrice = convertView.findViewById(R.id.item_furniture_chair_text_price);
    }


    public void renderItem(FurnitureBase item)
    {
        FurnitureChair chair = (FurnitureChair ) item;
        mIconAction.setImageResource(chair.getProductTypeIcon());
        mPrice.setText(Utils.Formatter.formatMoney(chair.price, chair.priceCurrency));
    }
}


public class HolderFurnitureBed extends HolderFurnitureBase
{
    private final TextView mSize;
    private final TextViewPrimaryDark mPrice;
    ...

    public HolderFurnitureBed(View convertView)
    {
        // just init views
        super(convertView);
        this.mSize = convertView.findViewById(R.id.item_furniture_bed_text_size;
        this.mPrice = convertView.findViewById(R.id.item_furniture_bed_text_price);
    }


    public void renderItem(FurnitureBase item)
    {
        FurnitureBed bed = (FurnitureBed) item;
        mSize.setText(bed.getSizeText());
        mPrice.setText(Utils.Formatter.formatMoney(bed.getPrice(), bed.getPriceCurrency()));
    }
}

And gather all the magic in the adapter:

public final class AdapterFurniture extends ArrayAdapter<FurnitureBase>
{
    public AdapterFurniture(Context context, List<FurnitureBase> items) {
        super(context, R.layout.item_furniture_bed, items);
    }

    @NonNull
    @Override
    public View getView(final int position, @Nullable View convertView, @NonNull ViewGroup parent)
    {
        FurnitureBase item = getItem(position);
        HolderFurnitureBase holder;
        if (convertView == null) {
            convertView = LayoutInflater.from(getContext()).inflate(item.getLayoutFileResource(), parent, false);
            holder = item.getHolder(convertView);
        }
        else {
            holder = (HolderFurnitureBase) convertView.getTag();
        }
        holder.renderItem(getItem(position));
        convertView.setTag(holder);
        return convertView;
    }
}

That's all. No need to count view types, no need to change adapter when a sofa added, and an armchair, and more and more - just extend the base class for the new item and holder base class for the new holder, and the app is ready for testers to enjoy :)

Gine