Posted on

Android FlexboxLayout


android flexboxlayout

Designed by Freepik

Hi, I just recently learned about Android FlexboxLayout and want to tell more about what it is and possible use cases. It’s a library by Google, has been in development for about a year and currently in 0.3.0 alpha 2 version. Let’s see where we can use it

 

It’s analogue of CSS Flexbox, which I personally never used, for Android. I suspect Google Images use it.

ViewGroup

The first use case is using it as a root layout. It lets you position views in rows like a LinearLayout, but with wrapping to the next row/column. If you have 3 TextView’s with wifth of 200dp and dislpay with width of 430dp – it will put third TextView on the next row.

Sounds great, but I don’t see much use for it yet though, primary because I’ve never used CSS Flexbox and did just fine without it on Android. Usually I know exactly on which line I want that view, and not in a messy responsive way like this

android flexboxlayout
Portrait

 

android flexboxlayout
Landscape

Attributes

We have plenty of attributes for positioning views. So they have a flexWrap attribute with values of wrap, wrap_reverse and nowrap. First one send views to the next line, wrap_reverse will start positioning views from the bottom of the screen and nowrap keeps them on one line by resizing them.

And there’s a flexDirection attribute, with values of row, column and reverse ones for each. Which is like vertical/horizontal orientation for LinearLayout

And let’s see at some child layout attributes. layout_flexGrow is something like layout_weight in a LinearLayout, but with a float value instead of integer

RecyclerView

Yes, it’s definitely handy not having to write different layouts for different display sizes and orientations. But the real value I see in RecyclerView layout manager. In the latest alpha version they added a FlexboxLayoutManager which behaves just like viewgroup, but for RecyclerView.

This is really amazing! Let’s say you have a picture based content. The regular approach would be to use Linear/GridLayout with fixed item width/height and use centerCrop for images. All the images would be of the same size, this looks fine with LinearLayoutManager, but if it’s a rectangular images in a grid, this doesn’t look that great.

You might want to use StaggeredGridLayoutManager, but it still constraints you to some number of columns/rows.  With FlexboxLayoutManager you don’t need to worry about it.

What You Get

Look at the amazing layout from the cat demo app. It’s in the dev_recyclerview branch

android flexboxlayout

The best thing is that almost all the attrubutes default to the behavior you’d want it to have. Besides flexGrow, what we would have by default is this

android flexboxlayout

We have pictures of different size and it lays them out from left to right row by row. And if there’s not room for next one it will put it on a next row. The difference between this picture and first is flex grow which is like weight, if we set it to 1.0, then pictures will take the remaining space which looks cool

Of course this cool effect will be only if you have pictures of different size and you set your ImageView size to wrap_content.

Setup

Add this dependency

Set RecyclerView layout manager to FlexboxLayoutManager. And then we need to add flexGrow attribute for list items. Although it doesn’t work with setting it in the layout, we need to do that in Java. Setting each ImageView’s layout params flexGrow to 1.0

Since we set ImageView size to wrap content, the row height is determined by the first item in a row. And following have the same height. This default behavior is just great. But you can set minimum/maximum height/width if you want.

 

Definitely great layout manager, perfect use case is random image sizes list. Still need to figure all the great pros of it. Check out this repo, it has all the samples and dev_recyclerview branch on it.

Thanks for reading, don’t forget to subscribe, follow me on Twitter, Facebook, G+ and share with friends if you think they will benefit from it!


  • Lia Khan

    Does it work in Android studio 3.0?