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 <?xml version="1.0" encoding="utf-8"?> 16 <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 <LinearLayout 22 android:orientation="horizontal" 23 android:layout_width="fill_parent" 24 android:layout_height="fill_parent" 25 android:layout_weight="1"> 26 27 <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 <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 <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 <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 </LinearLayout> 60 61 <LinearLayout 62 android:orientation="vertical" 63 android:layout_width="fill_parent" 64 android:layout_height="fill_parent" 65 android:layout_weight="1"> 66 67 <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 <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 <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 <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 </LinearLayout> 96 97 </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 131
