Android User Interface Design: Linear layout (1)

Understanding the layout is very important for a good Android program design. In this tutorial, you will learn all about linear layout, which vertically or horizontally organizes user interface controls or gadgets on the screen. Properly used, linear layout can be used as the basic layout. Based on this layout, many interesting Android user interfaces can be designed.

What is linear layout?

Linear layout is one of the simplest layout types that Android Developers use most. developers use it to organize controls on your user interfaces. The linear layout functions like its name: it organizes controls in a vertical or horizontal form. When the layout direction is set to vertical, all child controls in the layout are organized in the same column. When the layout direction is set to normal, all child controls are organized in one row.

Linear layout can be defined in the XML layout resource file, or dynamically defined using Java code in the program.

Shows the linear layout of seven TextView controls. This linear layout direction is set to vertical, so that each TextView control is displayed in a column. The text attribute of each TextView control is a color value, and the background color is the color. By setting the layout_width attribute of the control to fill_parent, each control is stretched to the screen width.

 

Use XML layout resources to define linear Layout

The most convenient and maintainable way to design a program user interface is to create XML layout resources. This method greatly simplifies the UI design process. It moves the layout of many static creation and user interface controls and the definition of control attributes to XML, rather than writing code.

XML layout resources must be stored in/res/layout of the project directory. Let's take a look at the Rainbow linear layout described in the previous section. This screen is basically a vertical linear layout set to fill the entire screen, which is achieved by setting its layout_width and layout_height attributes to fill_parent. Name it/res/layout/rainbow. xml as appropriate. The XML definition is as follows:

 
 

  
  
<?xml version="1.0" encoding="utf-8"?> 
  
  
   
  
  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  
  
   
  
  
android:layout_width="fill_parent" android:layout_height="fill_parent" 
  
  
   
  
  
android:orientation="vertical"> 
  
  
   
  
  
<TextView android:text="RED" android:id="@+id/TextView01" 
  
  
   
  
  
android:layout_height="wrap_content" android:background="#f00" 
  
  
   
  
  
android:layout_width="fill_parent" android:layout_weight=".14" 
  
  
   
  
  
android:gravity="center" android:textColor="#000"></TextView> 
  
  
   
  
  
<TextView android:text="ORANGE" android:id="@+id/TextView02" 
  
  
   
  
  
android:layout_height="wrap_content" android:layout_width="fill_parent" 
  
  
   
  
  
android:layout_weight=".15" android:background="#ffa500" 
  
  
   
  
  
android:gravity="center" android:textColor="#000"></TextView> 
  
  
   
  
  
<TextView android:text="YELLOW" android:id="@+id/TextView03" 
  
  
   
  
  
android:layout_height="wrap_content" android:layout_width="fill_parent" 
  
  
   
  
  
android:layout_weight=".14" android:background="#ffff00" 
  
  
   
  
  
android:gravity="center" android:textColor="#000"></TextView> 
  
  
   
  
  
<TextView android:text="GREEN" android:id="@+id/TextView04" 
  
  
   
  
  
android:layout_height="wrap_content" android:layout_width="fill_parent" 
  
  
   
  
  
android:layout_weight=".15" android:background="#0f0" android:gravity="center" 
  
  
   
  
  
android:textColor="#000"></TextView> 
  
  
   
  
  
<TextView android:text="BLUE" android:id="@+id/TextView05" 
  
  
   
  
  
android:layout_height="wrap_content" android:layout_width="fill_parent" 
  
  
   
  
  
android:layout_weight=".14" android:background="#00f" android:gravity="center" 
  
  
   
  
  
android:textColor="#fff"></TextView> 
  
  
   
  
  
<TextView android:text="INDIGO" android:id="@+id/TextView06" 
  
  
   
  
  
android:layout_height="wrap_content" android:layout_width="fill_parent" 
  
  
   
  
  
android:layout_weight=".14" android:background="#4b0082" 
  
  
   
  
  
android:gravity="center" android:textColor="#fff"></TextView> 
  
  
   
  
  
<TextView android:text="VIOLET" android:id="@+id/TextView07" 
  
  
   
  
  
android:layout_height="wrap_content" android:layout_width="fill_parent" 
  
  
   
  
  
android:layout_weight=".14" android:background="#ee82ee" 
  
  
   
  
  
android:gravity="center" android:textColor="#000"></TextView> 
  
  
   
  
  
</LinearLayout> 
 
 

You may notice that every sub-control in this linear layout has many interesting attributes, including a property called layout_weight. We will talk about it later.