Android Layouts

Layouts

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.

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_content value tells the layout to allocate the minimum amount so that the widget is rendered correctly.

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, GridLayout uses defaults, e.g., one column, one row and the position of a View depends on the order of the declaration of the Views.

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>

AbsoluteLayout

AbsoluteLayout is based on the simple idea of placing each control at an absolute position. You specify the exact x and y coordinates on the screen for each control. This is not recommended for most UI development (in fact AbsoluteLayout is currently deprecated) since absolutely positioning every element on the screen makes an inflexible UI that is much more difficult to maintain. Consider what happens if a control needs to be added to the UI. You would have to change the position of every single element that is shifted by the new control.

Here is a sample Layout XML using AbsoluteLayout

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<Button

android:id="@+id/backbutton"

android:text="Back"

android:layout_x="10px"

android:layout_y="5px"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<TextView

android:layout_x="10px"

android:layout_y="110px"

android:text="First Name"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<EditText

android:layout_x="150px"

android:layout_y="100px"

android:width="100px"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<TextView

android:layout_x="10px"

android:layout_y="160px"

android:text="Last Name"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<EditText

android:layout_x="150px"

android:layout_y="150px"

android:width="100px"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</AbsoluteLayout>

Note how each element has android:layout_x and android:layout_y specified. Android defines the top left of the screen as (0,0) so the layout_x value will move the control to the right, and the layout_y value will move the control down. Here is a screenshot of the layout produced by this XML.

FrameLayout

FrameLayout is designed to display a single item at a time. You can have multiple elements within a FrameLayout but each element will be positioned based on the top left of the screen. Elements that overlap will be displayed overlapping. I have created a simple XML layout using FrameLayout that shows how this works.

<FrameLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

xmlns:android="http://schemas.android.com/apk/res/android">

<ImageView

android:src="@drawable/icon"

android:scaleType="fitCenter"

android:layout_height="fill_parent"

android:layout_width="fill_parent"/>

<TextView

android:text="Learn-Android.com"

android:textSize="24sp"

android:textColor="#000000"

android:layout_height="fill_parent"

android:layout_width="fill_parent"

android:gravity="center"/>

</FrameLayout>

FrameLayout can become more useful when elements are hidden and displayed programmatically. You can use the attribute android:visibility in the XML to hide specific elements. You can call setVisibility from the code to accomplish the same thing. The three available visibility values are visible, invisible (does not display, but still takes up space in the layout), and gone (does not display, and does not take space in the layout).

So you could, for example, have a game in a FrameView where text displayed to the user is visible in the middle of the screen at appropriate times (e.g. “Game Over”).

LinearLayout

LinearLayout organizes elements along a single line. You specify whether that line is verticle or horizontal using android:orientation. Here is a sample Layout XML using LinearLayout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

               android:orientation="horizontal"

               android:layout_width="fill_parent"

    android:layout_height="fill_parent">

     <Button

               android:id="@+id/backbutton"

               android:text="Back"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content" />

    <TextView

               android:text="First Name"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content" />

    <EditText

               android:width="100px"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content" />

    <TextView

               android:text="Last Name"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content" />

    <EditText

               android:width="100px"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content" />

</LinearLayout>

You might note that the EditText field at the end of the line has had its width reduced in order to fit. Android will try to make adjustments when necessary to fit items on screen. The last page of this tutorial will cover one method to help deal with this.

I mentioned on the first page that Layouts can be nested. LinearLayout is frequently nested, with horizontal and vertical layouts mixed. Here is an example of this.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

               android:orientation="vertical"

               android:layout_width="fill_parent"

</LinearLa

    android:layout_height="fill_parent">

     <Button

               android:id="@+id/backbutton"

               android:text="Back"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content" />

    <LinearLayout

               android:orientation="horizontal"

               android:layout_width="fill_parent"

               android:layout_height="wrap_content">

                   <TextView

                              android:text="First Name"

                              android:layout_width="wrap_content"

                              android:layout_height="wrap_content" />

                   <EditText

                              android:width="100px"

                              android:layout_width="wrap_content"

                              android:layout_height="wrap_content" />

    yout>

    <LinearLayout

               android:orientation="horizontal"

               android:layout_width="fill_parent"

               android:layout_height="wrap_content">

                   <TextView

                              android:text="Last Name"

                              android:layout_width="wrap_content"

                              android:layout_height="wrap_content" />

                   <EditText

                              android:width="100px"

                              android:layout_width="wrap_content"

                              android:layout_height="wrap_content" />

    </LinearLayout>

