Hello, LinearLayout

A LinearLayout is a GroupView that will lay child View elements vertically or horizontally.

1. Start a new project/Activity called HelloLinearLayout.
2. Open the layout file. Make it like so:

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
       android:orientation="vertical"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent">
   
       <LinearLayout
   	android:orientation="horizontal"
   	android:layout_width="fill_parent"
   	android:layout_height="fill_parent"
   	android:layout_weight="1">
   	
   	<TextView
   	    android:text="red"
   	    android:gravity="center_horizontal"
   	    android:background="#aa0000"
   	    android:layout_width="wrap_content"
   	    android:layout_height="fill_parent"
   	    android:layout_weight="1"/>
   	
   	<TextView
   	    android:text="green"
   	    android:gravity="center_horizontal"
   	    android:background="#00aa00"
   	    android:layout_width="wrap_content"
   	    android:layout_height="fill_parent"
   	    android:layout_weight="1"/>
   	
   	<TextView
   	    android:text="blue"
   	    android:gravity="center_horizontal"
   	    android:background="#0000aa"
   	    android:layout_width="wrap_content"
   	    android:layout_height="fill_parent"
   	    android:layout_weight="1"/>
   	
   	<TextView
   	    android:text="yellow"
   	    android:gravity="center_horizontal"
   	    android:background="#aaaa00"
   	    android:layout_width="wrap_content"
   	    android:layout_height="fill_parent"
   	    android:layout_weight="1"/>
   		
       </LinearLayout>
   	
       <LinearLayout
   	android:orientation="vertical"
   	android:layout_width="fill_parent"
   	android:layout_height="fill_parent"
   	android:layout_weight="1">
   	
   	<TextView
   	    android:text="row one"
   	    android:textSize="15pt"
   	    android:layout_width="fill_parent"
   	    android:layout_height="wrap_content"
   	    android:layout_weight="1"/>
   	
   	<TextView
   	    android:text="row two"
   	    android:textSize="15pt"
   	    android:layout_width="fill_parent"
   	    android:layout_height="wrap_content"
   	    android:layout_weight="1"/>
   	
   	<TextView
   	    android:text="row three"
   	    android:textSize="15pt"
   	    android:layout_width="fill_parent"
   	    android:layout_height="wrap_content"
   	    android:layout_weight="1"/>
   	
   	<TextView
   	    android:text="row four"
   	    android:textSize="15pt"
   	    android:layout_width="fill_parent"
   	    android:layout_height="wrap_content"
   	    android:layout_weight="1"/>
           
       </LinearLayout>
           
   </LinearLayout>
   

   Carefully inspect the XML. You'll notice how this layout works a lot like an HTML layout. There is one parent LinearLayout that is defined to lay its child elements vertically. The first child is another LinearLayout that uses a horizontal layout and the second uses a vertical layout. Each LinearLayout contains several TextView elements.

3. Now open the HelloLinearLayout Activity and be sure it loads this layout in the onCreate() method:

   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
   }
   

   R.layout.main refers to the main.xml layout file.

4. Run it.

You should see the following:

Notice how the various XML attributes define the View's behavior. Pay attention to the effect of the layout_weight. Try experimenting with different values to see how the screen real estate is distributed based on the weight of each element.

References

• LinearLayout
• TextView