Hello, Views >

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="http://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