Android Grid Layout

Question which android developers ask them-self every day — which layout to use?

It has been a while since GridLayout released — New Layout Widgets: Space and GridLayout.

Current situation in android development world regarding GridLayout is following:

• Most of android developers don’t even know such layout exist.
• Some android developers know about GridLayout but for some reason do not use this layout.
• Only few android developers spent time to play with GridLayout and are actively using it.

The reason I wrote this article, is because I think this layout has been unfairly forgotten.

Why do we need Grid Layout?

GridLayout gives you possibility to create grid based layouts with a single root view.

I can use nested LinearLayout to create grid!

Yes, but you can have performance problems in hierarchies that are too deep.

I can use RelativeLayout to create grid!

Yes, but RelativeLayout has some limitations, like:

• inability to control alignment along both axes simultaneously.
• widgets can get off the screen / overlap when they take more space than you expected because you can’t use weigh, etc.

In other words RelativeLayout — is not flexible and responsive enough.

Sample

Let’s implement a simple layout which consist of one big image, two small icons and text next to those icons.

Preview

RelativeLayout

It’s pretty easy to implement this layout via RelativeLayout. Key attributes here are layout_below, layout_toRightOf and layout_alignTop.

Code

At first glance everything seems to be perfect, until you start testing your layout with different text sizes.

Issue 1 inability to control alignment along both axes simultaneously.

Single line text should be vertically centered with icons, unfortunately RelativeLayout doesn’t offer such possibility.

Preview

Issue 2 widgets overlapping

Multi-line text cause overlapping, since text is aligned to icon via layout_alignTop attribute.

Preview

GridLayout

As you can see on image below GridLayout produces much better results:

• text is vertically aligned to icon.
• multi-line text push widgets down.

Preview

So how to achieve such results? First define GridLayout as a root layout. Next count how many columns do you have and define android:columnCount attribute, in this example we have 2 columns.

When you define views inside GridLayout they are placed one after another, so it’s not necessary to explicitly define view row and column.

If you want to stretch view for 2 or more rows / columns you can use layout_columnSpan / layout_rowSpan attribute.

And the most important thing to remember — if you want your view to use all available space, don’t set width of your view to match_parent, set it to 0dp along with layout_gravity=”fill” attribute.

Code

Conclusions

GridLayout can be a powerful tool in the right hands. It provides great flexibility and performance. On the other hand it requires some time learn how it works, you usually need more time to develop and maintain such layout.

Pros:

• flexibility
• single root layout

Cons:

• learning curve
• maintenance