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 ?

Melvinmelvina

Have you found solution for this? – Kandykane

StaggeredGridLayoutManager is the closest I have found. – Melvinmelvina

Hi @rockfight, I am still looking for a proper solution. Did you find anything you can share? I would be very grateful – Benighted

Hi @MehdiSatei , this was a very old thread and I have almost completely forgot what I did on this. The project is also retired. Also I have shifted completely to React Native for mobile development. So I am unable to help. – Melvinmelvina

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

Cote

The link is very useful for understanding RecyclerView.. Thank you – Kristoferkristoffer

Well first of all GridLayoutManager also supports horizontal & vertical layout as well as ability to layout children in reverse. Your code will make the view span whole width due to setFullSpan(true). What I want is make first image span double the size of other items, i.e two span vertically and two horizontally. I also recommend the link to understand the recyclerview, its very helpful. – Melvinmelvina

@Melvinmelvina It is quite helpful to share with other developers, if you found the right way – Arcturus

Answer 2

Try following code in GridViewAdapter class

public class GridViewAdapter extends BaseAdapter {
private Context context;
private ArrayList<Integer> imageArrayList = new ArrayList<>();
private int type;

public GridViewAdapter(Context context, ArrayList<Integer> imageArrayList) {
    this.context = context;
    this.imageArrayList = imageArrayList;
}

@Override
public int getCount() {
    return imageArrayList.size();
}

@Override
public Object getItem(int position) {
    return imageArrayList.get(position);
}

@Override
public long getItemId(int position) {
    return 0;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder viewHolder = new ViewHolder();
    if(convertView==null){
        LayoutInflater inflater = LayoutInflater.from(context);
        type = getItemViewType(position);
        if(type==0) {
            convertView = inflater.inflate(R.layout.big_layout,parent,false);
        }else {
            convertView = inflater.inflate(R.layout.small_layout, parent, false);
        }
        viewHolder.imageView = convertView.findViewById(R.id.imageView);
        convertView.setTag(viewHolder);
    }else{
        viewHolder = (ViewHolder) convertView.getTag();
    }
        viewHolder.imageView.setImageDrawable(context.getResources().getDrawable(imageArrayList.get(position)));
    return convertView;
}

@Override
public int getViewTypeCount() {
    return super.getViewTypeCount();
}

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

    private class ViewHolder{
        ImageView imageView;
    }
}

Heathheathberry

I don't think this will work since I am using RecyclerView and GridLayoutManager instead of GridView. – Melvinmelvina