How to make Listview or Gridview with different Item size?

Question

I want to GridView or ListView which has first row's one Item's width is big and second item's width is small but hight is same. after that for second row one Item's width is small and second item's width is big. and this patter continue to end of list.

Exactly like give bellow:

Answer 1

I fail to search library for listing but I make logic according to layout and solved listing issue. Here I want to share my code using I got my requirement for listing according to given question. I make layout with two linear layout in each two images given by weight according to given listing.Now I put logic odd and even. In odd first LinearLayout is visible and in even Second LinearLayout is visible.

below is layout which I made for list row.

<LinearLayout
    android:id="@+id/lvFirst"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:layout_margin="3dp">

    <ImageView
        android:id="@+id/imgOne"
        android:scaleType="centerCrop"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:layout_weight="2.0"
        android:padding="3dp"/>

    <ImageView
        android:id="@+id/imgTwo"
        android:scaleType="centerCrop"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:padding="3dp"/>
</LinearLayout>

<LinearLayout
    android:id="@+id/lvSecond"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:layout_margin="3dp">

    <ImageView
        android:id="@+id/imgThree"
        android:scaleType="centerCrop"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:padding="3dp"/>

    <ImageView
        android:id="@+id/imgFour"
        android:scaleType="centerCrop"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:layout_weight="2.0"
        android:padding="3dp"/>
</LinearLayout>

Adapter code for list view is given bellow:

public class ImageAdapterNew extends BaseAdapter {
private Context mContext;
private int[] mThumbIds;
boolean mIsPro;
ArrayList<HashMap<String, Integer>> imgList = new ArrayList<>();
public ImageAdapterNew(Context c, int numPics,
String imgName, boolean isPro) {
    mContext = c;
    mThumbIds = new int[numPics];
    int count = 0;
    HashMap<String, Integer> map = new HashMap<>();
    for (int i = 0; i < numPics; i++) {
        mThumbIds[i] = c.getResources().getIdentifier("small_" +
        imgName + "_" + i, "drawable", c.getPackageName());
        if (count >= 2) {
            count = 0;
            imgList.add(map);
            map = new HashMap<>();
            map.put(count + "", mThumbIds[i]);
        } else {
            map.put(count + "", mThumbIds[i]);
        }
        count++;
    }
    mIsPro = isPro;
}
public int getCount() {
    return imgList.size();
}
public Object getItem(int position) {
    return imgList.get(position);
}
public long getItemId(int position) {
    return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
    View row = convertView;
    ViewHolder holder = null;
    if (row == null) {
        LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        row = inflater.inflate(R.layout.image_grid_new, parent, false);
        holder = new ViewHolder();
        holder.lvFirst = (LinearLayout) row.findViewById(R.id.lvFirst);
        holder.lvSecond = (LinearLayout) row.findViewById(R.id.lvSecond);
        holder.imgOne = (ImageView) row.findViewById(R.id.imgOne);
        holder.imgTwo = (ImageView) row.findViewById(R.id.imgTwo);
        holder.imgThree = (ImageView) row.findViewById(R.id.imgThree);
        holder.imgFour = (ImageView) row.findViewById(R.id.imgFour);
        row.setTag(holder);
    } else {
        holder = (ViewHolder) row.getTag();
    }
    if (position % 2 == 0) {
        holder.lvFirst.setVisibility(View.VISIBLE);
        holder.lvSecond.setVisibility(View.GONE);

        if (mThumbIds[position] != 0) {
        Picasso.with(mContext).load(imgList.get(position).get("0")).noFade().resize(300, 533).centerInside().into(holder.imgOne);                Picasso.with(mContext).load(imgList.get(position).get("1")).noFade().resize(300, 533).centerInside().into(holder.imgTwo);
            //If you don't want to use Picasso comment previous line and uncomment next line
            //imageView.setImageResource(mThumbIds[position]);
        }
    } else {
        holder.lvFirst.setVisibility(View.GONE);
        holder.lvSecond.setVisibility(View.VISIBLE);
        if (mThumbIds[position] != 0) {
          Picasso.with(mContext).load(imgList.get(position).get("0")).noFade().resize(300, 533).centerInside().into(holder.imgThree);                Picasso.with(mContext).load(imgList.get(position).get("1")).noFade().resize(300, 533).centerInside().into(holder.imgFour);
            //If you don't want to use Picasso comment previous line and uncomment next line
            //imageView.setImageResource(mThumbIds[position]);
        }
    }
    return row;
}
static class ViewHolder {
    ImageView imgOne, imgTwo, imgThree, imgFour;
    LinearLayout lvFirst, lvSecond;
}
}

Any suggesation or comment most wellcome to improve code.

Answer 2

If your choice is not limited to listview and gridview let try this StaggeredGrid

You can also use recyclerView also if you prefer, it include some logic.