Android Linear Layout, Relative Layout and Table Layout

In this article we will discussing about the difference view layout in android mobile application. The layout that we will to discuss in this article are :

   1. Linear Layout
   2. Relative Layout
   3. Table Layout

  Android allow you to create view layout in XML file or if you strong about java programming language android allow you to create layout view in java code too. All the layout (XML file) must be place in  /res/layout folder. follow this you can see xml layout directory

Now we start with Linear Layout

Linear layout all the elements are displayed in a linear fashion(below is an example of the linear layouts), either Horizontally or Vertically and this behavior is set in android:orientationwhich is an attribute of the node LinearLayout.

This is example with vertical layout snippet 

<LinearLayout android:orientation="vertical" >.......</LinearLayout>

This is example with horizontal layout snippet

<LinearLayout android:orientation="horizontal" >.......</LinearLayout>

Now we create new project I use eclipse for create project with this article

1. Create new project File--> New --> Android Project

2. Click on folder res/layout --> Right Click --> Android XML create new layout call linearlayout.xml

3. Open it follow this code

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

Now I put some controls in this layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Email" />
    <EditText
        android:id="@+id/txtemail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="14"
        android:inputType="textEmailAddress" >
        <requestFocus />
    </EditText>
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Password" />
    <EditText
        android:id="@+id/txtpass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="14"
        android:inputType="textPassword" />
    <Button
        android:id="@+id/btnlogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login" />
</LinearLayout>

4. To set this newly created view as the initial view of your app, Open your MainActivity.java file. You would see the following line inside the onCreate method and setContentView(R.layout.main_activity) change it to setContentView(R.layout.linearlayout)

In MainActivity.java 

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.linearlayout);
}

5. Right Click to run this application as Android application you will see

II. Relative Layout

    In a relative layout every element arranges itself relate to other elements or parent element. Sn example lets consider the layout defined below. The "Cancel" button is placed relatively to right of the Login button parallel y. This is the code snippet with relative layout

1. Now we need to create new project File --> New -->Android Project
2. Right Click on folder res/layout and create a new file call Android XML file and name it as you want..I am naming it as "relative_layout.xml" res/layout --> Right Click -->New -> Android XML File
3. open newly xml file and type below this code.

<?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">
<EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="textEmailAddress" android:ems="10" android:layout_below="@+id/textView3" android:layout_marginTop="18dp" android:id="@+id/editText3" android:layout_alignLeft="@+id/textView3" android:layout_alignStart="@+id/textView3" />
<Button android:text="Login" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/editText3" android:layout_alignLeft="@+id/editText3" android:layout_alignStart="@+id/editText3" android:layout_marginTop="42dp" android:id="@+id/btnlogin" />
<Button android:text="Cancel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/btnlogin" android:layout_alignRight="@+id/editText3" android:layout_alignEnd="@+id/editText3" android:layout_marginRight="16dp" android:layout_marginEnd="16dp" android:id="@+id/btncancel" />
<TextView android:text="Email" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="54dp" android:layout_marginStart="54dp" android:id="@+id/textView3" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginTop="16dp" />
</RelativeLayout>

4. The same like before open your MainActivity.java file and set the layout to you layout created.

public class MainActivity extends AppCompatActivity {
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.relative_layout);
}
} 

5. Run this application just the same before  Right Click -->Run As --> Android Application

and it will laugh your emulator see like this.

III. Table Layout


Table layout in android work as the same way HTML table layout work. your can divide your layouts into row and column..

   1. Create new project  File ->New -> Android Project
   2. Click on folder res/layout create android xml file call "table_layout"   res/layout->Right                  Click-->New --> Android XML File.
   3. Open newly xml file created and type below this code.

    <?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">
<TableRow android:layout_width="match_parent" android:layout_height="fill_parent" android:background="#454594" android:gravity="center_horizontal" >
<TextView android:id="@+id/txt" android:text="Row 1" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="20dp" android:textColor="#fff"
/>
</TableRow>
<TableRow android:id="@+id/tableRow1" android:layout_height="wrap_content" android:layout_width="match_parent">
<TextView android:id="@+id/TextVi" android:text="Row 2 column 1" android:layout_weight="1" android:background="#dcdcdc" android:textColor="#000000" android:padding="20dip" android:gravity="center"/>
<TextView android:id="@+id/TextVie" android:text="Row 2 column 2" android:layout_weight="1" android:background="#d3d3d3" android:textColor="#000000" android:padding="20dip" android:gravity="center"/>
<TextView android:id="@+id/TextView0" android:text="Row 2 column 3" android:layout_weight="1" android:background="#cac9c9" android:textColor="#000000" android:padding="20dip" android:gravity="center"/>
</TableRow>
<!-- Row 3 with 2 columns --> <TableRow android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="center_horizontal">
<TextView android:id="@+id/TextView" android:text="Row 3 column 1" android:layout_weight="1" android:background="#b0b0b0" android:textColor="#000000" android:padding="20dip" android:gravity="center"/>
<TextView android:id="@+id/TextView04" android:text="Row 3 column 2" android:layout_weight="1" android:background="#a09f9f" android:textColor="#000000" android:padding="20dip" android:gravity="center"/>
</TableRow>
</TableLayout>

After we run this application it show like this.

I have just discussed Linear Layout, Relative Layout and Table Layout in this post. The remaining Grid View, Tab Layout and List View will be covered in the next article. Stay tuned!