Last Updated:

Android Layouts: A Review of RelativeLayout and LinearLayout

In this article, we'll break into the theory and look at the basic blocks for building a user interface: look at the different XML layouts (layouts) in Android, thoroughly understand and .RelativeLayoutLinearLayout

 

This article is a good cheat sheet for working with Android Layouts, namely with layout and .RelativeLayoutLinearLayout

Overview of XML Layouts (Android Layouts)

In Android, the basic building block of the user interface is the object, which by default it occupies a rectangular area on the screen. This object is an instance of the eponymous class and the base class for all UI components, for example: TextView, Button, EditText, and others.ViewViewи

There is also a class , which is a subclass of . One or more can be grouped into . This class provides the layout, view, and sequence of the . Examples are , , which we will talk about today.ViewGroupViewViewViewGroupViewViewGroupLinearLayoutRelativeLayout

Basic layouts in Android:

  • RelativeLayout is , which defines the position of the children relative to each other.ViewGroupView
  • LinearLayout is , which determines the location of all child elements: vertically or horizontally.ViewGroup
  • AbsoluteLayout allows you to specify the exact position of the children.View
  • TableLayout Treats child elements as rows and columns.
  • GridView is a variety of , in which elements are represented in a two-dimensional scrolling grid. Items in fall from the designated instance.ViewGroupGridViewListAdapter
  • FrameLayout fills the screen to display a single .View
  • ListView is a set that can be scrolled (scrolled).View
  • Scrollview is a variation that allows you to view UI elements even if they are not visible on the first screen. This happens by scrolling (the user scrolls the screen for full visibility of the content). can contain only one child view and the same layout.FrameLayoutScrollviewViewViewGroup

Android Layouts: Layout/Layout XML Attributes

  • android:id is an identifier that uniquely identifies an element View
  • android:layout_width is the width of the layout
  • android:layout_height is the height of the layout
  • android:layout_margin is the additional space outside the element .View
  • android:layout_padding specifies additional space within the element .View
  • android:layout_gravity specifies the location of the child .View
  • android:layout_weight defines additional space for .View
  • android:layout_x determines the coordinates of the layout along the Ox axis
  • android:layout_y determines the coordinates of the layout along the Oy axis

The attribute specifies that it should take up exactly as much space in width as its contents.android:layout_width="wrap_content"View

The attribute specifies that it should take up exactly as much space in width as its parent element.android:layout_width="match_parent"View

 

In this tutorial we will look at the two most popular in the development for Android layout:

  • LinearLayout
  • RelativeLayout

LinearLayout layout in Android

  • A layout in Android groups elements into a single line. In the layout markup, specify the attribute that determines the type of placement: vertically or horizontally. The default value is horizontal.LinearLayoutandroid:orientation
  • A value of "vertical" means only one child element per row, and "horizontal" means one solid row of elements on the screen.LinearLayout
  • The attribute indicates the importance of the element. An element with more weight takes up more space on the screen.android:layout_weight

RelativeLayout layout in Android

A layout defines the position of the children relative to each other. Child elements in define their position by using special attributes: , , , . For example, we explicitly specify that one element must be (to the left of) another element.RelativeLayoutViewRelativeLayouttoLeftOftoRightOfbelowaboveViewtoLeftOfView

We can also position in relation to our parent element, for example, – the element must be aligned horizontally and be centered. If none of the attributes for positioning are specified, the default will be defined in the upper-left corner of the parent element.ViewRelativeLayoutlayout_centerHorizontalView

 

The following are the main layout attributes for three different positioning categories:RelativeLayout

Relative to the parent element

  • android:layout_alignParentBottom - at the bottom of the parent element (parent/parent container)
  • android:layout_alignParentLeft sets the element on the left side of the parent element
  • android:layout_alignParentRight sets the element on the right side of the parent element
  • android:layout_alignParentTop sets the element at the top of the parent
  • android:layout_centerHorizontal centers the element horizontally inside the parent container
  • android:layout_centerInParent centers the element horizontally and vertically inside the parent container (in the center of the screen)
  • android:layout_centerVertical centers the element vertically within the parent container

In relation to neighboring elements

  • The attribute sets the element above the specified elementandroid:layout_above
  • The attribute specifies an element below the specified elementandroid:layout_below
  • The attribute sets the element to the left of the specified elementandroid:layout_toLeftOf
  • The attribute sets the element to the right of the specified elementandroid:layout_toRightOf

It should be noted that an element is set relative to another element by its id. This is done using the "" construct, for example:@id/unique Item ID

As you can see, in the layout there is a Button widget with a widget below which is a widget. This is done using the .id="@+id/superButton"TextViewandroid:layout_below="@id/superButton"

Align with other elements

  • android:layout_alignBaseline aligns the baseline of an element with the baseline of the specified element
  • android:layout_alignBottom aligns the bottom of an element with the bottom of the specified element
  • android:layout_alignLeft aligns the left edge of an element with the left edge of the specified element
  • android:layout_alignRight aligns the right edge of an element with the right edge of the specified element
  • android:layout_alignTop aligns the top of the element with the top of the specified element

That's all the important attributes and elements for building a user interface in Android using layouts and .RelativeLayoutLinearLayout