topsapps is a reporting platform for mobile developers that automatically downloads and visualizes sales data, App Store reviews, hourly ranks and more

Android Layouts: Linear Layout, Relative Layout and Table Layout

Android Develop Hugh27Q925 45℃ 0评论

In this post I will be discussing about the different view layouts in an android mobile application. The six different layouts are

1. Linear Layout
2. Relative Layout
3. Table Layout
4. Grid View
5. Tab Layout
6. List View

Android Layouts: Linear Layout, Relative Layout and Table Layout

Android allows you to create view layouts using simple XML file (we can also create a layout using java code). All the layouts must be placed in /res/layout folder.

Android Layouts: Linear Layout, Relative Layout and Table Layout

Okay, now lets get started with the view layouts.

Android Layouts: Linear Layout, Relative Layout and Table Layout

 

1. Linear Layout

In a linear layout, like the name suggests, 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:orientation which is an attribute of the node LinearLayout.

Example of Vertical layout snippet

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

Example of Horizontal layout snippet

 <LinearLayout android:orientation="horizontal"> .... </LinearLayout> 
Android Layouts: Linear Layout, Relative Layout and Table Layout

Now that we know the two types of linear layouts, here are the steps you need to follow to create them

1. Create a new project File -> New -> Android Project
2. In Package Explorer right click on res/layout folder and create a new Android XML File and name it as you wish. I am naming it as “linear_layout.xml
res/layout -> Right Click -> New -> Android XML File
3. Now open newly created xml file (in my case “linear_layout.xml”) and type the following code.

 <?xml version="1.0" encoding="utf-8"?> <!-- Parent linear layout with vertical orientation --> <LinearLayout   xmlns:android="http://schemas.android.com/apk/res/android"   android:orientation="vertical"   android:layout_width="match_parent"   android:layout_height="match_parent">      <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"      android:text="Email:" android:padding="5dip"/>         <EditText android:layout_width="fill_parent" android:layout_height="wrap_content"      android:layout_marginBottom="10dip"/>           <Button android:layout_width="fill_parent" android:layout_height="wrap_content"      android:text="Login"/>      <!-- Child linear layout with horizontal orientation -->   <LinearLayout android:layout_width="fill_parent"                        android:layout_height="wrap_content"           android:orientation="horizontal" android:background="#2a2a2a"           android:layout_marginTop="25dip">          <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"      android:text="Home" android:padding="15dip" android:layout_weight="1"      android:gravity="center"/>         <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"      android:text="About" android:padding="15dip" android:layout_weight="1"      android:gravity="center"/>       </LinearLayout>      </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 function setContentView(R.layout.main). Change R.layout.main to R.layout.yourlinearviewname. In my case its R.layout.linear_layout

 package com.example.androidlayouts; import android.app.Activity; import android.os.Bundle;  public class AndroidLayoutsActivity extends Activity {      @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.linear_layout);     } } 

5. To run the application, right click on the project -> Run As -> 1. Android Application. You should see your newly created linear layout in the emulator.

Android Layouts: Linear Layout, Relative Layout and Table Layout

2. Relative Layout

In a relative layout every element arranges itself relative to other elements or a parent element.
As an example, lets consider the layout defined below. The “Cancel” button is placed relatively, to the right of the “Login” button parallely. Here is the code snippet that achieves the mentioned alignment (Right of Login button parallely)

Example code snippet

 <Button android:id="@+id/btnLogin" ..></Button>  <Button android:layout_toRightOf="@id/btnLogin"             android:layout_alignTop="@id/btnLogin" ..></Button> 
Android Layouts: Linear Layout, Relative Layout and Table Layout

Here are the steps to create a relative layout

1. Create a new project File -> New -> Android Project
2. In Package Explorer right click on res/layout folder and create a new Android XML File and name it as you wish. I am naming it as “relative_layout.xml”
res/layout -> Right Click -> New -> Android XML File
3. Now open newly created xml file (in my case “relative_layout.xml”) and type the following code.

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                 android:layout_width="fill_parent"                  android:layout_height="wrap_content">      <TextView android:id="@+id/label" android:layout_width="fill_parent"                android:layout_height="wrap_content" android:text="Email" />      <EditText android:id="@+id/inputEmail" android:layout_width="fill_parent"                android:layout_height="wrap_content" android:layout_below="@id/label" />        <Button android:id="@+id/btnLogin" android:layout_width="wrap_content"       android:layout_height="wrap_content" android:layout_below="@id/inputEmail"             android:layout_alignParentLeft="true" android:layout_marginRight="10px"             android:text="Login" />      <Button android:layout_width="wrap_content" android:layout_height="wrap_content"             android:layout_toRightOf="@id/btnLogin"              android:layout_alignTop="@id/btnLogin"  android:text="Cancel" />                  <Button android:layout_width="wrap_content" android:layout_height="wrap_content"       android:layout_alignParentBottom="true" android:text="Register new Account"       android:layout_centerHorizontal="true"/> </RelativeLayout>  

4. Same like before open your MainActivity.java file and set the layout to your newly created relative layout file. In my case its R.layout.relative_layout

          setContentView(R.layout.relative_layout);  

5. To run the application, right click on the project -> Run As -> 1. Android Application. You should see your newly created relative layout in the emulator.

Android Layouts: Linear Layout, Relative Layout and Table Layout

3. Table Layout

Table layouts in Android works in the same way HTML table layouts work. You can divide your layouts into rows and columns. Its very easy to understand. The image below should give you an idea.

Android Layouts: Linear Layout, Relative Layout and Table Layout

1. Create a new project File -> New -> Android Project
2. In Package Explorer right click on res/layout folder and create a new Android XML File and name it as you wish. I am naming it as “table_layout.xml”
res/layout -> Right Click -> New -> Android XML File
3. Now open newly created xml file (in my case “table_layout.xml”) and type the following code.

 <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">      <!-- Row 1 with single column -->      <TableRow           android:layout_height="wrap_content"           android:layout_width="fill_parent"           android:gravity="center_horizontal">           <TextView               android:layout_width="match_parent" android:layout_height="wrap_content"              android:textSize="18dp" android:text="Row 1"  android:layout_span="3"             android:padding="18dip" android:background="#b0b0b0"              android:textColor="#000"/>       </TableRow>            <!-- Row 2 with 3 columns -->     <TableRow           android:id="@+id/tableRow1"           android:layout_height="wrap_content"           android:layout_width="match_parent">           <TextView               android:id="@+id/TextView04" 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/TextView04" 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/TextView04" 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/TextView04" 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>  

4. Same like before open your MainActivity.java file and set the layout to your newly created table layout file. In my case its R.layout.table_layout

          setContentView(R.layout.table_layout);  

5. To run the application, right click on the project -> Run As -> 1. Android Application. You should see your newly created table layout in the emulator.

Android Layouts: Linear Layout, Relative Layout and Table Layout

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!

转载请注明:TopsApps » Android Layouts: Linear Layout, Relative Layout and Table Layout

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址