Tìm hiểu về RelativeLayout trong Android

Khi nhắc đến UI Layout trong Android không thể không nói đến RelativeLayout. Vậy RelativeLayout trong Android là gì? Có mấy cách khai báo RelativeLayout trong Android? Sử dụng RelativeLayout như thế nào?

Bây giờ tôi cùng các bạn sẽ trả lời lần lượt các câu hỏi được đặt ra ở trên.

1. RelativeLayout trong Android là gì?

RelativeLayout trong Android là một view group, các view con được sắp xếp tùy ý dựa vào id của view con nào đó. Các view con được sắp xếp theo view con trước đó dựa vào thuộc tính android:layout_below=”id_view_con”.    Ngoài ra còn căn chỉnh theo RelativeLayout (bên dưới, bên trái, bên phải) bởi thuộc tính android:layout_alignParentBottom=”true”.

2. Cách khái báo RelativeLayout trong Android

RelativeLayout trong Android được khi báo như sau.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
//todo
</RelativeLayout>

3. Các thuộc tính của Relative Layout trong Android

Một số thuộc tính quan trọng cần nắm về RelativeLayout.

Theo mặc định các view con được vẽ ở phía trên cùng bên trái của Layout. Vì vậy cần xác định vị trí của mỗi view bằng cách sử dụng các thuộc tính có sẵn từ RelativeLayout.LayoutParams như dưới đây.

Để có cái nhìn thực tế về RelativeLayout, mời các bạn đến với ví dụ sau đây.

4. Ví dụ sử dụng RelativeLayout trong Android

Đến với ví dụ sử dụng RelativeLayout tôi thiết kế giao diện đăng nhập như bên dưới. Các bạn có thể download source code ngay bên dưới đây.

Sau đây là 5 bước chuẩn để thực hiện quá trình tạo Project sử dụng RelativeLayout trong Android.

Với ví dụ sử dụng RelativeLayout trong Android tôi sẽ thiết kế giao diện đăng nhập như sau.

Cấu trúc project ví dụ sử dụng RelativeLayout.

Nội dung file relative_layout_activity.xml

<?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="wrap_content">

    <EditText android:id="@+id/inputEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/email"
       />

    <Button android:id="@+id/btnLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/inputEmail"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="10px"
        android:text="@string/btn_login" />

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/btnLogin"
        android:layout_alignTop="@id/btnLogin"
        android:text="@string/btn_cancel" />

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="@string/btn_register"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

Kết quả sau khi chạy ví dụ RelativeLayout trong Android

Lời kết: Sau khi đã tìm hiểu về RelativeLayout trong Android các bạn cần nắm khái niệm UI Layout trong Android, UI Layout là gì?. Ngoài ra các bạn có thể xem thêm các nội dung khác trong chuyên mục lập trình Android được chia sẻ với Team Việt Dev.

Xem thêm các layout khác tại đây.

Sử dụng Linear Layout trong Android

Đang cập nhật…

(Tác giả: Team Việt Dev)