How to make first image larger in Gridlayout?

Question

To be precise I want to achieve this.

I am using recyclerview with GridLayoutManager. I also have made first item large using the following code

        lLayout.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int i) {
            if (i==0) return 2;
            else return 1;
        }
    });

Everything works fine except one: The item at position 1 (ie next item from large image) is elongated vertically to match the height of large item. From row 3 all images are as shown in the image.

How can I get rid of this ?

Edit: After some analysis

So the problem seems to be that the large image is taking two spans horizontally but single span vertically and since I have forced my ImageView to be square, it looks like it has also taken two rows where as in fact it is a single row. Due to this reason the second image seems elongated.

So now my question is, how to make grid item take two spans vertically and two spans horizontally ?

Answer 1

Try to use StaggeredGridLayoutManager instead of GridLayoutManager. StaggeredGridLayoutManager supports horizontal & vertical layout as well as an ability to layout children in reverse. onBindViewHolder method of adapter you can set span according to position of your item using this code

final ViewGroup.LayoutParams lp = holder.itemView.getLayoutParams();    
if (position == 0) {
                StaggeredGridLayoutManager.LayoutParams sglp = (StaggeredGridLayoutManager.LayoutParams) lp;
                sglp.setFullSpan(true);
                holder.itemView.setLayoutParams(sglp);
            }

find the example http://enoent.fr/blog/2015/01/18/recyclerview-basics/... hope it will help you