In this tutorial, we will provide an overview of android layout. We will also explore some of the specific layout controls available for organising the screen content namely – Android LinearLayout and Android RelativeLayout.

Android Layout

The basic building block for user interface is a View object that is created from the View class and occupies a rectangular area on the screen. Views are the base class for UI components like TextView, Button, EditText etc.

The ViewGroup is a subclass of View. One or more Views can be grouped together into a ViewGroup. A ViewGroup provides the android layout in which we can order the appearance and sequence of views. Examples of ViewGroup are LinearLayout, FrameLayout, RelativeLayout etc.

Android Layout Types

Android provides the following ViewGroups or layouts:

  1. LinearLayout : is a ViewGroup that aligns all children in a single direction, vertically or horizontally
  2. RelativeLayout : is a ViewGroup that displays child views in relative positions
  3. AbsoluteLayout : allows us to specify the exact location of the child views and widgets
  4. TableLayout : is a view that groups its child views into rows and columns
  5. FrameLayout : is a placeholder on screen that is used to display a single view
  6. ScrollView : is a special type of FrameLayout in that it allows users to scroll through a list of views that occupy more space than the physical display. The ScrollView can contain only one child view or ViewGroup, which normally is a LinearLayout
  7. ListView : is a view group that displays a list of scrollable item
  8. GridView : is a ViewGroup that displays items in two-dimensional scrolling grid. The items in the grid come from the ListAdapter associated with this view

In this tutorial we’ll focus on the two most used android layout:

  1. LinearLayout
  2. RelativeLayout

Android Layout Attributes

  1. android:id : This is the ID which uniquely identifies the view
  2. android:layout_width : This is the width of the layout
  3. android:layout_height : This is the height of the layout
  4. android:layout_margin : This is the extra space outside of the view. For example if you give android:marginLeft=20dp, then the view will be arranged after 20dp from left
  5. android:layout_padding : This is similar to android:layout_margin except that it specifies the extra space inside the view
  6. android:layout_gravity : This specifies how child Views are positioned
  7. android:layout_weight : This specifies how much of the extra space in the layout should be allocated to the view
  8. android:layout_x : This specifies the x-coordinate of the layout
  9. android:layout_y : This specifies the y-coordinate of the layout

android:layout_width=wrap_content tells the view to size itself to the dimensions required by its content.

android:layout_width=match_parent tells the view to become as big as its parent view.

View Identification

The syntax for an ID, inside an XML tag is:

  • The at-symbol (@) at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource
  • The plus-symbol (+) means that this is a new resource name that must be created and added to our resources

Android LinearLayout

Android LinearLayout organizes elements along a single line. We can specify whether that line is vertical or horizontal using android:orientation. The orientation is horizontal by default.

A vertical LinearLayout will only have one child per row (so it is a column of single elements), and a horizontal LinearLayout will only have one single row of elements on the screen.

android:layout_weight attribute depicts the importance of the element. An element with larger weight occupies more screen space. Here is a sample Layout XML using LinearLayout:

layout_linear.xml

In this layout we have a Parent LinearLayout which has a vertical orientation and contains buttons, textviews and a nested Linear Layout(having a horizontal orientation) as child views.

Note: Nested layouts don’t have to be of one type. We could, for example, have a LinearLayout as one of the children in a RelativeLayout and vice-versa.

Android RelativeLayout

Android RelativeLayout lays out elements based on their relationships with one another, and with the parent container. This is one of the most complicated layout and we need several properties to actually get the layout we desire.

That is, using RelativeLayout we can position a view to be toLeftOf, toRightOf, below or above its siblings.

We can also position a view with respect to its parent such as centered horizontally, vertically or both, or aligned with any of the edges of the parent RelativeLayout. If none of these attributes are specified on a child view then the view is by default rendered to the top left position.

Android RelativeLayout attributes

The following are the major attributes used across RelativeLayout. They lay across three different categories:

Relative To Container

  • android:layout_alignParentBottom : Places the bottom of the element on the bottom of the container
  • android:layout_alignParentLeft : Places the left of the element on the left side of the container
  • android:layout_alignParentRight : Places the right of the element on the right side of the container
  • android:layout_alignParentTop : Places the element at the top of the container
  • android:layout_centerHorizontal : Centers the element horizontally within its parent container
  • android:layout_centerInParent : Centers the element both horizontally and vertically within its container
  • android:layout_centerVertical : Centers the element vertically within its parent container

Relative to Siblings

  • android:layout_above : Places the element above the specified element
  • android:layout_below : Places the element below the specified element
  • android:layout_toLeftOf : Places the element to the left of the specified element
  • android:layout_toRightOf : Places the element to the right of the specified element

“@id/XXXXX” is used to reference an element by its id. One thing to remember is that referencing an element before it has been declared will produce an error so @+id/ should be used in such cases.

Alignment With Other Elements

  • android:layout_alignBaseline : Aligns baseline of the new element with the baseline of the specified element
  • android:layout_alignBottom : Aligns the bottom of new element in with the bottom of the specified element
  • android:layout_alignLeft : Aligns left edge of the new element with the left edge of the specified element
  • android:layout_alignRight : Aligns right edge of the new element with the right edge of the specified element
  • android:layout_alignTop : Places top of the new element in alignment with the top of the specified element

The following xml layout uses RelativeLayout:

layout_relative.xml

As you can see we can rearrange elements based on their relative positions.

The following xml layout represents a custom layout having nested linear and relative layouts.

layout_mixed.xml

Android Layout Project Structure

android-layouts-part-1-project-227x450

This project consists of three activities and the respective layouts that were discussed above.

Android Layout Code

The application launches into the MainActivity which loads the layout_linear.xml contents by the following code:

The SecondActivity and ThirdActivity load the layout_relative.xml and layout_mixed.xml layouts respectively as shown below:

The image outputs of the three layout files are shown below:

layout_linear.xml

As you can see the Parent LinearLayout consists of 6 child elements in a single vertical column among which one is a nested LinearLayout child view containing 4 components in horizontal orientation.

layout_relative.xml

android-layout-relative-output-261x450

The arrows pointing in the image above depict how siblings are positioned relative to each other and relative to the container.

layout_mixed.xml

android-layout-relative-output-261x450

This Relative Layout consists of a Vertical LinearLayout within a Nested Horizontal LinearLayout along with a Child RelativeLayout.

Note: Components belonging to different layouts are not siblings and hence can’t be positioned relative to each other. It’s their container layouts that are siblings and can be positioned relative to each other.

If you are wondering about the blue lined rectangles and arrows, it’s because the images are from xml layouts in graphical view. When you will run the app, these blue lines and rectangles will not be shown.

This brings an end to android layout tutorial. We’ll cover the other android layouts in the next tutorials. You can download the final Android Layout Project from the link below.

Reference: API Doc

By admin

Leave a Reply