Android Gridview with 2 column (But different imageview width size)

Question

I want screen to look like following, with the help of gridview. I am able to add 1 column and two column using setSpanSizeLookup

But how to add two columns with dynamic width?

final GridLayoutManager gridLayoutManager=new GridLayoutManager(ExploreMenuActivity.this,2);
        gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                if(position == 0)
                {
                    return 2;
                }else {
                    return 1;
                }
            }
        });

Update :

I have used Flexbox layout by google .

implementation 'com.google.android:flexbox:0.3.1'

My Main activity

 FlexboxLayoutManager flexboxLayoutManager=new FlexboxLayoutManager(ExploreMenuActivity.this);
        flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);
        flexboxLayoutManager.setAlignItems(AlignItems.STRETCH);
  recycler_ExploreProduct.setLayoutManager(flexboxLayoutManager);

My .xml file

   <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/img"
android:layout_width="@dimen/_140sdp"
android:background="@color/color_white_gray"
android:layout_height="@dimen/_140sdp"
android:scaleType="fitCenter"
android:src="@drawable/p_7" />

and My adapter

 @Override
public void onBindViewHolder(final ViewHolder holder, int position) {


    Drawable drawable = ResourcesCompat.getDrawable(context.getResources(), aryImages[position], null);
    holder.bindTo(drawable, position);
 } 

 class ViewHolder extends RecyclerView.ViewHolder {
    ImageView imageView;

    public ViewHolder(View itemView) {
        super(itemView);
        imageView = (ImageView) itemView.findViewById(R.id.img); 
    }

    void bindTo(Drawable drawable, int position) {
        imageView.setImageDrawable(drawable);
        ViewGroup.LayoutParams lp = imageView.getLayoutParams();

        DisplayMetrics displayMetrics = new DisplayMetrics();
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        wm.getDefaultDisplay().getMetrics(displayMetrics);
        int screenWidth = displayMetrics.widthPixels;

        Log.d(TAG,"## bindTo before if");
        if (lp instanceof FlexboxLayoutManager.LayoutParams) {
            Log.d(TAG,"## bindTo inside if");
            FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) lp;

           if (position == 0) {
                flexboxLp.width = screenWidth / 3;

            } else if (position == 1) {
                flexboxLp.width = screenWidth / 2;

            } else if (position == 2) {
                flexboxLp.width = screenWidth / 2;

            } else if (position == 3) {
                flexboxLp.width = screenWidth / 3;

            } else if (position == 4) {
                flexboxLp.width = screenWidth / 3;

            } else if (position == 5) {
                flexboxLp.width = screenWidth / 2;

            } else if (position == 6) {
                flexboxLp.width = screenWidth;

            } else if (position == 7) {
                flexboxLp.width = screenWidth / 3;

            } else if (position == 8) {
                flexboxLp.width = screenWidth / 2;

            } else if (position == 9) {
                flexboxLp.width = screenWidth;

            } else if (position == 10) {
                flexboxLp.width = screenWidth / 2;

            } else if (position == 11) {
                flexboxLp.width = screenWidth / 3;

            } else if (position == 12) {
                flexboxLp.width = screenWidth;

            } else if (position == 13) {
                flexboxLp.width = screenWidth / 3;

            } else if (position == 14) {
                flexboxLp.width = screenWidth / 2;

            } else if (position == 15) {
                flexboxLp.width = screenWidth / 2;

            } else if (position == 16) {
                flexboxLp.width = screenWidth / 3;

            } else if (position == 17) {
                flexboxLp.width = screenWidth;

            } else if (position == 18) {
                flexboxLp.width = screenWidth / 3;
            } else if (position == 19) {
                flexboxLp.width = screenWidth / 2;
            }
    }
}

Right now I am able to achieve output using above static conditions,

How can I do this things dynamic, when my data will come from API.

Answer 1

use this https://github.com/felipecsl/AsymmetricGridView

http://myhexaville.com/2017/02/27/android-flexboxlayout/

I am sure this will help you.