0

I would like to create a grid layout in which each item is taking as much space as possible (minus padding), but only as long as there are columns available (after that the next item would be inserted in the next row while keeping the size). Additionally, each item must be a square and is added dynamically.

Example layout with 10 items would be as follows:

enter image description here

I have tried to achieve this by setting weights, ratio constraints, overriding onMeasure - but I just can't get it to work. I would be happy with either a programmatic or an XML-based solution (as long as each item can be added programmatically). I would prefer the solution to be in Kotlin, but I would be happy with a Java-based one as well.

It's probably worth saying that each item in the grid layout is a layout (RelativeLayout as of now) to make inflating it and setting a layered background drawable programmatically easy.

Kacperito
  • 1,277
  • 1
  • 10
  • 27

2 Answers2

0

I think you might be able achieve what you want with a different Layout

Have a look at https://github.com/google/flexbox-layout it has lots of methods to control how the cells grown or shrink and includes automatic or manual wrapping of cells.

Andrew
  • 8,198
  • 2
  • 15
  • 35
  • Hey! I can't quite achieve what I wanted with the flexbox layout manager (I've used a recycler view). I can't quite get the spaces between the items, and the items are not scaled to fit available space (if I just use `justifyContent` and set it to `space_around`, the last row with 2 items gets aligned differently). – Kacperito Apr 06 '20 at 09:16
  • What I would like is to either have exactly N items per row (and scale them up to fit available space while respecting margins) or a variable number of items per row (e.g. 4 on phone, 6 on a tablet) but still scaled up to fit all leftover space, rather than leave blank on the end if another item doesn't fit. – Kacperito Apr 06 '20 at 09:27
0

Take a look at RecyclerView. You would need to pass GridLayoutManager. This tutorial may or may not help you. For square items, I suggest using CardView but it's not necessary. If you are targeting tablets as well as smartphones, check this out. And for dynamically adding new items, you should notify recyclerView's adapter. See this link. You can also extend RecyclerView or GridLayoutManager for more control over items.

Paradoxy
  • 131
  • 2
  • 6
  • Hi, I am using a recycler view already, but I can't get the items to display correctly as squares, and take as much space as available without hardcoding their size. Initially, I was planning to restrict the number of columns to for example 4, but I would be happy with a solution of having a variable number, as long as each view is scaled to avoid leaving any blank space (excluding margins). Would you be able to provide some further guidance than just the links? – Kacperito Apr 06 '20 at 10:20
  • @KacperFloriański, For what you want to do, there are two ways. 1) harcoding number of columns, having variable size for items or 2) hardcoding size of items, having variable number of columns. There is no other way IMO. Both of them have similar solution. Use DisplayMetrics to find out how much space you have to begin with (that's it, measure system width), then by considering margin, if you are going with (1) just divide available space by number of columns to find width and height of each item and set it with layoutParams of that view. So items will be scaled up or down to fill space. – Paradoxy Apr 06 '20 at 23:37
  • @KacperFloriański If you are going with (2), divide available space by width of an item to find number of columns and pass it to GridLayoutManager. My third link (after CardView) has some useful information, it's from SO after all. – Paradoxy Apr 06 '20 at 23:38