Android Layout Types

If you’re just an Android user, you may not even know that each screen in your application has controls composed within different Layouts. Let’s see what are the main Layout Types in designing Android app.

What is a Layout ?

Layout defines a visual structure of an Activity (or app widget). It may be considered as a set of rules according to which controls (buttons, text fields, input fields etc.) are placed on the View.

Layouts structure

Basically, user interface in Android apps is built using Layouts. Each Layout is a subclass of ViewGroup class, which derives from View class, which is the basic UI building block. View is the base class for buttons, text fields etc., more precisely: for widgets (don’t confuse it with app widgets you place on your Android screen 🙂 ).

The following diagram presents this hierarchy based on RelativeLayout:

Let’s now see what are the most important Layout Types. Below each screenshot used to present a particular Layout Type you can find its source, which leads to a tutorial or more detailed explanation on how to work with it.

Linear Layout

LinearLayout is the most basic type of Layout. When Android app is created in Visual Studio 2017, its MainActivity has by default LinearLayout set:

This type of Layout enforces you to put your controls in a linear direction, either horizontally or vertically:

Relative Layout

RelativeLayout enforces to display elements in relations to each other. You can specify that, for instance, one UI element can be said to be placed on the left of another element, or on the bottom of another etc. Each UI element can also be positioned according to the layout’s borders (e.g. aligned to the right):

RelativeLayout is very powerful. Consider that for building mobile apps’ interfaces these can be run on multiple devices with different screens’ resolutions. RelativeLayout allows (if properly built, of course) to adjust your set of controls easily to almost every type of screen. It’s quite specific and I personally found it difficult to understand and use initially, but it seems to be worth it.

Table Layout

As its name suggests, TableLayout allows to group elements into rows and columns:

May be useful when displaying some statistics or reports.

Grid View

GridView displays items in two-dimensional grid. The list can be easily scrolled. This type of Layout is often used on screens displaying photos or similar sets of “blocks” to click:

Tab Layout

Tabbed layouts allow to introduce tabs in our Android application. Then, a single Activity may contain several tabs and user can easily switch between them. On each tab you can use different type of Layout.

Consider that tabs design has changed between Android 2.X and 4.X:

List View

ListView allows to display a list of items. It may be used in multiple places, from short lists of menu options to long list of emails or news feed. It allows to easily and quickly present a list of items:

I used it in MoneyBack for displaying a very simple list of people from the database. You can check how it’s done in this public Gist (there is even no AXML layout file for it, it’s just an Activity class).

However, Android and Xamarin teams recommend to use RecyclerView for new apps development, which is said to be more advanced and flexible version of ListView. I just noticed it seems to be a bit more complex to set up. You can check more details here.

Summary

We’ve explored some basic Layout Types that can be used for grouping UI elements in Android application. Remember that all types of layouts we’ve gone through may be nested into each other (as we’ve seen for tabs – you can use tabbed layout and then in each tab “nest” any other type of layout).

It may seem to be a bit strict, that we shouldn’t just put the controls whatever we’d like to (as we are used to do in WinForms, for example 😉 ), but mobile development requires such restrictions.

Especially building for Android – as for September 2015, there were 1.5 billion registered devices running Android system. This implies thousands of different screens resolutions, which must be handled by the UI of our apps.

What types of Layouts do you use the most in your Android apps? Do you have any best practices using them ? Share your knowledge! 🙂