RelativeLayout and LinearLayout in Android

Relative Layout

A RelativeLayout is a ViewGroup that displays child view in a relative position. The position of each view can be relative to the sibling, (like on the left or below another view), or relative to the position of the main area of the relative layout, like bottom, left, or center.

This layout is very flexible, Android is used to customize. This layout allows us to position our view or components based on the position of relative or sibling views. Using this layout you can position a view to be toLeftOf, toRightOf, below, or above its siblings. This layout is simple because you can place views anywhere.

RelativeLayout Syntax

1
2
3
4
<RelativeLayout
  android:layput_width="match_parent"
  android:layput_height="match_parent"
</RelativeLayout>

RelativeLayout attributes
The following are a few important attributes specified to RelativeLayout.

• android:layout_alignParentBottom: This attribute is used to place the bottom of the element on the bottom of the container. You can change layout_align parent like top, left, and right.

• android:layout_centerHorizontal: This attribute is used to center the element horizontally within its parent container. You can change layout_center like layout_centerVertical or layout_centerInParent.

Using layout_centerInParent, attributes are used to center the element both horizontally and vertically within its container.

• android:layout_above: With the help of this attribute, we can place the element above the specified element.

• android:layout_below: With the help of this attribute, we can place the element below the specified element.

• android:layout_toLeftOf: With the help of this attribute, we can place the view in the left of the specified view ID.

• android:layout_toRightOf: With the help of this attribute, we can place the view in the right of the specified view ID.

• android:layout_alignBaseline: With the help of this attribute, we can align the baseline of the new view with the baseline of the specified view ID.

• android:layout_alignBottom: With the help of this attribute, we can
  align the bottom of the view with the bottom of the specified view ID.

• android:layout_alignLeft: With the help of this attribute, we can align the left edge of the new view with the left edge of the specified view ID.

• android:layout_alignRight: With the help of this attribute, we can align the right edge of the new view with the right edge of the specified view ID.

• android:layout_alignTop: With the help of this attribute, we can place the top of the new view in alignment with the top of the specified view ID.

Linear Layout

LinearLayout is a ViewGroup that displays the view horizontally or vertically. This is the simplest layout, it can arrange elements one after another vertically or horizontally. The attributes are used to position control in this layout. You can specify whether that line is horizontal or vertical by using the android:orientation attribute. By default, orientation is horizontal. Horizontal orientation will only have one single row of elements on the screen and in the case of vertical orientation, it will only have one child per row. One more important attribute in a linear layout is the android:layout_weight attribute which assigns weights to elements. An element with a larger weight will occupy more screen space even though the importance of the element is more.

LinearLayout Syntax

1
2
3
4
5
<LinearLayout
  android:layput_width="match_parent"
  android:layput_height="match_parent"
  android:orientation="vertical or Horizontal"
</LinearLayout>

LinearLayout attributes

The following are a few important attributes specified to LinearLayout.

• android:orientation: Using this attribute, we can specify the direction of arrangement. We will use horizontal for a row, and vertical for a column. This attribute by default is horizontal.

• android:gravity: This attribute is used to specify how an object should position its content, on both the X and Y axes. The possible object values are top, bottom, left, right, center, center_vertical, center_horizontal, etc.

• android:divider: This attribute is drawable to use as a vertical divider between buttons.

• android:baselineAligned: This attribute must be a boolean value, either true or false, and it prevents the layout from aligning its children’s baselines.

• android:weightSum: This attribute is used to sum up a child’s weight.

Example

Relative Layout

activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  android:layput_width="match_parent"
  android:layput_height="match_parent"
  tools:context=".MainActivity">

  <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="SIGN IN"
        android:id="@+id/textView3"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />
  <TextView
        android:id="@+id/tv_userName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginTop="110dp"
        android:text="UserName:"
        android:textColor="#000000"
        android:textSize="20sp" />
  <TextView
        android:id="@+id/tv_password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_userName"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:text="Password:"
        android:textColor="#000000"
        android:textSize="20sp" />
  <EditText
        android:id="@+id/edt_userName"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginTop="100dp"
        android:layout_toRightOf="@+id/tv_userName"
        android:hint="User Name" />
  <EditText
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:layout_below="@+id/edt_userName"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/tv_password"
        android:hint="Password" /> 
  <Button
        android:id="@+id/btn_Login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_password"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="#03B424"
        android:text="Login"
        android:textColor="#ffffff"
        android:textStyle="bold" />
</RelativeLayout>

Output

Linear Layout

activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  android:layput_width="match_parent"
  android:layput_height="match_parent"
  android:orientation="vertical"
  tools:context=".MainActivity">

    <Button
        android:id="@+id/bt1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON1" />

    <Button
        android:id="@+id/bt2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON2" />

    <Button
        android:id="@+id/bt3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON3" 
        android:layout_weight="1"/>

    <Button
        android:id="@+id/bt4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON4" 
        android:layout_weight="1"/>

</LinearLayout>

Output