frameworks/base/docs/html/guide/tutorials/views/hello-linearlayout.jd

   1 page.title=Hello, LinearLayout
   2 parent.title=Hello, Views
   3 parent.link=index.html
   4 @jd:body
   5
   6 <p>A {@link android.widget.LinearLayout} is a GroupView that will lay child View elements
   7 vertically or horizontally.</p>
   8
   9
  10 <ol>
  11   <li>Start a new project/Activity called HelloLinearLayout.</li>
  12   <li>Open the layout file.
  13     Make it like so:
  14 <pre>
  15 &lt;?xml version="1.0" encoding="utf-8"?>
  16 &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  17     android:orientation="vertical"
  18     android:layout_width="fill_parent"
  19     android:layout_height="fill_parent">
  20
  21     &lt;LinearLayout
  22         android:orientation="horizontal"
  23         android:layout_width="fill_parent"
  24         android:layout_height="fill_parent"
  25         android:layout_weight="1">
  26
  27         &lt;TextView
  28             android:text="red"
  29             android:gravity="center_horizontal"
  30             android:background="#aa0000"
  31             android:layout_width="wrap_content"
  32             android:layout_height="fill_parent"
  33             android:layout_weight="1"/>
  34
  35         &lt;TextView
  36             android:text="green"
  37             android:gravity="center_horizontal"
  38             android:background="#00aa00"
  39             android:layout_width="wrap_content"
  40             android:layout_height="fill_parent"
  41             android:layout_weight="1"/>
  42
  43         &lt;TextView
  44             android:text="blue"
  45             android:gravity="center_horizontal"
  46             android:background="#0000aa"
  47             android:layout_width="wrap_content"
  48             android:layout_height="fill_parent"
  49             android:layout_weight="1"/>
  50
  51         &lt;TextView
  52             android:text="yellow"
  53             android:gravity="center_horizontal"
  54             android:background="#aaaa00"
  55             android:layout_width="wrap_content"
  56             android:layout_height="fill_parent"
  57             android:layout_weight="1"/>
  58
  59     &lt;/LinearLayout>
  60
  61     &lt;LinearLayout
  62         android:orientation="vertical"
  63         android:layout_width="fill_parent"
  64         android:layout_height="fill_parent"
  65         android:layout_weight="1">
  66
  67         &lt;TextView
  68             android:text="row one"
  69             android:textSize="15pt"
  70             android:layout_width="fill_parent"
  71             android:layout_height="wrap_content"
  72             android:layout_weight="1"/>
  73
  74         &lt;TextView
  75             android:text="row two"
  76             android:textSize="15pt"
  77             android:layout_width="fill_parent"
  78             android:layout_height="wrap_content"
  79             android:layout_weight="1"/>
  80
  81         &lt;TextView
  82             android:text="row three"
  83             android:textSize="15pt"
  84             android:layout_width="fill_parent"
  85             android:layout_height="wrap_content"
  86             android:layout_weight="1"/>
  87
  88         &lt;TextView
  89             android:text="row four"
  90             android:textSize="15pt"
  91             android:layout_width="fill_parent"
  92             android:layout_height="wrap_content"
  93             android:layout_weight="1"/>
  94
  95     &lt;/LinearLayout>
  96
  97 &lt;/LinearLayout>
  98 </pre>
  99         <p>Carefully inspect the XML. You'll notice how this layout works a lot like
 100         an HTML layout. There is one parent LinearLayout that is defined to lay
 101         its child elements vertically. The first child is another LinearLayout that uses a horizontal layout
 102         and the second uses a vertical layout. Each LinearLayout contains several {@link android.widget.TextView}
 103         elements.</p>
 104 </li>
 105 <li>Now open the HelloLinearLayout Activity and be sure it loads this layout in the <code>onCreate()</code> method:</p>
 106 <pre>
 107 public void onCreate(Bundle savedInstanceState) {
 108     super.onCreate(savedInstanceState);
 109     setContentView(R.layout.main);
 110 }
 111 </pre>
 112 <p><code>R.layout.main</code> refers to the <code>main.xml</code> layout file.</p>
 113 </li>
 114 <li>Run it.</li>
 115 </ol>
 116 <p>You should see the following:</p>
 117 <img src="images/hello-linearlayout.png" width="150px" />
 118
 119 <p>Notice how the various XML attributes define the View's behavior.
 120 Pay attention to the effect of the <code>layout_weight</code>. Try
 121         experimenting with different values to see how the screen real estate is
 122         distributed based on the weight of each element.</p>
 123
 124 <h3>References</h3>
 125 <ul>
 126         <li>{@link android.widget.LinearLayout}</li>
 127 <li>{@link android.widget.TextView}</li>
 128 </ul>
 129
 130