</LinearLayout>

RelativeLayout

RelativeLayout lays out elements based on their relationships with one another, and with the parent container. This is arguably the most complicated layout, and we need several properties to actually get the layout we want.

Relative To Container

These properties will layout elements relative to the parent container.

android:layout_alignParentBottom – Places the bottom of the element on the bottom of the container
android:layout_alignParentLeft – Places the left of the element on the left side of the container
android:layout_alignParentRight – Places the right of the element on the right side of the container
android:layout_alignParentTop – Places the element at the top of the container
android:layout_centerHorizontal – Centers the element horizontally within its parent container
android:layout_centerInParent – Centers the element both horizontally and vertically within its container
android:layout_centerVertical – Centers the element vertically within its parent container

Relative To Other Elements

These properties allow you to layout elements relative to other elements on screen. The value for each of these elements is the id of the element you are using to layout the new element. Each element that is used in this way must have an ID defined using android:id=”@+id/XXXXX” where XXXXX is replaced with the desired id. You use “@id/XXXXX” to reference an element by its id. One thing to remember is that referencing an element before it has been declared will produce an error.

android:layout_above – Places the element above the specified element
android:layout_below – Places the element below the specified element
android:layout_toLeftOf – Places the element to the left of the specified element
android:layout_toRightOf – Places the element to the right of the specified element

Alignment With Other Elements

These properties allow you to specify how elements are aligned in relation to other elements.

android:layout_alignBaseline – Aligns baseline of the new element with the baseline of the specified element
android:layout_alignBottom – Aligns the bottom of new element in with the bottom of the specified element
android:layout_alignLeft – Aligns left edge of the new element with the left edge of the specified element
android:layout_alignRight – Aligns right edge of the new element with the right edge of the specified element
android:layout_alignTop – Places top of the new element in alignment with the top of the specified element

Here is a sample XML Layout

<RelativeLayout

               android:layout_width="fill_parent"

               android:layout_height="fill_parent"

               xmlns:android="http://schemas.android.com/apk/res/android">

               <Button

                               android:id="@+id/backbutton"

                               android:text="Back"

                               android:layout_width="wrap_content"

                               android:layout_height="wrap_content" />

               <TextView

                               android:id="@+id/firstName"

                               android:text="First Name"

                               android:layout_width="wrap_content"

                               android:layout_height="wrap_content"

                               android:layout_below="@id/backbutton" />

               <EditText

                               android:width="100px"

                               android:layout_width="wrap_content"

                               android:layout_height="wrap_content"

                               android:layout_toRightOf="@id/firstName"

                               android:layout_alignBaseline="@id/firstName" />

               <TextView

                               android:id="@+id/lastName"

                               android:text="Last Name"

                               android:layout_width="wrap_content"

                               android:layout_height="wrap_content"

                               android:layout_below="@id/firstName" />

               <EditText

                               android:width="100px"

                               android:layout_width="wrap_content"

                               android:layout_height="wrap_content"

                               android:layout_toRightOf="@id/lastName"

                               android:layout_alignBaseline="@id/lastName" />

</RelativeLayout>

I wanted to show this to you because the first time I made a RelativeLayout I did exactly this and then looked at the screen and said, “Hang on a minute, that’s not what I wanted!” The problem here is that when Android draws the TextView lastName below the TextView firstName it only sets aside the space it needs for the TextView. Android only reads the Layout XML one time so it doesn’t know that an EditView is the next item and doesn’t plan for it. So when the EditView is drawn to the right of the TextView it only has the height of the TextView to work with so it overlaps the EditView above it. Here is the Layout XML I wrote to create the form the way it should look.

