CODEWITHSUNDEEP
androidandroid-recyclerviewgridlayoutmanager
rockfight
rockfight

Reputation: 1996

How to make first image larger in Gridlayout?

To be precise I want to achieve this. enter image description here

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 ?

Upvotes: 9

Views: 2215

Answers (2)

Saurav Ghimire
Saurav Ghimire

Reputation: 568

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;
    }
}

Upvotes: 0

Amandeep Rohila
Amandeep Rohila

Reputation: 3588

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

Upvotes: 7

Related Questions