Layout Manager and ViewGroups

Posted By on March 21, 2016


Download PDF
Android views - UI Widgets
Sample Android App Using layouts and view interaction

A layout manager is a subclass of ViewGroup and is responsible for the layout of itself and its childViews. Android supports different default layout managers.

As of Android 4.0 the most relevant layout managers are LinearLayout, FrameLayout,RelativeLayout and GridLayout.

AbsoluteLayout is deprecated and TableLayout can be implemented more effectively viaGridLayout.

2. Layout attributes

All layouts allow the developer to define attributes. Children can also define attributes which may be evaluated by their parent layout.

Children can specify their desired width and height via the following attributes.

Table 5. Width and height definition

Attribute Description
android:layout_width Defines the width of the widget.
android:layout_height Defines the height of the widget.

Widgets can uses fixed sizes, e.g., with the dp definition, for example, 100dp. While dp is a fixed size it will scale with different device configurations.

The match_parent value tells the application to maximize the widget in its parent. The wrap_contentvalue tells the layout to allocate the minimum amount so that the widget is rendered correctly. The effect of these elements is demonstrated in the following graphics.

Layout with wrap_content
Layout with match_parent

3. FrameLayout

FrameLayout is a layout manager which draws all child elements on top of each other. This allows to create nice visual effects.

The following screenshot shows the Gmail application which uses FrameLayout to display several button on top of another layout.

FrameLayout

4. LinearLayout

LinearLayout puts all its child elements into a single column or row depending on theandroid:orientation attribute. Possible values for this attribute are horizontal and vertical whilehorizontal is the default value.

If horizontal is used, the child elements are layouted as indicated by the following picture.

Vertical would result in a layout as depicted in the following picture.

LinearLayout can be nested to achieve more complex layouts.

LinearLayout supports assigning a weight to individual children via the android:layout_weightlayout parameter. This value specifies how much of the extra space in the layout is allocated to the corresponding view. If, for example, you have two widgets and the first one defines a layout_weightof 1 and the second of 2, the first will get 1/3 of the available space and the other one 2/3. You can also set the layout_width to zero to always have a certain ratio.

5. RelativeLayout

RelativeLayout allows positioning the widget relative to each other. This can be used for complex layouts. RelativeLayout is a complex layout manager and should only be used if such a complex layout is required, as it performs a resource intensive calculation to layout its children.

A simple usage for RelativeLayout is if you want to center a single component. Just add one component to the RelativeLayout and set the android:layout_centerInParent attribute to true.

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

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
         />

</RelativeLayout>

6. GridLayout

GridLayout was introduced with Android 4.0. This layout allows you to organize a view into a Grid. GridLayout separates its drawing area into: rows, columns, and cells.

You can specify how many columns you want to define for each View, in which row and column it should be placed as well as how many columns and rows it should use. If not specified, GridLayoutuses defaults, e.g., one column, one row and the position of a view depends on the order of the declaration.

The following layout file defines a layout using GridLayout.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/GridLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:useDefaultMargins="true" >

    <TextView
        android:layout_column="0"
        android:layout_columnSpan="3"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="40dp"
        android:layout_row="0"
        android:text="User Credentials"
        android:textSize="32dip" />

    <TextView
        android:layout_column="0"
        android:layout_gravity="right"
        android:layout_row="1"
        android:text="User Name: " >
    </TextView>

    <EditText
        android:id="@+id/input1"
        android:layout_column="1"
        android:layout_columnSpan="2"
        android:layout_row="1"
        android:ems="10" />

    <TextView
        android:layout_column="0"
        android:layout_gravity="right"
        android:layout_row="2"
        android:text="Password: " >
    </TextView>

    <EditText
        android:id="@+id/input2"
        android:layout_column="1"
        android:layout_columnSpan="2"
        android:layout_row="2"
        android:inputType="textPassword"
        android:ems="8" />

    <Button
        android:id="@+id/button1"
        android:layout_column="2"
        android:layout_row="3"
        android:text="Login" />

</GridLayout>

This creates a user interface similar to the following screenshot.

GridLayout Activity result

7. ScrollView

The ScrollView or the HorizontalScrollView class is not a layout manager, but useful to make views available, even if they do not fit onto the screen. A scroll view can contain one view, e.g., a layout manager containing more views. s If the child view is too large, scroll view allows scrolling the content.

Scroll view

The following code shows an example layout file which uses a ScrollView.

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

    <TextView
        android:id="@+id/TextView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="8dip"
        android:paddingRight="8dip"
        android:paddingTop="8dip"
        android:text="This is a header"
        android:textAppearance="?android:attr/textAppearanceLarge" >
    </TextView>

</ScrollView>

The android:fillViewport="true" attribute ensures that the scrollview is set to the full screen even if the elements are smaller than one screen.

Android views - UI Widgets
Sample Android App Using layouts and view interaction

Download PDF

Posted by Akash Kurup

Founder and C.E.O, World4Engineers Educationist and Entrepreneur by passion. Orator and blogger by hobby

Website: http://world4engineers.com