LinearLayout in Android – Implementation and Overview

LinearLayout in Android – Implementation and Overview

The View and ViewGroup tutorial here, will shed some light on how the various elements in android works. LinearLayout is a ViewGroup that will hold every element inside it in a linear fashion. That is, the elements are stacked and cannot be moved freely around.

LinearLayout is a basic layout that is needed in lot of application, from stacking your list of phonenumbers (Uses a scrollview with a linearlayout inside it) to list of friend request in your social media application. It is a simple to understand and implement layout. Check this google documentation for deeper understanding of how the linear layout is rendered. However, we will not be needing those details in this tutorial.

LinearLayout Overview

We are going to be using the XML Tag LinearLayout like below.

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"></LinearLayout>

The two properties layout_width & layout_height are mandatory properties that needs to be set.

LinearLayout – Additional Properties

 

android:id – Provides a unique id with which the layout can be handled

android:divider – This is a drawable to use as a vertical divider between buttons. You can implement a drawable and then call this attribute .

android:baselineAligned – This is a boolean property,  can be used to baseline align the child elements

android:baselineAlignedChildIndex – Used to tell which child elements can be baseline aligned. This is used when the linearlayout is under another layout.

android:gravity – This is used to specify how the elements inside the layout should be aligned, that is, it can be center, left, right, top, bottom.

android:orientation – Orientation is a important property, which will instruct the child views to be stacked accordingly. That is, it can be either Vertically stacked or Horizontally stacked.

LinearLayout Implementation

As show in the overview we will setup a LinearLayout with both the types or orientation.

Create a XML file>Implement the Linearlayout like below.

The default will be a LinearLayout Root tag. This is because, every layout needs to have a root within which we can create our Views and ViewGroups.

"My

What does xmlns:android here mean?

This is often called as a namespace. That is we are pointing the properties starting with ‘android’ (android:layout_height and android:layout_width here) are infact the properties of the layout. This is often done to avoid naming conflicts.

In simpler terms, we are saying that the properties that has to be defined for a layout will have a prefix ‘android’, and no property tag will be recognised by the XML document without the namespace assigned to it.

Once we are done with the Linear Layout declaration, we will add views inside it.

Horizontal Orientation

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="First View"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Second View"/>
</LinearLayout>

This implementation will by default create a horizontal orientation of the Linear Layout.

Output:

Horizontal Orientation
Horizontal Orientation

Vertical Orientation

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="First View"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Second View"/>
</LinearLayout>

This will create a vertical implementation of the textviews like below.

 

LinearLayout - Vertical Implementation
Vertical Implementation

There are various properties that you can play around with in LinearLayout. Think of Linear Layout when you want to quickly stack elements.

Check out my views tutorial here, with list of all the important views that can be used along with the Linear Layout.

We will take a look at other complex layouts in the coming tutorials, that have been very recently been part of the Android UI.

“Learn and Be Curious”

Leave a Comment