Empowering your Android Layouts

A basic overview of Android layouts: What are they and when to use them.

So what is a layout? A layout in Android is a grouping of views. A view is a particular rectangular surface of the screen: an UI component. The challenge for starters is often to know at what moment you’ll have to use a particular layout: is it a Linear Layout that should go here, a Frame Layout, a Relative Layout, or a Coordinator Layout?

Why is this important?

First, your code will be more elegant, not only for you but also for your code reviewer. You’ll also be able to implement the front end of your app a lot faster if you know what you are doing. Think about trying to eat sushi with chopsticks, and what a difference it makes to actually know how to use the chopsticks.

Once you are done with the post, track how much you spend actually eating sushi. 🍣Back to focus now 👇🏾

Another important reason is efficiency: your app will render much faster if you are using the least amount of nested layouts possible.

Before talking about the differences between the main Android layouts, let’s talk about some properties that layouts have in common.

Attributes

All layouts have attributes, global properties of the layout affecting any child of the layout. They start with layout_ and are instructions for the parent, not the child.

Width and Height

Width and height are good examples. They can have different values, for example:

• MATCH_PARENT (formerly FILL_PARENT) : value used when we want the view to be as big as the parent view.
• WRAP_CONTENT: value used when we want the view to be as large as its content + the padding assigned to the content.

Padding vs Margin

• The padding property sets some space between the content of the view and the border of the view.
• The margin property sets some space between the border of the view and the view’s parent.

Gravity vs Layout Gravity

• The gravity property sets the relative position (center, bottom, left, etc) of the content inside its own view.
• The layout gravity property of the view sets the relative position of the view inside its parent.

Let’s have a look now at what differentiates the main layouts.

Linear Layout

The main purpose of a Linear Layout is to vertically or horizontally laying out its child views in rows or columns. An interesting property is layout_weight : if its value is 0.8 for example and you are using width and height “wrap_content”, it will wrap the content around 80% of the page. Another interesting fact is that the Linear Layout will create a scrollbar if the UI within the layout is larger than the length of the screen. Since the goal of linear layout is to layout rows or columns, it should NOT be used in the case where the layout has only one child. You should use Frame Layout in that case.

Don’t use a Linear Layouts if your layout contains only one child. Use a Frame Layout instead.

Frame Layout

A Frame Layout is mainly used to layout the child views as a stack, one on the top of another. It is also used in the case where a layout needs to hold a single child view. The only form of control that the Frame Layout has is the layout_gravity, if you want to center elements or have them on the edges of the layout. Another interesting fact is that the view implemented at the bottom of your file is the one that sits on the top of the UI stack.

Frame Layout: when views are sitting on top of each other (like the pancakes you bought — and oh yeah, you can track how much you spend on those too).

Relative Layout

A Relative Layout has the same advantages as the Frame Layout, except that now you can control the relative position of the child views with respect to the other child views (its siblings). For example, you can place a “view A” layout_below another “view B” (providing the ID of “view A” as a value). You can also place your view in positions relative to the parent.

Coordinator Layout

A Coordinator Layout is a subset of Frame Layout. See it more as a super-powered Frame Layout. Its main asset is a property that provides more control over its views: a behavior. A Coordinator Layout will have its views respond to scrolling or other UI changes for example. You should use Coordinator Layouts for views that require custom behaviors.

There are a few other Android layouts — Grid Layout, Table Layout, Percent Frame Layout, or Absolute Layout — but the ones covered in this post are the most widely used.

PS: We weren’t joking about your sushi & pancakes expense. Try Empower!

Liked this post? Please clap and follow, it helps this knowledge spread and you’ll get to see more of this content in your feed!