• 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).
  • You might also like

    No comments:

    Post a Comment

    Good day precious one, We love you more than anything.

Powered by Blogger.