How to set images with different sizes in using grid layout manager to recyclerview?

Question

I want to make categories ui as like below in android. I am using recyclerview with grid layout manager. But I am unable to manage it like this design in android.

You can use [FlexboxLayoutManager with RecyclerView](https://github.com/google/flexbox-layout#flexboxlayoutmanager-within-recyclerview) — AskNilesh, Jun 26 '19 at 12:36
Possible duplicate of [Heterogeneous GridLayout](https://stackoverflow.com/questions/10812552/heterogeneous-gridlayout) — Sanjay Bhalani, Jun 26 '19 at 12:36
Here's full source code https://github.com/cdoger/Android_layout — Sanjay Bhalani, Jun 26 '19 at 12:38

score 0 · Answer 1 · answered Jun 26 '19 at 12:44

0

You can use a StaggeredGridLayout as below.

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(staggeredGridLayoutManager);
CustomAdapter customAdapter = new CustomAdapter(MainActivity.this,images);
recyclerView.setAdapter(customAdapter);

answered Jun 26 '19 at 12:44

Anjana

903
1
5
13

I already tried using StaggeredGridLayoutManager but it either set images in 2 columns or 3. It is not giving exactly as I want. – Prachi rane Jun 26 '19 at 12:57
Finally I have solved the issue and set above ui using the same solution.https://stackoverflow.com/questions/36514887/layoutmanager-for-recyclerview-grid-with-different-cell-width – Prachi rane Jun 28 '19 at 11:08
This is how I have implemented span in adapter class. private static final int TYPE_SMALL_SQUARE = 0; private static final int TYPE_LARGE_SQUARE = 1; private static final int TYPE_LREACT = 2; private static final int TYPE_HREACT =3; – Prachi rane Jun 28 '19 at 11:08

score 0 · Answer 2 · answered Jun 28 '19 at 11:18

I have managed span of images in adapter class like below.
 private static final int TYPE_SMALL_SQUARE = 0;
 private static final int TYPE_LARGE_SQUARE = 1;
 private static final int TYPE_LREACT = 2;
 private static final int TYPE_HREACT = 3;
  @Override
    public int getItemViewType(int position) {
        switch (position) {
            case 0:
                return TYPE_LARGE_SQUARE;
            case 1:
                return TYPE_HREACT;
            case 2:
                return TYPE_LREACT;
            case 3:
                return TYPE_LREACT;
            case 4:
                return TYPE_SMALL_SQUARE;
        }
        return super.getItemViewType(position);
    }

score 0 · Answer 3 · answered Jun 28 '19 at 11:22

Then implement onPreDraw method in on create view.
  @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.category_adapter, parent, false);
        ButterKnife.bind(this, view);
        view.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                final int type = viewType;
                final ViewGroup.LayoutParams lp = view.getLayoutParams();
                final StaggeredGridLayoutManager lm =
 (StaggeredGridLayoutManager) ((RecyclerView) parent).getLayoutManager();
                if (lp instanceof StaggeredGridLayoutManager.LayoutParams) {
                    StaggeredGridLayoutManager.LayoutParams sglp =
                            (StaggeredGridLayoutManager.LayoutParams) lp;
                    switch (type) {
                        case TYPE_LARGE_SQUARE:
                            sglp.width = view.getWidth() ;
                            sglp.height = view.getHeight()/2;
                            break;
                        case TYPE_HREACT:
                            sglp.width = view.getWidth() ;
                            sglp.height = view.getHeight() ;
                            break;
                        case TYPE_LREACT:
                            sglp.width = view.getWidth() ;
                            sglp.height = view.getHeight() / 2;
                            break;
                        case TYPE_SMALL_SQUARE:
                            sglp.width = view.getWidth();
                            sglp.height = view.getHeight()/2;
                            break;
                    }
                    view.setLayoutParams(sglp);
                    lm.invalidateSpanAssignments();
                }
                view.getViewTreeObserver().removeOnPreDrawListener(this);
                return true;
            }
        });
        return new ViewHolder(view);
    }

How to set images with different sizes in using grid layout manager to recyclerview?

3 Answers3