<RelativeLayout

               android:layout_width="fill_parent"

               android:layout_height="fill_parent"

               xmlns:android="http://schemas.android.com/apk/res/android">

               <Button

                               android:id="@+id/backbutton"

                               android:text="Back"

                               android:layout_width="wrap_content"

                               android:layout_height="wrap_content" />

               <TextView

                               android:id="@+id/firstName"

                               android:text="First Name"

                               android:layout_width="wrap_content"

                               android:layout_height="wrap_content"

                               android:layout_below="@id/backbutton" />

               <EditText

                              android:id="@+id/editFirstName"

                               android:width="100px"

                               android:layout_width="wrap_content"

                               android:layout_height="wrap_content"

                               android:layout_toRightOf="@id/firstName"

                               android:layout_below="@id/backbutton"/>

               <EditText

                               android:id="@+id/editLastName"

                               android:width="100px"

                               android:layout_width="wrap_content"

                               android:layout_height="wrap_content"

                               android:layout_below="@id/editFirstName"

                               android:layout_alignLeft="@id/editFirstName"/>

               <TextView

                               android:id="@+id/lastName"

                               android:text="Last Name"

                               android:layout_width="wrap_content"

                               android:layout_height="wrap_content"

                               android:layout_toLeftOf="@id/editLastName"

                               android:layout_below="@id/editFirstName" />

</RelativeLayout>

You probably noticed that I had to rearrange the elements in the XML since, as I already mentioned, you cannot reference an element that has not already been laid out. Here is what the updated RelativeLayout produces.

TableLayout

TableLayout organizes content into rows and columns. The rows are defined in the layout XML, and the columns are determined automatically by Android. This is done by creating at least one column for each element. So, for example, if you had a row with two elements and a row with five elements then you would have a layout with two rows and five columns.

You can specify that an element should occupy more than one column using android:layout_span. This can increase the total column count as well, so if we have a row with two elements and each element has android:layout_span=”3″ then you will have at least six columns in your table.

By default, Android places each element in the first unused column in the row. You can, however, specify the column an element should occupy using android:layout_column.

Here is some sample XML using TableLayout.

<TableLayout

               android:layout_width="fill_parent"

               android:layout_height="fill_parent"

               xmlns:android="http://schemas.android.com/apk/res/android">

               <TableRow>

                               <Button

                              android:id="@+id/backbutton"

                              android:text="Back"

                              android:layout_width="wrap_content"

                              android:layout_height="wrap_content" />

               </TableRow>

               <TableRow>

                               <TextView

                              android:text="First Name"

                              android:layout_width="wrap_content"

                              android:layout_height="wrap_content"

                              android:layout_column="1" />

                               <EditText

                              android:width="100px"

                              android:layout_width="wrap_content"

                              android:layout_height="wrap_content" />

               </TableRow>

               <TableRow>

                               <TextView

                              android:text="Last Name"

                              android:layout_width="wrap_content"

                              android:layout_height="wrap_content"

                              android:layout_column="1" />

                               <EditText

                              android:width="100px"

                              android:layout_width="wrap_content"

                              android:layout_height="wrap_content" />

               </TableRow>

</TableLayout>

Alternate Layouts

On the LinearLayout page I mentioned that Android will shrink elements when they don’t all fit on the screen. You can reduce the need for this by using alternate layouts for different screen orientations. So, for example, you have a LinearLayout that looks pretty good in Landscape but does not have the room it needs in Portrait mode. Before looking in the res/layout folder for your layout XML Android will check for one of these alternate layouts.

res/layout-land – The alternate layout for a landscape UI
res/layout-port – The alternate layout for a portrait UI
res/lauout-square – The alternate layout for a square UI

I am going to create a folder named layout-land under the res folder and place this XML under the new folder. The XML file should have the same name it has in the layout folder, in my case linear_layout.xml.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<Button

android:id="@+id/backbutton"

android:text="Back"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<TextView

android:text="First Name"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<EditText

android:width="100px"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<TextView

android:text="Last Name"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<EditText

android:width="100px"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</LinearLayout>

In the Emulator you can press 7 on your numberpad to change between Landscape and Portrait orientations. When I switch to landscape I see the Layout from the layout-land folder.

LINEAR LAYOUT create components vertical and horizontal order. Set orientation property to get vertical or horizontal LINEAR LAYOUT.

In this example LINEAR LAYOUT.

1. How to create Linear Layout .

2. Created example to place comonents vertical and horizontal order.

3. Created one example ( Login form ) to use both vertical and horizontal orientation property of LINEAR LAYOUT.

