RecyclerView items with different heights with FlexboxLayoutManager

Question

How can I display my recycleview items in a row while keeping their original height?

I want to use a recycleviewer with FlexboxLayoutManager. Every item normally having their own height depending on their content. However, every recycleview item on the same row always ending up with an equal height somehow.

How can I display my recycleview items in a row while respecting their original height?

I need the items to be displayed like this:

What I tried without success:

(The small items always stretches)

My code where I set the layout manager:

        adapter = new ProductAdapter(getContext(), productsList);

        layoutManager.setFlexWrap(FlexWrap.WRAP);
        layoutManager.setFlexDirection(FlexDirection.ROW);
       // layoutManager.setAlignContent(AlignContent.CENTER);

        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(adapter);

I have tried this layoutManager.setAlignContent(AlignContent.CENTER); However you can't set alignContent in a FlexboxLayoutManager for a recycleviewer. The app crash because alignContent is for FlexboxLayout (not manager).

EDITED: When using a StaggeredGridLayoutManager , this will solve the problem. However you will lose the responsive behaviour of the FlexboxLayoutManager.

I created my own responsive behaviour for a StaggeredGridLayoutManager:

 DisplayMetrics displayMetrics = getActivity().getResources().getDisplayMetrics();
        float dpWidth = displayMetrics.widthPixels / displayMetrics.density;
        int spanCount = (int) (dpWidth / 222);  // 222=total space for 1 item incl. margin

            recyclerView.setLayoutManager(new StaggeredGridLayoutManager(spanCount, StaggeredGridLayoutManager.VERTICAL));

Refer this [Link](https://inducesmile.com/android/android-staggeredgridlayoutmanager-example-tutorial/) will help you to archive design what you want — Arbaz.in, Sep 21 '18 at 04:50

score 4 · Accepted Answer · answered Sep 21 '18 at 06:38

4

Try something like this as your RecyclerView layout manager:

recycler.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));

answered Sep 21 '18 at 06:38

Nil Oleart

324
3
14

score 0 · Answer 2 · answered Sep 21 '18 at 00:18

0

From your image I think what you need is StaggeredGridLayoutManager

answered Sep 21 '18 at 00:18

Sdghasemi

5,370
1
34
42

RecyclerView items with different heights with FlexboxLayoutManager

2 Answers2