onlyMobilePro

Introduction To Android Linear Layout

In Android operating system, developer use layout to organize user interface controls, widgets on screen. In this lesson, we will look into the the Linear Layout, which is the most common layout used by most of the Android developers. The Linear layout organize controls either vertically or horizontally on screen. When the layout’s orientation is set to vertical, all child controls within it are organized in a single column; But when the layout’s orientation is set to horizontal, all child controls within it are organized and displayed in a single row.

Creating XML Layout Resources

Android allow developer to define UI elements either in XML or at runtime (which developer add it programmatically). In this lesson, we will create the Linear Layout in XML format, and please be noted that all XML layout resources must be stored in the /res/layout project directory.

Creating layout with Android’s XML vocabulary, you can quickly design UI layouts, just in the same way you create web pages in HTML (Note: If you come from web development background). Following is the sample of Linear Layout in XML format:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="horizontal"
	android:layout_width="fill_parent"
    android:layout_height="fill_parent">
     
    <TextView
    	android:text="Username"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content" />
    <EditText
    	android:width="70px"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content" />
    <TextView
    	android:text="Nickname"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content" />
    <EditText
    	android:width="70px"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content" /> 
    <Button 
    	android:id="@+id/backbutton"
    	android:text="Back"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content" />
</LinearLayout>

Here is the outcome:

Description

• As you can see from the XML code, We have defined the layout into Linear format using “LinearLayout“
• We can simply specify our layout to organize the UI elements either horizontally or vertically using the attribute – “android:orientation“. There are 2 values can be accepted by this attribute, which is “horizontal” and “vertical“
• In this case, we have defined 2 TextView (UI element that used to display text), 2 EditText (UI element that allow user to input text) and a Button (UI element that used to trigger action)
• We MUST specify the “layout height” and “layout width” for the UI elements. It used to specify the height / width for the group / elements, as a dimension value. The value can be expressed using any of the dimension units supported by Android (px, dp, sp, pt, in, mm) or with the following keywords:
  

  Value	Description
  match_parent	Sets the dimension to match that of the parent element. Added in API Level 8 to deprecate fill_parent.
  fill_parent	Sets the dimension to match that of the parent element.
  wrap_content	Sets the dimension only to the size required to fit the content of this element.

So, let say, we want all the UI elements to be displayed in a a single column (vertically), then we have to specify the layout orientation into vertical, then our app layout will look like this:

Conclusion

The Android app’s user interface – Linear layouts are one of the most common and fundamental layout types used. The Linear layout allows developers to organize UI elements in either a single row (horizontally) or single column (vertically).

Next Post