Orientation Vertical:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            tools:context=".LinearLayout" >

                    <Button
                        android:text="BUTTON"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                    />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Text 1"
                        android:paddingTop="10px"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Text 2"
                        android:paddingTop="10px"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Text 3"
                        android:paddingTop="10px"/>

        </LinearLayout>

Orientation Vertical :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            tools:context=".LinearLayout" >

                    <Button
                        android:text="BUTTON"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                    />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Text 1"
                        android:paddingTop="10px"
                        android:paddingLeft="10px"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Text 2"
                        android:paddingTop="10px"
                        android:paddingLeft="10px"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Text 3"
                        android:paddingTop="10px"
                        android:paddingLeft="10px"/>

    </LinearLayout>

Mixed Example With Horizontal And Vertical Orientation Properties :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:orientation="vertical"
                tools:context=".LinearLayout" >

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:paddingLeft="10px"
                            android:paddingTop="20px"
                            android:text="LOGIN" />

                                    <LinearLayout
                                        android:layout_width="fill_parent"
                                        android:layout_height="wrap_content"
                                        android:orientation="horizontal"
                                        android:paddingTop="20px">

                                        <TextView
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:paddingLeft="10px"
                                            android:paddingTop="20px"
                                            android:text="Username" />

                                        <EditText
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_weight="0.50"
                                            android:layout_marginLeft="40px"
                                            android:paddingTop="20px" />

                                    </LinearLayout>

                                    <LinearLayout
                                    android:layout_width="fill_parent"
                                    android:layout_height="wrap_content"
                                    android:orientation="horizontal"
                                    android:paddingTop="20px"
                                     >

                                                        <TextView
                                                            android:layout_width="wrap_content"
                                                            android:layout_height="wrap_content"
                                                            android:text="Password"
                                                            android:paddingTop="20px"
                                                            android:paddingLeft="10px"/>

                                                        <EditText
                                                            android:layout_width="wrap_content"
                                                            android:layout_height="wrap_content"
                                                            android:layout_gravity="center_horizontal"
                                                            android:layout_marginLeft="40px"
                                                            android:layout_weight="0.50"
                                                            android:paddingTop="20px" />

                                    </LinearLayout>

                        <Button
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:paddingLeft="20px"
                            android:paddingTop="10px"
                            android:text="BUTTON" />

            </LinearLayout>

In this example we learn how to create a RELATIVE LAYOUT and how it will adjust components.

1. Creating a Login screen.

The RelativeLayout is very flexible. RelativeLayout give flexbility to position your component base on the relative or sibling component’s position. It’s the most flexible layout, that allow you to position your component to display in anywhere you want.

In RelativeLayout, you can use “above, below, left and right” to arrange the component position, for example, display a button1 below button2, or display button3 on right of the button1.

NOTE : Litle bit hard to create layout with relative layout so instead of code in xml use Android Design Tool.

activity_relative_layout_android_example.xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            tools:context=".RelativeLayoutAndroidExample" >

                    <TextView
                        android:id="@+id/text1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:layout_centerInParent="false"
                        android:text="LOGIN"
                        android:layout_marginTop="14dp"
                        android:textAppearance="?android:attr/textAppearanceLarge"
                        />

                     <TextView
                         android:id="@+id/textView1"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:layout_below="@+id/text1"
                         android:layout_marginTop="20dp"
                         android:text="Username :"
                         android:textAppearance="?android:attr/textAppearanceLarge" />

                     <EditText
                         android:id="@+id/editText1"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:layout_alignParentRight="true"
                         android:layout_alignTop="@+id/textView1"
                         android:layout_toRightOf="@+id/textView1"
                         />

                     <TextView
                         android:id="@+id/textView2"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:layout_below="@+id/textView1"
                         android:layout_marginTop="20dp"

                         android:text="Password :"
                         android:textAppearance="?android:attr/textAppearanceLarge" />

                     <EditText
                         android:id="@+id/editText2"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:layout_alignParentRight="true"
                         android:layout_alignTop="@+id/textView2"
                         android:layout_toRightOf="@+id/textView2"
                         android:inputType="textPassword"
                         />

                     <Button
                         android:id="@+id/btnSubmit"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:layout_alignParentLeft="false"
                         android:layout_below="@+id/editText2"
                         android:layout_centerInParent="true"
                         android:text="Submit" />


                       <Button
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:layout_alignParentBottom="true"
                         android:text="SIGNUP"
                         android:layout_centerHorizontal="true"/>

        </RelativeLayout>

