How to add a dynamic view in between items of RecyclerView in android?

Adding Dynamic Views Between RecyclerView Items

RecyclerView in Android is a powerful and efficient way to display lists of data. But what if you need to insert dynamic views between these items? This article will guide you through the process of adding dynamic views in between items of your RecyclerView.

Understanding the Approach

We will implement this functionality by leveraging the following:

• Custom RecyclerView.Adapter: Create a custom adapter to manage the display of your data and dynamic views.
• View Types: Define different view types for your data items and dynamic views.
• getItemViewType(): Use this method in your adapter to determine the view type for each position in the RecyclerView.

Implementation Steps

1. Define View Types

First, define constants to represent your view types:

public static final int ITEM_VIEW_TYPE = 0;
public static final int DYNAMIC_VIEW_TYPE = 1;

2. Create Custom Adapter

Create a custom adapter class that extends RecyclerView.Adapter:

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    // ... your data and other adapter methods ...
    
    @Override
    public int getItemViewType(int position) {
        // Logic to determine view type based on position
        if (position % 3 == 0) {
            return DYNAMIC_VIEW_TYPE;
        } else {
            return ITEM_VIEW_TYPE;
        }
    }
    
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (viewType == ITEM_VIEW_TYPE) {
            // Inflate item layout
            View itemView = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.item_layout, parent, false);
            return new ItemViewHolder(itemView);
        } else {
            // Inflate dynamic view layout
            View dynamicView = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.dynamic_view_layout, parent, false);
            return new DynamicViewHolder(dynamicView);
        }
    }
    
    // ... other adapter methods ...
}

3. Create ViewHolder Classes

Create separate ViewHolders for each view type. These classes will manage the view’s components and interactions.

public class ItemViewHolder extends RecyclerView.ViewHolder {
    // ... hold references to item view components ...
    
    public ItemViewHolder(View itemView) {
        super(itemView);
        // ... initialize item view components ...
    }
}

public class DynamicViewHolder extends RecyclerView.ViewHolder {
    // ... hold references to dynamic view components ...
    
    public DynamicViewHolder(View itemView) {
        super(itemView);
        // ... initialize dynamic view components ...
    }
}

4. Implement onBindViewHolder

Implement the onBindViewHolder method to populate data into the appropriate ViewHolder:

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    if (holder.getItemViewType() == ITEM_VIEW_TYPE) {
        // Populate data for the item view
        ItemViewHolder itemViewHolder = (ItemViewHolder) holder;
        // ... set data in itemViewHolder ...
    } else {
        // Populate data for the dynamic view (if needed)
        DynamicViewHolder dynamicViewHolder = (DynamicViewHolder) holder;
        // ... set data in dynamicViewHolder ...
    }
}

Example: Adding Ads Between Items

Let’s look at an example where we add ad views dynamically between items in a RecyclerView. We will assume a simple data list.

Data List

List items = Arrays.asList("Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6");

Adapter with Ad Logic

public class MyAdapter extends RecyclerView.Adapter {
    // ... your data and other adapter methods ...
    
    @Override
    public int getItemViewType(int position) {
        if (position % 3 == 0 && position != 0) { 
            return DYNAMIC_VIEW_TYPE; // Ad after every 3 items (excluding first)
        } else {
            return ITEM_VIEW_TYPE;
        }
    }
    
    // ... onCreateViewHolder (similar to before, inflate different layouts) ...

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (holder.getItemViewType() == ITEM_VIEW_TYPE) {
            // ... set item data
            ItemViewHolder itemViewHolder = (ItemViewHolder) holder;
            itemViewHolder.textView.setText(items.get(position));
        } else {
            // ... set ad data (if needed)
            DynamicViewHolder dynamicViewHolder = (DynamicViewHolder) holder;
            // ... load ad into dynamicViewHolder ...
        }
    }
    
    @Override
    public int getItemCount() {
        // Calculate total count including ads
        return items.size() + (items.size() / 3) - (items.size() % 3 == 0 ? 1 : 0); 
    }
}

Summary

By following these steps, you can successfully add dynamic views, such as ads, headers, or footers, between items in your RecyclerView. This flexibility enhances the user experience by allowing you to insert relevant information or interactions at strategic points in your data display.