How to Create a RecyclerView with Multiple View Types in Android

How to Create a RecyclerView with Multiple View Types in Android

6 June 2024 Stephan Petzl Leave a comment Tech-Help

Creating a dynamic list in Android often involves using a RecyclerView. However, when dealing with complex data, you might need to display different types of views within the same RecyclerView. This article will guide you on how to implement a RecyclerView with multiple view types effectively.

Step-by-Step Implementation

To achieve multiple view types in a RecyclerView, follow these steps:

1. Define Different ViewHolders

First, create different ViewHolder classes for each view type you want to display.


public class MyAdapter extends RecyclerView.Adapter {
    class ViewHolder0 extends RecyclerView.ViewHolder {
        public ViewHolder0(View itemView) {
            super(itemView);
            // Initialize your views here
        }
    }

    class ViewHolder2 extends RecyclerView.ViewHolder {
        public ViewHolder2(View itemView) {
            super(itemView);
            // Initialize your views here
        }
    }
}
    

2. Override getItemViewType()

Next, override the getItemViewType() method to return an integer representing the view type for each position.


@Override
public int getItemViewType(int position) {
    // Example logic for determining view type
    return position % 2 * 2;
}
    

3. Create ViewHolders Based on View Type

Override the onCreateViewHolder() method to return the appropriate ViewHolder based on the view type.


@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    switch (viewType) {
        case 0:
            View v0 = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_type_0, parent, false);
            return new ViewHolder0(v0);
        case 2:
            View v2 = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_type_2, parent, false);
            return new ViewHolder2(v2);
        default:
            throw new IllegalArgumentException("Invalid view type");
    }
}
    

4. Bind Data to ViewHolders

Finally, override the onBindViewHolder() method to bind data to the appropriate ViewHolder based on the view type.


@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {
    switch (holder.getItemViewType()) {
        case 0:
            ViewHolder0 viewHolder0 = (ViewHolder0) holder;
            // Bind data to viewHolder0
            break;
        case 2:
            ViewHolder2 viewHolder2 = (ViewHolder2) holder;
            // Bind data to viewHolder2
            break;
    }
}
    

Practical Example

Consider a scenario where you need to display a list of items where some items are headers and others are content. Here’s a simple implementation:


public class UserAdapter extends RecyclerView.Adapter {
    private static final int VIEW_TYPE_SECTION = 1;
    private static final int VIEW_TYPE_ITEM = 2;
    private List data = new ArrayList();

    @Override
    public int getItemViewType(int position) {
        if (data.get(position) instanceof SectionItem) {
            return VIEW_TYPE_SECTION;
        }
        return VIEW_TYPE_ITEM;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (viewType == VIEW_TYPE_SECTION) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_section, parent, false);
            return new SectionViewHolder(view);
        } else {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_content, parent, false);
            return new ContentViewHolder(view);
        }
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        RecyclerViewItem item = data.get(position);
        if (holder instanceof SectionViewHolder) {
            ((SectionViewHolder) holder).bind((SectionItem) item);
        } else {
            ((ContentViewHolder) holder).bind((ContentItem) item);
        }
    }

    @Override
    public int getItemCount() {
        return data.size();
    }

    // ViewHolder classes and data binding methods here
}
    

Conclusion

Implementing multiple view types in a RecyclerView can significantly enhance the flexibility and usability of your application. By following the steps outlined above, you can efficiently manage different view types within the same RecyclerView.

Enhancing Your Testing with Repeato

Managing multiple view types can add complexity to your testing process. This is where Repeato comes in handy. Repeato is a No-code test automation tool for iOS and Android that allows you to create, run, and maintain automated tests for your apps with ease. Its computer vision and AI capabilities make it particularly fast to edit and run tests, ensuring that your RecyclerView implementations work flawlessly across various scenarios.

By using Repeato, mobile developers can focus on creating a great product instead of spending excessive time on test automation. Additionally, it enables non-technical colleagues or QAs to handle test automation tasks, further streamlining the development process.

Like this article? there’s more where that came from!