1 page.title=Linear Layout 2 parent.title=Hello, Views 3 parent.link=index.html 4 @jd:body 5 6 <p>{@link android.widget.LinearLayout} is a {@link android.view.ViewGroup} that displays child 7 {@link android.view.View} elements in a linear direction, either vertically or horizontally.</p> 8 9 <p>You should be careful about over-using the {@link android.widget.LinearLayout}. If you begin 10 nesting multiple {@link android.widget.LinearLayout}s, you may want to consider using a {@link 11 android.widget.RelativeLayout} instead.</p> 12 13 <ol> 14 <li>Start a new project named <em>HelloLinearLayout</em>.</li> 15 <li>Open the <code>res/layout/main.xml</code> file and insert the following: 16 <pre> 17 <?xml version="1.0" encoding="utf-8"?> 18 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 19 android:orientation="vertical" 20 android:layout_width="fill_parent" 21 android:layout_height="fill_parent"> 22 23 <LinearLayout 24 android:orientation="horizontal" 25 android:layout_width="fill_parent" 26 android:layout_height="fill_parent" 27 android:layout_weight="1"> 28 <TextView 29 android:text="red" 30 android:gravity="center_horizontal" 31 android:background="#aa0000" 32 android:layout_width="wrap_content" 33 android:layout_height="fill_parent" 34 android:layout_weight="1"/> 35 <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 <TextView 43 android:text="blue" 44 android:gravity="center_horizontal" 45 android:background="#0000aa" 46 android:layout_width="wrap_content" 47 android:layout_height="fill_parent" 48 android:layout_weight="1"/> 49 <TextView 50 android:text="yellow" 51 android:gravity="center_horizontal" 52 android:background="#aaaa00" 53 android:layout_width="wrap_content" 54 android:layout_height="fill_parent" 55 android:layout_weight="1"/> 56 </LinearLayout> 57 58 <LinearLayout 59 android:orientation="vertical" 60 android:layout_width="fill_parent" 61 android:layout_height="fill_parent" 62 android:layout_weight="1"> 63 <TextView 64 android:text="row one" 65 android:textSize="15pt" 66 android:layout_width="fill_parent" 67 android:layout_height="wrap_content" 68 android:layout_weight="1"/> 69 <TextView 70 android:text="row two" 71 android:textSize="15pt" 72 android:layout_width="fill_parent" 73 android:layout_height="wrap_content" 74 android:layout_weight="1"/> 75 <TextView 76 android:text="row three" 77 android:textSize="15pt" 78 android:layout_width="fill_parent" 79 android:layout_height="wrap_content" 80 android:layout_weight="1"/> 81 <TextView 82 android:text="row four" 83 android:textSize="15pt" 84 android:layout_width="fill_parent" 85 android:layout_height="wrap_content" 86 android:layout_weight="1"/> 87 </LinearLayout> 88 89 </LinearLayout> 90 </pre> 91 92 <p>Carefully inspect this XML. There is a root {@link android.widget.LinearLayout} that defines 93 its orientation to be vertical—all child {@link android.view.View}s (of which it has two) will 94 be stacked vertically. The first child is 95 another {@link android.widget.LinearLayout} that uses a horizontal orientation and the second child 96 is a {@link android.widget.LinearLayout} that uses a vertical orientation. Each of these nested 97 {@link android.widget.LinearLayout}s contain several {@link android.widget.TextView} elements, which 98 are oriented with each other in the manner defined by their parent {@link 99 android.widget.LinearLayout}.</p> 100 </li> 101 <li>Now open <code>HelloLinearLayout.java</code> and be sure it loads the 102 <code>res/layout/main.xml</code> layout in the 103 {@link android.app.Activity#onCreate(Bundle) onCreate()} method:</p> 104 <pre> 105 public void onCreate(Bundle savedInstanceState) { 106 super.onCreate(savedInstanceState); 107 setContentView(R.layout.main); 108 } 109 </pre> 110 <p>The {@link android.app.Activity#setContentView(int)} method loads the 111 layout file for the {@link android.app.Activity}, specified by the resource 112 ID — <code>R.layout.main</code> refers to the <code>res/layout/main.xml</code> layout 113 file.</p> 114 </li> 115 <li>Run the application.</li> 116 </ol> 117 <p>You should see the following:</p> 118 <img src="images/hello-linearlayout.png" width="150px" /> 119 120 <p>Notice how the XML attributes define each View's behavior. Try 121 experimenting with different values for <code>android:layout_weight</code> to see how the screen 122 real estate is distributed based on the weight of each element. See the <a 123 href="{@docRoot}guide/topics/ui/layout-objects.html#linearlayout">Common Layout Objects</a> 124 document for more about how {@link android.widget.LinearLayout} handles the 125 <code>android:layout_weight</code> attribute.</p> 126 127 <h3>References</h3> 128 <ul> 129 <li>{@link android.widget.LinearLayout}</li> 130 <li>{@link android.widget.TextView}</li> 131 </ul> 132 133 134
