Linear Layout

 

 

LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the Android:Orientation attribute.

All children of a LinearLayout are stacked one after the other, so a vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high (the height of the tallest child, plus padding). A LinearLayout respects margins between children and the gravity (right, center, or left alignment) of each child.

Layout Weight

 

 

 

LinearLayout also supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an “importance” value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.

Equal distribution

 

 

 

To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1".

Unequal distribution  

 

 

You can also create linear layouts where the child elements use different amounts of space on the screen:

 

  • f there are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight doesn’t grow. Instead, this third text field occupies only the area required by its content. The other two text fields, on the other hand, expand equally to fill the space remaining after all three fields are measured.
  • If there are three text fields and two of them declare a weight of 1, while the third field is then given a weight of 2 (instead of 0), then it’s now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.

The following code snippet shows how layout weights might work in a “send message” activity. The To field, Subject line, and Send button each take up only the height they need. This configuration allows the message itself to take up the rest of the activity’s height.

 

 

Relative Layout

 

RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"
   
android:paddingLeft="16dp"
   
android:paddingRight="16dp"
   
android:orientation="vertical" >
   
<EditText
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:hint="@string/to" />
   
<EditText
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:hint="@string/subject" />
   
<EditText
       
android:layout_width="match_parent"
       
android:layout_height="0dp"
       
android:layout_weight="1"
       
android:gravity="top"
       
android:hint="@string/message" />
   
<Button
       
android:layout_width="100dp"
       
android:layout_height="wrap_content"
       
android:layout_gravity="right"
       
android:text="@string/send" />
</LinearLayout>






RelativeLayout is a very powerful utility for designing a user interface because it can eliminate nested view groups and keep your layout hierarchy flat, which improves performance. If you find yourself using several nested LinearLayout groups, you may be able to replace them with a single RelativeLayout

Positioning Views

 

 

RelativeLayout lets child views specify their position relative to the parent view or to each other (specified by ID). So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. By default, all child views are drawn at the top-left of the layout, so you must define the position of each view using the various layout properties available from RelativeLayout.LayoutParams.

Some of the many layout properties available to views in a RelativeLayout include:

android:layout_alignParentTop
If "true", makes the top edge of this view match the top edge of the parent.
android:layout_centerVertical
If "true", centers this child vertically within its parent.
android:layout_below
Positions the top edge of this view below the view specified with a resource ID.
android:layout_toRightOf
Positions the left edge of this view to the right of the view specified with a resource ID.

These are just a few examples. All layout attributes are documented at RelativeLayout.LayoutParams.

The value for each layout property is either a boolean to enable a layout position relative to the parent RelativeLayout or an ID that references another view in the layout against which the view should be positioned.

In your XML layout, dependencies against other views in the layout can be declared in any order. For example, you can declare that “view1” be positioned below “view2” even if “view2” is the last view declared in the hierarchy. The example below demonstrates such a scenario.

 

 

 

Example

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"
   
android:paddingLeft="16dp"
   
android:paddingRight="16dp" >
   
<EditText
       
android:id="@+id/name"
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:hint="@string/reminder" />
   
<Spinner
       
android:id="@+id/dates"
       
android:layout_width="0dp"
       
android:layout_height="wrap_content"
       
android:layout_below="@id/name"
       
android:layout_alignParentLeft="true"
       
android:layout_toLeftOf="@+id/times" />
   
<Spinner
       
android:id="@id/times"
       
android:layout_width="96dp"
       
android:layout_height="wrap_content"
       
android:layout_below="@id/name"
       
android:layout_alignParentRight="true" />
   
<Button
       
android:layout_width="96dp"
       
android:layout_height="wrap_content"
       
android:layout_below="@id/times"
       
android:layout_alignParentRight="true"
       
android:text="@string/done" />
</RelativeLayout>