Detailed explanation of the relative layout of Android RelativeLayout (series of tutorials 7)

Table of contents

Positioning according to sibling components

Introduction to RelativeLayout

RelativeLayout relative layout is a layout method that determines the position of controls based on the parent element or sibling element as a reference.

Basic use of RelativeLayout

Use RelativeLayout relative layout in the layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#cccccc"
    tools:context=".MainActivity01">

</RelativeLayout>

Position according to parent container

The following properties are all set on the child controls of RelativeLayout.

android:layout_alignParentLeft="true": By default, the control is located on the left edge of the parent container
android:layout_alignParentRight="true" : The control is on the right edge of the parent container
android:layout_alignParentTop="true": By default, the control is at the top edge of the parent container
android:layout_alignParentBottom="true": The control is located at the bottom edge of the parent container
android:layout_centerHorizontal="true": The control is centered horizontally in the parent container
android:layout_centerVertical="true": The control is vertically centered in the parent container
android:layout_centerInParent="true": The control is centered horizontally and vertically in the parent container

The example effect is as follows:

The sample code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#cccccc"
    tools:context=".MainActivity01">

    <Button
        android:layout_width="80dp"
        android:layout_height="35dp"
        android:background="@drawable/btn_style"
        android:text="Button1" />

    <Button
        android:layout_width="80dp"
        android:layout_height="35dp"
        android:layout_alignParentRight="true"
        android:background="@drawable/btn_style"
        android:text="Button2" />

    <Button
        android:layout_width="80dp"
        android:layout_height="35dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/btn_style"
        android:text="Button3" />

    <Button
        android:layout_width="80dp"
        android:layout_height="35dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:background="@drawable/btn_style"
        android:text="Button4" />

    <Button
        android:layout_width="80dp"
        android:layout_height="35dp"
        android:layout_centerVertical="true"
        android:background="@drawable/btn_style"
        android:text="Button5" />

    <Button
        android:layout_width="80dp"
        android:layout_height="35dp"
        android:layout_centerHorizontal="true"
        android:background="@drawable/btn_style"
        android:text="Button6" />

    <Button
        android:layout_width="80dp"
        android:layout_height="35dp"
        android:layout_centerInParent="true"
        android:background="@drawable/btn_style"
        android:text="Button7" />
</RelativeLayout>

Positioning according to sibling components

The following properties are all set on the child controls of RelativeLayout.

android:layout_toLeftOf="@+id/button1": on the left of the button1 control
android:layout_toRightOf="@+id/button1": on the right side of the button1 control
android:layout_above="@+id/button1": above the button1 control
android:layout_below="@+id/button1": below the button1 control
android:layout_alignLeft="@+id/button1": flush with the left side of the button1 control
android:layout_alignRight="@+id/button1": flush with the right side of the button1 control
android:layout_alignTop="@+id/button1": flush with the top of the button1 control
android:layout_alignBottom="@+id/button1": flush with the bottom of the button1 control

It's not easy to be original, just give it a thumbs up and leave. . .