2

I am trying to use FlexboxLayoutManager to layout square shape items. However the last row has only two items so that they centre align. That makes things look super bad. My code is below. Is there a way to fix this?

FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(activity);
layoutManager.setFlexDirection(FlexDirection.ROW);
layoutManager.setJustifyContent(JustifyContent.SPACE_BETWEEN);

enter image description here

Patola
  • 515
  • 8
  • 30
  • 1
    Try removing `setJustifyContent` . It should work that's the default arrangement of FlexBox. – ADM Feb 23 '21 at 04:30
  • thanks but that's FLEX_START. Which leaves a large empty space at the right end of the view. I want to evenly space items yet the last row aligned as same as the rows above. any workarounds ? – Patola Feb 23 '21 at 06:06
  • The image u have attached is Grid Alignment . Why r u using `FlexBox` ? u can use `GridLayoutManager` for it . – ADM Feb 23 '21 at 06:39
  • thats what I used, but how do I set the number of columns? FlexBox computes the columns dynamically, right? – Patola Feb 23 '21 at 06:40
  • You could set the span count (https://developer.android.com/reference/androidx/recyclerview/widget/GridLayoutManager#setSpanCount(int)) dynamically based on the screen width by doing the calculation. Here you can find a solution to this problem: https://stackoverflow.com/questions/26666143/recyclerview-gridlayoutmanager-how-to-auto-detect-span-count . – Stoyan Milev Feb 23 '21 at 10:06
  • 1
    Can not think of Solution with Flex Box . One hack is you can add dummy items to make it a full row and use a transparent View ad dummy item . – ADM Feb 24 '21 at 04:57
  • 1
    @Patola Did you manage to find a solution? – Zeus Almighty Feb 21 '22 at 07:42

3 Answers3

0

This is dirty, but works. Place the FlexLayout inside a FramLayout, Just don't forget to set the layout parameters to WRAP_CONTENT with center gravity over horizontal axis.

flexbox=new FlexboxLayout(context);
flexbox.setFlexDirection(FlexDirection.ROW);
flexbox.setFlexWrap(FlexWrap.WRAP);
flexbox.setJustifyContent(JustifyContent.FLEX_START);

FrameLayout container=new FrameLayout(context);
LayoutParams lp=new LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
lp.gravity= Gravity.CENTER_HORIZONTAL;
container.addView(flexbox,lp);
ucMedia
  • 4,105
  • 4
  • 38
  • 46
0

The correct way to approach this is setting justifyContent to SPACE_BETWEEN. This will fit as many items in one line, leaving empty spaces of equal width between (thus centering items). The "stranglers" on the last line will be left aligned.

Kotlin

val layoutManager = FlexboxLayoutManager(context).apply {
    justifyContent = JustifyContent.SPACE_BETWEEN
}

Java

FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(context);
layoutManager.setJustifyContent(JustifyContent.SPACE_BETWEEN);

You might have to adjust your left and right padding of the recyclerView as the most-left and most-right spaces won't be calculated (the first and last view will touch the borders of parent)

Kuba
  • 1
  • 1
0

I managed to do it by setting two things:

  1. In code:
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(this);
layoutManager.setJustifyContent(JustifyContent.FLEX_START);
  1. In layout changed hierarchy to this:
- ConstraintLayout
-- RecyclerView (width is "wrap_content", edges constrained to sides)

So the list itself is centered, but the list items are aligned to lists left side.

Starwave
  • 2,352
  • 2
  • 23
  • 30