How to make the first image larger in Gridlayout?

Question

To be precise, I want to achieve this.

I am using recyclerview with GridLayoutManager. I also made the first element big 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 for one: the element at position 1 (i.e. the next element from the large image) is stretched vertically to fit the height of the large element. From line 3, all images are shown in the image.

How can I get rid of this?

Edit: after some analysis

So the problem is that the large image spans two spans horizontally but one span vertically, and since I made my ImageView be square, it looks like it also took two rows, where in fact it is one row. For this reason, the second image seems elongated.

So, now my question is: how to make a grid element two vertical and two spans horizontally?

Answer 1

Try using StaggeredGridLayoutManager instead of GridLayoutManager . StaggeredGridLayoutManager supports horizontal and vertical layout, as well as the ability to layout children in the reverse order. onBindViewHolder for the adapter, you can set the range according to the position of your element 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 an example http://enoent.fr/blog/2015/01/18/recyclerview-basics/ ... hope this helps you

Answer 2

Try the following code in the 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; } }