Working with layouts in Android

For every Android activity that has an UI connected to it, there must be provided a layout.

Layouts in Android are used to define the visual structure of the User Interface, as well as what kinds of widgets (Buttons, TextViews etc) the layout should contain.
In this article we’ll be focusing on the actual layout, not the widget.

As a developer, there are two ways you can define a layout in Android.

  • Through XML layout files
  • Programmatically, in the actual Java code of the activity.

Usually you’ll want to separate the logic from the layout, so the general best approach is to use XML files.

Now, let’s go through the most common layouts in Android, and provide examples for every one of them.
Our example layouts will contain a TextView and a Button.

Note that all layouts in android reside in the res/layout folder!

LinearLayout

The simplest form of layout in Android is in my opinion the LinearLayout.
When using a LinearLayout, the layout elements (widgets) are laid out in a linear fashion.

A LinearLayout can be either horizontal or vertical.

We’ll start off with the horizontal layout, ie. the widgets will be laid out horizontally.

Horizontal Linear Layout in Android

Next is the vertical layout, ie. the widgets are laid out vertically.

Table Layout in Android

Relative Layout

With a Relative Layout in Android, all the widgets are placed relative to each other, or relative to the root view (the RelativeLayout).
When positioning an element relative to another element, the elements must be provided with an id.
Common attributes for the Relative Layout are:

If you're serious about Android development, I highly recommend the Google-certified Android App Development Certification Course

Use the coupon code LIMITED25 to get 25% off 😉
  • layout_above: Provide the id you want this element to be laid out above.
  • layout_below: Provide the id you want this element to be laid out below.
  • layout_toEndOf: Layout this element to the end of the provided id.
  • layout_toStartOf: Layout this element to the start of the provided id.
  • layout_alignParentTop: Align this element at the top of the parent view.
  • layout_alignParentBottom: Align this element at the bottom of the parent view.
  • layout_alignParentEnd: Align this element at the end of the parent view (right side on most screens).
  • layout_alignParentStart: Align this element at the start of the parent view (left side on most screens).

An example of a RelativeLayout can be seen below!

Relative Layout in Android

Table Layout

The Table Layout works by grouping the layout elements (widgets) into rows and columns, and can be a great choice if you want a slick and symmetric layout.

Vertical Linear Layout in Android

Absolute Layout

An Absolute Layout enables you to define the absolute position of the widgets in the layout element.
You define the positions of the widgets using the screens x and y coordinates. 

This layout is probably not a layout you’ll be using much. The absolute positioning makes the layout harder to maintain, and it can be unpredictable, since the screen size of model devices varies!

Absolute Layout in Android

Note: This is a horrible layout, do not use it!

Frame Layout

Frame Layout is designed to block out an area on the screen to display a single item.
Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that’s scalable to different screen sizes without the children overlapping each other.

A fine example of the FrameLayout is if you have an abstract BaseActivity. In the BaseActivity layout file, you can define a single FrameLayout.
For every subactivity of BaseActivity, you simply inflate the activity’s layout into the BaseActivity’s FrameLayout!

If this didn’t make much sense to you, don’t worry too much about it. Just remember that FrameLayouts are used to hold a single child view.

Good luck with your Android development!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *