android linearlayout vs relativelayout

LinearLayout

The LinearLayout is the most simple layout available in Android. A LinearLayout organizes layout components in a linear fashion horizontally or vertically. Create a new Android project TestBasicLayout in Eclipse to develop in.

Setup of Layout XML file

Android stores layouts in XML files located in the res/layouts/ directory of the project. All projects come with a default LinearLayout that displays a simple hello world message.

 
      android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     >
            android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="@string/hello"
        />
     	android:id="@+id/black_on_red"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
 	android:background="#ff0000"
 	android:textColor="#000000"
 	android:text="black on red"
 	/>
     	android:id="@+id/update_me"
 	android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#00ff00"
 	android:textColor="#000000"
 	android:text="@string/update_text"
 	/>
 

This is a simple Android LinearLayout. This layout specifies a vertical orientation. The orientation attribute of the LinearLayout tag references the arrangement of layout components not the direction of the screen. The width and height components are set to fill_parent which tells the layout to use all available screen space. The other available option for the width and height attributes is wrap_content, which tells the component to only use the required space for the contained component.

Nested inside the LinearLayout are the view components. These specify what is displayed onto the screen. In this layout we simply use 3 TextView elements. The first elements is the default hello world created with the project. Next we added 2 new TextView components. The first specifies a red background with black text. If you wish to access a view component from the application an id must be assigned. The java code below will access the third TextView. Android uses the hex #RRGGBB red, green, blue format similar to HTML to represent color codes.

A static text value was also used in the layout. This is a suboptimal way of displaying text. The third TextView component displays this properly. Use value from the strings.xml file to store the text. The strings.xml file is a configuration file that the SDK autogenerates code from. The strings.xml file is stored in res/values in the project. Here is what should be added to res/values/strings.xml.

 this should be updated

At this point run the project. We'll cover some Java in a second. Adjust the values of the layout_width and layout_height and see the results. If the last TextView height is changed to fill_parent the green background fills the pane. Also notice that if the first or second TextView elements height are changed to fill_pane the elements of the layout below that are off screen.

Loading the layout

Layouts are loaded by calling the setContentView() method from the SDK.

 package higherpass.TestBasicLayout;
 
 import android.app.Activity;
 import android.os.Bundle;
 import android.widget.TextView;
 
 public class TestBasicLayout extends Activity {
     /** Called when the activity is first created. */
     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);
         TextView updateView = (TextView) findViewById(R.id.update_me);
         updateView.setText("New updated text here");
     }
 }

This is a simple Android application that simply loads the LinearLayout we just created and changes the value of the last TextView. Use the findViewById() function to get the appropriate view element from the application. The findViewById() method expects an integer parameter from the auto-generated variable R representing the view. This variable, R.id.update_me, was set in the TextView element of the LinearLayout.

RelativeLayout

The RelativeLayout Organizes layout components in relation to each other. This provides more flexibility of component positioning than LinearLayouts.

Setup Of The Layout main.xml File

The layout of the RelativeLayout XML file is very similar to LinearLayouts and all other layouts. Start with a RelativeLayout tag and nest the needed components.

    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
            android:id="@+id/hello"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="@string/hello"
        />
    	android:id="@+id/black_on_red"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/hello"
	android:background="#ff0000"
	android:textColor="#000000"
	android:text="black on red"
	/>
    	android:id="@+id/update_me"
	android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/black_on_red"
        android:background="#00ff00"
	android:textColor="#000000"
	android:text="@string/update_text"
	/> 
    	android:id="@+id/left_wrap"
	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/update_me"
        android:background="#0000ff"
	android:textColor="#000000"
	android:text="wrap"
	/>
    	android:id="@+id/right_fill"
	android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/update_me"
        android:layout_toRightOf="@id/left_wrap"
        android:background="#ff0000"
	android:textColor="#000000"
	android:text="fill"
	/>

Other than changing the LinearLayout to RelativeLayout there isn't much change to the beginning of the layout. Notice the RelativeLayout doesn't need the orientation attribute. When using a RelativeLayout all elements should have an ID. This ID will be referenced in the placement attributes. See how the black_on_red TextView the attribute android:layout_below is used to specify that the component should be placed below the hello component. On the last component, right_fill, it's placed under update_me and to the right of left_wrap TextViews.

The java code doesn't need to change to load the RelativeLayout. Run the program and see what it does or use the layout viewer in eclipse.

Nesting Layouts

Sometimes there's a need to insert a layout inside a layout, to do that simply nest one layout inside another.

 
      android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:orientation="vertical"
     >
    	android:id="@+id/hello"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="@string/hello"
        />
    	android:id="@+id/black_on_red"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
	android:background="#ff0000"
	android:textColor="#000000"
	android:text="black on red"
	/>
    	android:id="@+id/update_me"
	android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#00ff00"
	android:textColor="#000000"
	android:text="@string/update_text"
	/>
	            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            >
	    		android:id="@+id/left_wrap"
		android:layout_width="wrap_content"
    	        android:layout_height="wrap_content"
        	android:layout_below="@id/update_me"
         	android:background="#0000ff"
		android:textColor="#000000"
		android:text="wrap"
		/>
	    		android:id="@+id/right_fill"
		android:layout_width="fill_parent"
    	        android:layout_height="wrap_content"
	        android:layout_below="@id/update_me"
         	android:layout_toRightOf="@id/left_wrap"
         	android:background="#ff0000"
		android:textColor="#000000"
		android:text="fill"
		/>
	
 

Here we changed the main layout back to a LinearLayout and removed the layout positioning attributes from the first 2 TextViews. To position the 2 TextViews horizontally in a vertical LinearLayout we must nest another view. Here we chose to use a RelativeLayout. A horizontally orientied LinearLayout would've worked as well.