In this example creating a basic layout then a login screen.

In Android, TableLayout let you arranges components in rows and columns, just like the standard table layout in HTML, <tr> and <td>..

In this tutorial, we show you how to use TableLayout to arrange button, textview and edittext in rows and columns format, and also demonstrates the use of “android:layout_span” to span view in 2 cells, and “android:layout_column” to display the view in specified column.

Note :

In Eclipse , XML code assist will not prompts the attribute “android:layout_span“, “android:layout_column” and many other useful TableLayout attributes, no idea why, may be bug. Just put the attribute inside, it’s still compile and run.

One basic example to better understanding :

<TableLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:shrinkColumns="*" android:stretchColumns="*" android:background="#ffffff">


                        <TableRow
                            android:layout_height="wrap_content"
                            android:layout_width="fill_parent"
                            android:gravity="center_horizontal">

</TableRow>

                        

</TableRow>

                        
                        <TableRow
                            android:layout_height="wrap_content"
                            android:layout_width="fill_parent"
                            android:gravity="center_horizontal">

Taking example to create a login screen for better understanding.

activity_table_layout_android_example.xml :

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                >


                        <TableRow   android:paddingTop="10px" android:gravity="center">

                             <TextView
                                 android:id="@+id/status"
                                 android:layout_width="wrap_content"
                                 android:layout_gravity="center"
                                 android:layout_span="2"
                                 android:text="LOGIN"
                                 android:textColor="#890000"
                                 android:textSize="15sp"
                                 android:textStyle="bold" />

                         </TableRow>

                        <TableRow android:layout_marginTop="20dip" >

                            <TextView
                                android:layout_width="wrap_content"
                            android:text="Username :"
                            android:textSize="20sp"
                            android:textColor="#000000"
                            android:layout_marginLeft="20dip"
                            ></TextView>

                           <EditText
                               android:id="@+id/screenName"
                               android:layout_height="wrap_content"
                               android:layout_marginLeft="20dip"
                               android:layout_marginRight="20dip"
                               android:layout_weight="1" >

                            </EditText>

                         </TableRow>

Example of FrameLayout

It's a example of using FrameLayout, to make two view (a SeekBar and a SurfaceView here)

overlap.

It use the old post "Implement a SeekBar to control the volume of Video Player" as a example.

The Java code keep no change, modify the layout file, main.xml, to move the Volumn Control

(SeekBar) over the top of the video(SurfaceView).

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"/>

<LinearLayout

android:orientation="horizontal"

android:layout_height="wrap_content"

android:layout_width="fill_parent">

<Button

android:id="@+id/playvideoplayer"

android:layout_width="0dip"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="-PLAYVideo-"

<Button

android:id="@+id/pausevideoplayer"

android:layout_width="0dip"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="-PAUSEVideo-"/>

</LinearLayout>

<FrameLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

<SurfaceView

android:id="@+id/surfaceview"

android:layout_width="fill_parent"

android:layout_height="wrap_content"/>

<SeekBar

android:id="@+id/volbar"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_margin="10px"/>

</FrameLayout>

</LinearLayout>

Android - Combining Multiple Layouts in a Layout

COMBINING LAYOUTS IN A LAYOUT

The main.xml file is

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<TextView android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Layout 1" />

<TextView android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Layout 2" />

</LinearLayout>

The layout1.xml file is

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="#ff0000" >

<TextView android:layout_width="fill_parent"

android:layout_height="40px"

android:text="TextView" />

<EditText android:layout_width="250px"

android:layout_height="wrap_content"

                                android:hint="EditText" />
                <CheckBox android:layout_width="fill_parent"
                                android:layout_height="40px"

android:text="Checkbox" />

</LinearLayout>

The layout2.xml file is

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="#00ff00" >

<TextView android:layout_width="fill_parent"

android:layout_height="40px"

android:text="TextView" />

<EditText android:layout_width="250px"

android:layout_height="wrap_content"

                                android:hint="EditText" />
                <CheckBox android:layout_width="fill_parent"
                                android:layout_height="40px"

android:text="Checkbox" />

</LinearLayout>