Android Programming: The Linear Layout

If you want to know more about Android applications and various designs, you first need to understand screen layouts. A layout explains a user interface’s visual structure, whether it’s for a widget or an activity. A layout can be declared by either declaring the elements of the user interface in XML or representing elements of the layout during runtime. Android developers prefer to use layouts since the framework provides them with the freedom to use either one or both of the methods for managing the user interface of the applications. This allows an individual to declare the default layout of the application in XML and also add codes to vary the screen objects at run-time. Linear layouts are very efficient when it comes to organizing the controls of the user interface and widgets. It performs as the core for many useful user interface applications.

Learn more about LinearLayouts and Android programming at Udemy.com.

What is a Linear Layout?

Before we go any further, understanding what a linear layout means is very important. These layouts are used mostly by Android developers to tweak user interfaces. It is used frequently, simply because of its simplicity. As the name suggests, it classifies the controls in a linear fashion, whether it’s horizontal or vertical. For example, when the layout defines a vertical orientation, the child controls used within are all positioned in a single column and when it’s set horizontally, child controls are positioned in a single row. Basically, a layout that positions its children in a single row or column is known as a linear layout. You can set the orientation by using setOrientation () and to specify the child elements alignment, you can call setGravity().If orientation is not defined, horizontal is set by default.

Types of Linear Layouts

As the name states, the elements appearing in a linear layout are displayed in a linear manner, whether it’s vertical or horizontal. You can set the behavior by using:

<LinearLayoutandroid:orientation=”vertical”>….</LinearLayout> (for vertical)

<LinearLayoutandroid:orientation=”horizontal”>….</LinearLayout> (for horizontal)

What is LinearLayoutParams?

Layout Params mainly tells the application’s parent view about how it will be adjusted on the screen. The basic LayoutParams class defines the view’s height and width i.e. about how much the layout should cover the screen. These dimensions are separated every time we use the layout. One important factor to remember in nesting linear layout is that the parent element cannot exceed nested layout dimension.

They are two LayoutParams used in linear layout:

Margin layout params perform spacing with respect to the view from the layout boundaries. It generally separates the views from getting overlapped. A simple approach is to keep the views within the layout more presentable. Some fields are:

• Leftmargin
• BottomMargin
• RightMargin
• TopMargin

LayoutParams are used for linear layout as a whole and not for particular views inside it. It describes the area of the layout as a whole that will cover the screen. The parameters are:

• Fill_parent
• Wrap_content
• Match_parent

What is Layout Weight?

Layout weight is one of the attributes used by linear layout to specify the “weightage” of the views. Weightage means to distribute the available space in the parent view. It gives functionality to distribute the views throughout the android screen based on the specified weightage. Android initially calculates the total proportion of all the views as specified, on basis of the given weightage and then places each view on the screen accordingly. By default, every view has a weight of 0 which means that there would be single view that would cover the entire screen space.

Syntax:

<View

android:layout _weight=”1”

/>

What is Layout Gravity?

Layout gravity is one of the attributes for a linear layout that helps place view objects.

The gravity attribute aligns the user interface elements in linear layout. It works in both horizontal and vertical orientation. Its main functionality is in the view group and it controls the way the contents of the view group will be positioned either horizontally or vertically.

Want to learn more about Android programming? Take a course at Udemy.com.

For horizontal orientation of Linear Layout it has values:

• Top
• Bottom
• Center

For vertical orientation of Linear Layout:

• Left
• Center
• Right

Syntax:

<View

android:layout_gravity:”value”

>

What is a Relative Layout?

Relative layout helps you place the view objects on the screen relative to other controls. The view’s position is specified relative to other view objects rather than being laid out linearly.

<RelativeLayout>….</RelativeLayout>

Comparison of Linear Layout with other layouts

• Relative Layouts are mostly used to group child views relative to each other. For example, left of or right of a control where the linear layout groups the child in horizontal and vertical manner only.
• Relative Layout maintains the flat hierarchy while Linear Layouts are used in case of nesting a view
• Relative Layout is used for much complex user interfaces and provides better control in comparison to linear layout.
• A Relative Layout has efficient use for slide drawers allowing drawers to slide out on any four side of the screen of smartphone
• Linear Layouts have a much better organized way of approach.
• Linear Layouts are avoided in case of too much nesting. In this case, grid layouts are used to provide easy control of the views.
• Generally, the combination of one and more layouts is used in an application. The most important is the combination of relative and linear layout, which is used more often.
• A Linear Layout is preferred in comparison to absolute layout, because an absolute layout requires the user to mention the exact coordinates of the view where it should be positioned, which can become quite complex in large applications.
• A Linear Layout is the most fundamental layout, which can be made to implement a grid view and list view with little effort and knowledge. Therefore, a linear layout is the most used layout in every application.

Linear Layout Vertical Example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical2"
android:layout_weight="2"/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical3"
android:layout_weight="1"/>
</LinearLayout>
Linear Layout Horizontal Example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Horizontal1"
/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Horizn2"
/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gra_Center"
android:layout_gravity="center"
android:layout_weight="0"
/>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bottom"
android:layout_gravity="bottom"/>
</LinearLayout>

When it comes to vertical layouts, the buttons are stacked vertically, i.e. one below the other. This particular example sets the orientation in a vertical manner and therefore, all the children elements are stacked vertically.

When it comes to horizontal layouts, the buttons are stacked vertically, i.e. one next to the other. This particular example sets the orientation in a horizontal manner and therefore, all the children elements are stacked horizontally.

In this particular case, the “fill_parent” in android:layout_height=”fill_parent” can be replaced with either “match parent” or “wrap content”. For instance, if you use “fill parent” it covers the entire screen. When you use “wrap content”, it covers the screen only up to the point assigned to the children elements. If button 1 is assigned with 20% and 2 takes 20% with 3 taking up 30%, only 70% of the screen is covered.

In addition, both the vertical and horizontal layouts can be used as compounded layouts, as linear layouts can hold any number of layouts within them. In fact, those layouts within the linear layouts can hold other layouts inside them with a single child element as the final result. To see more examples of vertical layouts, you can see the “home” page of most of the websites. For example, as you log in to Facebook, you see many elements like “news feed”, “messages” and “events” stacked one below the other on the left hand side of the page and this is based on vertical layouts.

Become an expert in Android development with a course at Udemy.com