page.title=Linear Layout
parent.title=Hello, Views
parent.link=index.html
@jd:body

<p>{@link android.widget.LinearLayout} is a {@link android.view.ViewGroup} that displays child
{@link android.view.View} elements in a linear direction, either vertically or horizontally.</p>

<p>You should be careful about over-using the {@link android.widget.LinearLayout}. If you begin
nesting multiple {@link android.widget.LinearLayout}s, you may want to consider using a {@link
android.widget.RelativeLayout} instead.</p>

<ol>
  <li>Start a new project named <em>HelloLinearLayout</em>.</li>
  <li>Open the <code>res/layout/main.xml</code> file and insert the following:
<pre>
&lt;?xml version="1.0" encoding="utf-8"?>
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

  &lt;LinearLayout
      android:orientation="horizontal"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1">
      &lt;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"/>
      &lt;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"/>
      &lt;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"/>
      &lt;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"/>
  &lt;/LinearLayout>
	
  &lt;LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1">
    &lt;TextView
        android:text="row one"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    &lt;TextView
        android:text="row two"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    &lt;TextView
        android:text="row three"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    &lt;TextView
        android:text="row four"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
  &lt;/LinearLayout>

&lt;/LinearLayout>
</pre>

<p>Carefully inspect this XML. There is a root {@link android.widget.LinearLayout} that defines
its orientation to be vertical&mdash;all child {@link android.view.View}s (of which it has two) will
be stacked vertically. The first child is
another {@link android.widget.LinearLayout} that uses a horizontal orientation and the second child
is a {@link android.widget.LinearLayout} that uses a vertical orientation. Each of these nested
{@link android.widget.LinearLayout}s contain several {@link android.widget.TextView} elements, which
are oriented with each other in the manner defined by their parent {@link
android.widget.LinearLayout}.</p>
</li>
<li>Now open <code>HelloLinearLayout.java</code> and be sure it loads the
<code>res/layout/main.xml</code> layout in the
{@link android.app.Activity#onCreate(Bundle) onCreate()} method:</p>
<pre>
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
}
</pre>
<p>The {@link android.app.Activity#setContentView(int)} method loads the
layout file for the {@link android.app.Activity}, specified by the resource
ID &mdash; <code>R.layout.main</code> refers to the <code>res/layout/main.xml</code> layout
file.</p>
</li>
<li>Run the application.</li>
</ol>
<p>You should see the following:</p>
<img src="images/hello-linearlayout.png" width="150px" />

<p>Notice how the XML attributes define each View's behavior. Try
experimenting with different values for <code>android:layout_weight</code> to see how the screen
real estate is distributed based on the weight of each element. See the <a
href="{@docRoot}guide/topics/ui/layout-objects.html#linearlayout">Common Layout Objects</a>
document for more about how {@link android.widget.LinearLayout} handles the
<code>android:layout_weight</code> attribute.</p>

<h3>References</h3>
<ul>
	<li>{@link android.widget.LinearLayout}</li>
  <li>{@link android.widget.TextView}</li>
</ul>