Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 1 | page.title=Relative Layout |
Scott Main | 64461bf | 2013-04-11 19:32:08 -0700 | [diff] [blame] | 2 | page.tags="relativelayout" |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 3 | @jd:body |
| 4 | |
| 5 | <div id="qv-wrapper"> |
| 6 | <div id="qv"> |
| 7 | <h2>In this document</h2> |
| 8 | <ol> |
| 9 | <li><a href="#Position">Positioning Views</a></li> |
| 10 | <li><a href="#Example">Example</a></li> |
| 11 | </ol> |
| 12 | <h2>Key classes</h2> |
| 13 | <ol> |
| 14 | <li>{@link android.widget.RelativeLayout}</li> |
| 15 | <li>{@link android.widget.RelativeLayout.LayoutParams}</li> |
| 16 | </ol> |
| 17 | </div> |
| 18 | </div> |
| 19 | |
| 20 | <p>{@link android.widget.RelativeLayout} is a view group that displays child views in relative |
| 21 | positions. The position of each view can be specified as relative to sibling elements (such as to |
| 22 | the left-of or below another view) or in positions relative to the parent {@link |
| 23 | android.widget.RelativeLayout} area (such as aligned to the bottom, left of center).</p> |
| 24 | |
| 25 | <img src="{@docRoot}images/ui/relativelayout.png" alt="" /> |
| 26 | |
| 27 | <p>A {@link android.widget.RelativeLayout} is a very powerful utility for designing a user interface |
| 28 | because it can eliminate nested view groups and keep your layout hierarchy flat, which improves |
| 29 | performance. If you find yourself using several nested {@link android.widget.LinearLayout} groups, |
| 30 | you may be able to replace them with a single {@link android.widget.RelativeLayout}.</p> |
| 31 | |
| 32 | |
| 33 | <h2 id="Position">Positioning Views</h2> |
| 34 | |
| 35 | <p>{@link android.widget.RelativeLayout} lets child views specify their position relative to the |
| 36 | parent view or to each other (specified by ID). So you can align two elements by right border, or |
| 37 | make one below another, centered in the screen, centered left, and so on. By default, all child |
| 38 | views are drawn at the top-left of the layout, so you must define the position of each view |
| 39 | using the various layout properties available from {@link |
| 40 | android.widget.RelativeLayout.LayoutParams}.</p> |
| 41 | |
| 42 | <p>Some of the many layout properties available to views in a {@link android.widget.RelativeLayout} |
| 43 | include:</p> |
| 44 | <dl> |
| 45 | <dt><a |
Scott Main | f284d49 | 2012-07-31 09:46:52 -0700 | [diff] [blame] | 46 | href="{@docRoot}reference/android/widget/RelativeLayout.LayoutParams.html#attr_android:layout_alignParentTop" |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 47 | >{@code android:layout_alignParentTop}</a></dt> |
| 48 | <dd>If {@code "true"}, makes the top edge of this view match the top edge of the parent. </dd> |
| 49 | <dt><a |
Scott Main | f284d49 | 2012-07-31 09:46:52 -0700 | [diff] [blame] | 50 | href="{@docRoot}reference/android/widget/RelativeLayout.LayoutParams.html#attr_android:layout_centerVertical" |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 51 | >{@code android:layout_centerVertical}</a></dt> |
| 52 | <dd>If {@code "true"}, centers this child vertically within its parent.</dd> |
| 53 | <dt><a |
Scott Main | f284d49 | 2012-07-31 09:46:52 -0700 | [diff] [blame] | 54 | href="{@docRoot}reference/android/widget/RelativeLayout.LayoutParams.html#attr_android:layout_below" |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 55 | >{@code android:layout_below}</a></dt> |
| 56 | <dd>Positions the top edge of this view below the view specified with a resource ID.</dd> |
| 57 | <dt><a |
Scott Main | f284d49 | 2012-07-31 09:46:52 -0700 | [diff] [blame] | 58 | href="{@docRoot}reference/android/widget/RelativeLayout.LayoutParams.html#attr_android:layout_toRightOf" |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 59 | >{@code android:layout_toRightOf}</a></dt> |
| 60 | <dd>Positions the left edge of this view to the right of the view specified with a resource ID.</dd> |
| 61 | </dl> |
| 62 | |
| 63 | <p>These are just a few examples. All layout attributes are documented at {@link |
| 64 | android.widget.RelativeLayout.LayoutParams}.</p> |
| 65 | |
| 66 | <p>The value for each layout property is either a boolean to |
| 67 | enable a layout position relative to the parent {@link android.widget.RelativeLayout} or an ID that |
| 68 | references another view in the layout against which the view should be positioned.</p> |
| 69 | |
| 70 | <p>In your XML layout, dependencies against other views in the layout can be declared in any order. |
| 71 | For example, you can declare that "view1" be positioned below "view2" even if "view2" is the last |
| 72 | view declared in the hierarchy. The example below demonstrates such a scenario.</p> |
| 73 | |
| 74 | |
| 75 | <h2 id="Example">Example</h2> |
| 76 | |
| 77 | <p>Each of the attributes that control the relative position of each view are emphasized.</p> |
| 78 | <div class="figure" style="width:220px;margin-top:0"> |
| 79 | <img src="{@docRoot}images/ui/sample-relativelayout.png" alt="" /> |
| 80 | </div> |
| 81 | |
| 82 | <pre> |
| 83 | <?xml version="1.0" encoding="utf-8"?> |
| 84 | <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" |
| 85 | android:layout_width="fill_parent" |
| 86 | android:layout_height="fill_parent" |
| 87 | android:paddingLeft="16dp" |
| 88 | android:paddingRight="16dp" > |
| 89 | <EditText |
| 90 | android:id="@+id/name" |
| 91 | android:layout_width="fill_parent" |
| 92 | android:layout_height="wrap_content" |
| 93 | android:hint="@string/reminder" /> |
| 94 | <Spinner |
| 95 | android:id="@+id/dates" |
| 96 | android:layout_width="0dp" |
| 97 | android:layout_height="wrap_content" |
| 98 | <strong>android:layout_below="@id/name"</strong> |
| 99 | <strong>android:layout_alignParentLeft="true"</strong> |
| 100 | <strong>android:layout_toLeftOf="@+id/times"</strong> /> |
| 101 | <Spinner |
| 102 | android:id="@id/times" |
| 103 | android:layout_width="96dp" |
| 104 | android:layout_height="wrap_content" |
| 105 | <strong>android:layout_below="@id/name"</strong> |
| 106 | <strong>android:layout_alignParentRight="true"</strong> /> |
| 107 | <Button |
| 108 | android:layout_width="96dp" |
| 109 | android:layout_height="wrap_content" |
| 110 | <strong>android:layout_below="@id/times"</strong> |
| 111 | <strong>android:layout_alignParentRight="true"</strong> |
| 112 | android:text="@string/done" /> |
| 113 | </RelativeLayout> |
| 114 | </pre> |
| 115 | |
| 116 | <p>For details about all the layout attributes available to each child view of a {@link |
| 117 | android.widget.RelativeLayout}, see {@link android.widget.RelativeLayout.LayoutParams}.</p> |