RecyclerView with GridLayoutManager and first element with different viewHolder

Question

I need to create a recyclerView with a GridLayoutManager on two lines, and the first element to be bigger than the rest. The result should look like this:

I managed to achieve this, but in an unconventional way. In my recyclerView adapter I use a different viewHolder for the first element, a bigger one. That would have been a great solution, but the second element would have gone below the first element. So I made a trick of giving recyclerView a fixed height same as the first element, that way the first element and the second would overlap and I would simply make the visibility of the second to gone.

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    switch (viewType) {
        case 0:
            final View view = inflater.inflate(R.layout.big_item, parent, false);
            return new BigViewHolder(view);
        case 2:
            final View view2 = inflater.inflate(R.layout.normal_item, parent, false);
            return new NormalViewHolder(view2);
        default:
            return null;
    }
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    if (position == 1) {
        holder.itemView.setVisibility(View.GONE);
    }}

@Override
public int getItemViewType(int position) {
    if (position == 0) {
        return 0;
    } else return 2;
}

But I don't particularly like this approach. Does anyone have a better idea on this?

Gimpel

GridLayoutManager.SpanSizeLookup. You can return a span of 2 for the first item, and 1 for the rest. – Roborant

@MikeM. Can you give me an example of how I can achieve this? I can't find a setSpanSizeAtPosition() method or something similar. Thanks – Gimpel

Oh, yeah, sorry, I forgot to specify the method. You create a subclass of SpanSizeLookup, and override the getSpanSize(int position) method to return 2; for position == 0, and return 1; for the rest. Then you set an instance of that on the GridLayoutManager. You can do it all anonymously, like is common for an OnClickListener. A quick example: drive.google.com/file/d/1K3HCdetp0M8vT8M55pOO0pr7aMWZHyjJ/…. – Roborant

Answer 1

After some digging and counseling, I came to a pretty nice result. I will post it below:

First, the adapter should look like I mentioned in the question, without the hiding of the second element:

 public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    public static final int TYPE_FIRST_ITEM = 0;
    public static final int TYPE_ITEM = 1;

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        switch (viewType) {
            case TYPE_FIRST_ITEM:
                final View view = inflater.inflate(R.layout.big_item, parent, false);
                return new BigViewHolder(view);
            case TYPE_ITEM:
                final View view2 = inflater.inflate(R.layout.normal_item, parent, false);
                return new NormalViewHolder(view2);
            default:
                return null;
        }
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        switch (holder.getItemViewType()) {
            case TYPE_FIRST_ITEM:
                BigViewHolder bigViewHolder = (BigViewHolder) holder;
                // Do what you need for the first item
                break;
            case TYPE_ITEM:
                NormalViewHolder normalViewHolder = (NormalViewHolder) holder;
                // Do what you for the other items
                break;
        }
    }

    @Override
    public int getItemViewType(int position) {
        if (position == 0) {
            return TYPE_FIRST_ITEM;
        } else return TYPE_ITEM;
    }

    final class NormalViewHolder extends RecyclerView.ViewHolder {
        public NormalViewHolder(View itemView) {
            super(itemView);
        }
        // find your views here
    }

    final class BigViewHolder extends RecyclerView.ViewHolder {
        public BigViewHolder(View itemView) {
            super(itemView);
        }
        // find your views here
    }
}

Second, the layout manager should implement a listener to specify how many spans (rows) should be at a specific position:

RecyclerView mRecyclerView = view.findViewById(R.id.my_recycler_view);
        MyAdapter mAdapter = new MyAdapter();
        GridLayoutManager mLayoutManager = new GridLayoutManager(getActivity(), 2, LinearLayoutManager.HORIZONTAL, false);
        mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                switch(mAdapter.getItemViewType(position)){
                    case MyAdapter.TYPE_FIRST_ITEM:
                        return 2;
                    case MyAdapter.TYPE_ITEM:
                        return 1;
                    default:
                        return -1;
                }
            }
        });
        mRecyclerView.setAdapter(mAdapter);
        mRecyclerView.setLayoutManager(mLayoutManager);

Hope it will help someone else too. Thank you Mike M. for your support.

Gimpel

Can you add the XML? – Alatea