Relative Layout

RelativeLayout là layout mà nó hiện thị các view con nó chứa ở các vị trí trong mối liên hệ của chúng với nhau (như View con này nằm dưới một View con khác, View con này nằm bên trái một View con khác …), kể cả mối liên hệ của chúng với chính phần tử cha RelativeLayout (như căn thẳng theo cạnh đấy của phần tử cha, nằm giữa phần tử cha, nằm bên trái phần tử cha …).

RelativeLayout là một layout hết sức mạnh mẽ về độ tiện lợi và hiệu quả, nếu giao diện không ở mức quá phức tạp việc chọn RelativeLayout mạng lại hiệu suất còn tốt hơn ConstraintLayout. RelativeLayout dùng khi đơn giản, ConstraintLayout khi giao diện phức tạp.

Khi các View con đưa vào RelativeLayout nếu chưa có thiết lập mối liên hệ qua lại nào với phần tử cha hay với phần tử View con khác thì nó sẽ được định vị ở góc trên – trái của RelativeLayout. Như trường hợp dưới đây cả 3 View con không có thiết lập mối liên hệ nào, nên nó đều định vị ở góc trên / trái và vẽ chồng nên nhau, View con nào xếp sẽ ở lớp trên của màn hình.

<?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:layout_margin="8dp"
    android:background="#e2e3eb">

    <TextView
        android:id="@+id/view1"
        android:text="view1"
        android:gravity="center"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:background="#e8d33636" />

    <TextView
        android:id="@+id/view2"
        android:text="view2"
        android:gravity="center"
        android:layout_width="50dp"
        android:layout_height="200dp"
        android:background="#e71faf15" />
    <TextView
        android:id="@+id/view3"
        android:text="view3"
        android:gravity="center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#d4a00f8f" />
</RelativeLayout>

Mô tả một vài thuộc tính:

android:layout_alignParentTop

– Nếu “true”, cạnh trên của View sẽ trùng với cạnh trên của thành phần cha.

android:layout_centerVertical

– Nếu “true”, View này sẽ được xếp vào giữa theo chiều dọc của thành phần cha.

android:layout_below

– View sẽ nằm dưới một view khác, và xác định view đó qua id.

android:layout_toRightOf

– View sẽ nẳm bên phải so với một View khác.

Khai báo RelativeLayout

Ví dụ về một Relative Layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <EditText
        android:id="@+id/txtUsername"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="Username"
        android:inputType="text" />

    <EditText
        android:id="@+id/txtPassword"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/txtUsername"
        android:hint="Password"
        android:inputType="textPassword"
        android:layout_marginBottom="10dp" />

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/txtPassword"
        android:layout_centerHorizontal="false"
        android:layout_centerInParent="false"
        android:layout_centerVertical="false"
        android:layout_marginRight="10dp"
        android:background="#FFD57D"
        android:text="Login" />

    <Button
        android:id="@+id/btnClear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="false"
        android:layout_alignTop="@id/btnLogin"
        android:layout_toRightOf="@id/btnLogin"
        android:background="#FF9900"
        android:text="Clear" />
    <!-- btnGoHome position relative to parent layout -->

    <Button
        android:id="@+id/btnGoHome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="#319DEA"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:text="Go to Home Page"
        android:textColor="#FFFFFF" />

</RelativeLayout>

Với thiết kế này, chúng ta có kết quả như sau:

Bảng danh sách các thuộc tính canh phần tử xuất hiện như thế nào so với các phần tử khác được liệt kê phía sau:

Tên thuộc tính	Mô tả
android:layout_above	Đặt phần tử hiện tại nằm kế sau phần tử có id được chỉ ra
android:layout_alignBaseline	Đặt phần tử này lên cùng dòng với phần tử có id được chỉ ra
android:layout_alignBottom	Canh sao cho đáy của phần tử hiện thời trùng với đáy của phần tử có id được chỉ ra
android:layout_alignLeft	Đặt cạnh trái của phần tử hiện thời trùng với cạnh trái của phần tử có id được chỉ ra
android:layout_alignParentBottom	Nếu thiết lập là true thì phần tử hiện thời sẽ được canh xuống đáy của phần tử chứa nó
android:layout_alignParentLeft	Nếu được thiết lập là true thì phần tử hiện thời sẽ canh trái so với phần tử chứa nó
android:layout_alignParentRight	Nếu được thiết lập là true thì phần tử hiện thời sẽ canh phải so với phần tử chứa nó
android:layout_alignParentTop	Nếu được thiết lập là true thì phần tử hiện thời sẽ canh lên đỉnh phần tử chứa nó
android:layout_alignRight	Canh cạnh phải của phần tử hiện thời trùng với cạnh phải của phần tử có id được chỉ ra
android:layout_alignTop	Canh đỉnh của phần tử hiện thời trùng với đỉnh của phần tử có id được chỉ ra
android:layout_alignWithParentIfMissing	Nếu thiết lập là true, thì phần tử sẽ được canh theo phần tử chứa nó nếu các thuộc tính canh của phần tử không có
android:layout_below	Đặt phần tử hiện thời ngay sau phần tử có id được chỉ ra
android:layout_centerHorizontal	Nếu thiết lập là true thì phần tử hiện thời sẽ được canh giữa theo chiều ngang phần tử chứa nó
android:layout_centerInParent	Nếu thiết lập là true thì phần tử hiện thời sẽ được canh chính giữa theo chiều phải trái và trên dưới so với phần tử chứa nó
android:layout_centerVertical	Nếu thiết lập là true thì phần tử hiện thời sẽ được canh chính giữa theo chiều dọc phần tử chứa nó
android:layout_toLeftOf	Đặt cạnh phải của phần tử hiện thời trùng với cạnh trái của phần tử có id được chỉ ra
android:layout_toRightOf	Đặt cạnh trái của phần tử hiện thời trùng với cạnh phải của phần tử có id được chỉ ra

Source code của ví dụ minh họa
Download