A Div-like Android layout using FlexboxLayout

As part of the ride experience in Gett’s rider app, one of the most crucial aspects is our communication with the customer, but even more specifically, their satisfaction with the riding experience. We constantly strive to find new ways to let our riders know their opinion makes an impact and that we’re highly interested to know when their ride wasn’t entirely satisfactory.

With that in mind, our project managers asked us to build a new rating system for our post-ride experience. They came up with something similar to the following design:

The UI definition was that the layout should be elastic, meaning:

1. Elements on the same line should be horizontally centered.
2. If there isn’t enough room for a new element in a line, it should go down to a new line.

As we started our initial thought process on how to build this, we were quite positive there is no built-in Layout or View in Android to provide this behavior, and already started imagining the horrors of manually implementing it with our own measurement and calculation mechanisms.

Our engineers were a bit worried about manually implementing this layout

We started thinking and realized that this layout behaves much like a well-known HTML element called div, and even more specifically — CSS’s Flexbox.

To our surprise, during our research we came across FlexboxLayout.

In essence, FlexboxLayout is a lesser-known layout, provided by Google which gives you the capabilities of Flexbox, out of the… well, box! - right in your Android environment.

Excellent, this should make this a relatively painless implementation process. Let’s get started!

Start by creating a new Android project. Set your activity name to MainActivity and your main layout to activity_main.

Add the following line to your gradle file:

implementation 'com.google.android:flexbox:1.1.0'

First, you‘ll create the inner items. They will be single-line TextViews with a fancy border, that expand to fit their content.

Start by creating some fancy drawable shape. You’ll use it in a bit as the background for your items.

Create a new drawable file called item_background.xml in res ➤ drawable, with the following code:

Next, create a new layout file called item.xml in res ➤ layout, with the following code:

You simply create a TextView centered to its parent which uses the background you previously created.

This should provide you with the following element:

Flexbox’s Flexibility

Flexbox offers two ways of usage:

1. As a layout.
2. As a layout manager for a RecyclerView.

You’ll be using the second option to achieve the Div-like behavior this UI requires. You’ll basically push an arbitrary amount of items into this layout, and it will arrange them for you in a flowing Div-like manner.

You’ll need to add a RecyclerView to your main layout, as well as a Button for adding randomly-sized items.

With that done, copy the following into your activity_main.xml file:

You will need a simple Adapter for your RecyclerView. you can use the one below, to save some time:

This adapter will take a list of Strings and inflate them into the items you just created.

Flexbox in a nutshell

Before finalizing this UI, let’s take a moment to learn a bit more about what Flexbox has to offer.

Flexbox can arrange your content as rows or as columns. This attribute is called FlexDirection in Flexbox terminology.

Another attribute you’ll commonly use is JustifyContent, which basically answers the question — “how should your content be arranged on the chosen direction?”. Will it begin by adding items from the start, one by one? Maybe from the end? Or, you might want them to be centered on each row, or column, for that matter?

I encourage you to experiment with the possible values of JustifyContent, to really understand the vast possibilities :-).

This UI implementation will demonstrate using ROW as the FlexDirection value, and CENTER for JustifyContent. Configuring FlexboxLayout looks like this (no need to copy this code):

Configuring your RecyclerView with a FlexboxLayoutManager

And that’s it! You now have your own Div-like layout :)

Back to the main course, copy the following to your MainActivity:

Run your app. Your layout should look much like the following:

Feel free to tap the bottom button to add additional random items to your list and see how the layout scales its arrangement to the amount of items.

If you’re curious, try to also play with the JustifyContent attribute to see what kind of different visual results you can achieve with it.

That’s it for today! I hoped you’ve enjoyed this quick recap for building a div-like UI layout for your Android app, and that you learned a few new things about FlexboxLayout. If you have any questions, feel free to leave a comment below or reach out to me on twitter @maozgal! 🎉

The source code for this post is available on Github.