Tutorial / Android Development

Android Linear Layout For Absolute Beginner

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.

Layout Folder in Android 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:

Linear Layout - Elements Organized in Horizontal

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:

Linear Layout - Elements Organized in Vertical

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).

  • Stumble it!
  • Share
  • Deepu Ksh

    good1 for a newbie

Error. Page cannot be displayed. Please contact your service provider for more details. (4)