Relative Layout In Android With Example

The Relative Layout is very flexible layout used in android for custom layout designing. It gives us the flexibility to position our component/view based on the relative or sibling component’s position. Just because it allows us to position the component anywhere we want so it is considered as most flexible layout. For the same reason Relative layout is the most used layout after the 线性布局 in Android. It allow its child view to position relative to each other or relative to the container or another container.

In Relative Layout, you can use “above, below, left and right” to arrange the component’s position in relation to other component. For example, in the below image you can see content is placed in related to Heading.

Even though Android has drag and drop system to put one component in related to other inside relative layout. But actually in the background lots of XML properties are working which does this task. So Android developer can design UI either using drag & drop or using XML code. Professional developer uses both for designing UI.

---

Attributes of Relative layout:

Lets see different properties of Relative Layout which will be used while designing Android App UI:

1.above: Position the bottom edge of the view above the given anchor view ID and must be a reference of the another resource in the form of id. Example, android:layout_above=”@+id/textView” .

For example, suppose a view with id textview2 is what we want to place above another view with id textview. Below is the code and layout image.

<文本视图
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:textAppearance=“？android:attr/textAppearanceLarge”
        android:text="Text2"
        android:id=“@+id/textView2”
        android:layout_above="@+id/textView"
        android:layout_marginBottom="100dp"
        android:layout_centerHorizontal="true"/>

2. alignBottom: alignBottom is used to makes the bottom edge of the view match the bottom edge of the given anchor view ID and it must be a reference to another resource, in the form of id. Example: android:layout_ alignBottom =”@+id/button1″

In the below example we have aligned a view with id textView2 Bottom of another view with id textView. Below is the coded and layout image.

<文本视图
    android:layout\u width=“包装内容”
    android:layout\u height=“包装内容”
    android:textAppearance=“？android:attr/textAppearanceLarge”
    android:layout\u centerHorizontal=“真”    
    android:id=“@+id/textView2”
    android:layout_alignBottom="@+id/textView"
    android:text="Text2 alignBottom of Text1"
    android:layout\u marginBottom=“90dp”
/>

3、左对齐： alignLeft用于使视图的左边缘与给定锚定视图ID的左边缘匹配，并且必须是对其他资源的引用，例如：android:layout\uAlignLeft=“@+ID/button1”。

下面是代码和布局图像，其中我们将id为textView2的视图与id为textView的另一个视图左对齐。

<!-- 文本视图2对齐文本视图的左侧-->
<文本视图
    android:layout\u width=“包装内容”
    android:layout\u height=“包装内容”
    android:textAppearance=“？android:attr/textAppearanceLarge”
    android:id=“@+id/textView2”
    android:layout\u alignLeft=“@+id/文本视图”
    android:text=“Text2对齐Text1的左侧”
    android:layout\u below=“@+id/文本视图” 
    android:layout\u marginTop=“20dp”/>

4、右对齐： alignRight属性用于使此视图的右边缘与给定锚定视图ID的右边缘匹配，并且必须是对其他资源的引用，格式如下示例：android:layout\u alignRight=“@+ID/button1”

下面是代码和布局图像，其中我们将id为textView2的视图与id为textView的另一个视图的右侧对齐。

<!-- 文本视图2对齐文本视图的右侧-->
<文本视图
    android:layout\u width=“包装内容”
    android:layout\u height=“包装内容”
    android:textAppearance=“？android:attr/textAppearanceLarge”
    android:id=“@+id/textView2”
    android:layout\u alignRight=“@+id/文本视图”
    android:text=“Text2对齐Text1的右侧”
    android:layout\u below=“@+id/文本视图”
    android:layout\u marginTop=“20dp”/>

5.对齐开始： alignStart属性用于使此视图的开始边缘与给定锚定视图ID的开始边缘匹配，并且必须是对另一个资源的引用，格式如下示例：android:layout\u alignStart=“@+ID/button1”

下面是alignStart代码和布局图像，其中我们将id为textView2的视图与id为textView的另一个视图的开始对齐。

<!-- Text2 alignStart-->
<文本视图
    android:layout\u width=“包装内容”
    android:layout\u height=“包装内容”
    android:textAppearance=“？android:attr/textAppearanceLarge”
    android:id=“@+id/textView2”
    android:text=“Text2对齐Text1的开头”
    android:layout\u alignStart=“@+id/文本视图”
 />

6、alignTop： alignTop属性用于使此视图的上边缘与给定锚定视图ID的上边缘匹配，并且必须是对其他资源的引用，格式如下示例：android:layout\u alignTop=“@+ID/button1”。

下面是alignTop代码和布局图像，其中我们将id为的视图与id为的另一个图像的文本视图顶部对齐 imageView.

<文本视图
    android:layout\u width=“包装内容”
    android:layout\u height=“包装内容”
    android:textAppearance=“？android:attr/textAppearanceLarge”
    android:id=“@+id/textView”
    android:layout\u alignTop=“@+id/图像视图”
    android:text="Text Here is AlignTop on Image"
     />

7.alignParentBottom: If alignParentBottom property is true, makes the bottom edge of this view match the bottom edge of the parent. The value of align parent bottom is either true or false. Example: android:layout_alignParentBottom=”true”

重要提示：alignParentBottom and alignBottom are two different properties. In alignBottom we give the reference of another view in the form of id that the view is aligned at the bottom of referenced view but in alignParentBottom the bottom edge of the view matches the bottom edge of the parent.

Below is the alignParentBottom code and layout image in which textView is simply displayed using the alignParentBottom.

<文本视图
    android:layout\u width=“包装内容”
    android:layout\u height=“包装内容”
    android:textAppearance=“？android:attr/textAppearanceLarge”
    android:id=“@+id/textView”
    android:text="Text Here is AlignParentBottom with bottom margin of 120dp"
    android:layout_alignParentBottom="true"
    android:layout\u alignParentLeft=“true”
    android:layout\u alignParentStart=“true”
    android:layout_marginBottom="120dp" />

8. alignParentEnd: If alignParentEnd property is true, then it makes the end edge of this view match the end edge of the parent. The value of align parent End is either true or false. Example: android:layout_alignParentEnd=”true”.

重要提示： In alignParentEnd the bottom edge of the view matches the bottom edge of the parent.

Below is the alignParentEnd code and layout image in which textView is simply displayed on Image in the end.

<文本视图
    android:layout\u width=“包装内容”
    android:layout\u height=“包装内容”
    android:textAppearance=“？android:attr/textAppearanceLarge”
    android:id=“@+id/textView”
    android:text="Text in Parent End"
    android:layout\u alignBottom=“@+id/图像视图”
    android:layout_alignParentEnd="true"
 />

9. alignParentLeft: If alignParentLeft property is true, makes the left edge of this view match the left edge of the parent. The value of align parent left is either true or false. Example: android:layout_alignParentLeft=”true”.

重要提示： alignParentLeft and alignLeft are two different properties. In alignLeft we give the reference of another view in the form of id that the view is aligned to the left of the referenced view but in alignParentLeft the left edge of the view matches the left edge of the parent.

下面是alignParentLeft示例代码和布局图像，其中textView仅显示在左侧的父图像上。

<!-- 在Android中左对齐父对象-->
<文本视图
    android:layout\u width=“包装内容”
    android:layout\u height=“包装内容”
    android:textAppearance=“？android:attr/textAppearanceLarge”
    android:id=“@+id/textView”
    android:text=“父级中的文本左侧” 
    android:layout\u alignBottom=“@+id/图像视图”
    android:layout\u alignParentLeft=“true”
     />

10、alignParentRight： 如果alignParentRight属性为true，则会使此视图的右边缘与父视图的右边缘匹配。align parent right的值为true或false。示例：android:layout\u alignParentRight=“true”。

重要提示： alignParentRight和alignRight是两个不同的属性。在alignRight中，我们以id的形式给出另一个视图的引用，该视图与引用视图的右侧对齐，但在alignParentRight中，视图的右边缘与父视图的右边缘匹配。

下面是alignParentRight示例代码和布局图像，其中textView仅显示在右侧的父图像上。

<!-- alignRightParent示例-->
<文本视图
    android:layout\u width=“包装内容”
    android:layout\u height=“包装内容”
    android:textAppearance=“？android:attr/textAppearanceLarge”
    android:id=“@+id/textView”
    android:text=“父权限中的文本”
    android:layout\u alignBottom=“@+id/图像视图”
    android:layout\u alignParentRight=“true”
  />

11.alignParentStart： 如果alignParentStart为true，则会使此视图的起始边与父视图的起始边匹配。align parent start的值为true或false。示例：android:layout\u alignParentStart=“true”。

重要提示： alignParentStart和alignStart是两个不同的属性，在alignStart中，我们以id的形式提供另一个视图的引用，该视图在引用视图的开始处对齐，但在alignParentStart中，视图的开始边缘与父视图的开始边缘匹配(RelativeLayout).

下面是alignParentStart示例代码和布局图像，其中textView仅显示在右侧的父图像上。

<!-- alignParentStart示例-->
<文本视图
    android:layout\u width=“包装内容”
    android:layout\u height=“包装内容”
    android:textAppearance=“？android:attr/textAppearanceLarge”
    android:id=“@+id/textView”
    android:text=“父级开始中的文本”
    android:layout\u alignTop=“@+id/图像视图”
    android:layout\u alignParentStart=“true”
     />

12.alignParentTop： 如果alignParentTop为true，则会使此视图的顶边与父视图的顶边匹配。align parent Top的值为true或false。示例：android:layout\u alignParenTop=“true”。

重要提示： alignParentTop和alignTop是两个不同的属性，在alignTop中，我们以id的形式提供另一个视图的引用，该视图与被引用视图的顶部对齐，但在alignParentTop中，视图的顶边与父视图的顶边匹配(RelativeLayout).

下面是alignParentTop属性和布局图像的示例代码。

<!-- alignParentTop示例-->
<文本视图
    android:layout\u width=“包装内容”
    android:layout\u height=“包装内容”
    android:text=“Text1对齐父顶部”
    android:layout\u alignParentTop=“true”
    android:layout\u margin=“20dp”
    android:textSize=“20sp”
    android:textColor=“#000”/>

13.centerInParent： 如果“父视图中的中心”（center in parent）为true，则使视图垂直和水平位于屏幕的中心。父级中的中心值为true或false。示例：android:layout\u centerInParent=“true”。

下面是centerInParent属性和布局图像的示例代码。

<!-- centerInParent示例-->
<文本视图
    android:layout\u width=“包装内容”
    android:layout\u height=“包装内容”
    android:text=“父级中的Text1中心”
    android:layout\u centerInParent=“true”
    android:textSize=“20sp”
    android:textColor=“#000”
/>

14.中心水平： 如果centerHorizontal属性为true，则使视图水平居中。centerHorizontal的值为true或false。示例：android:layout\u centerHorizontal=“true”。

下面是centerHorizontal属性和布局图像的示例代码。

<!-- 中心水平示例-->
<文本视图
    android:layout\u width=“包装内容”
    android:layout\u height=“包装内容”
    android:text=“Text1水平居中”
    android:layout\u centerHorizontal=“真”
    android:textSize=“20sp”
    android:textColor=“#000”
/>

15.中心垂直： 如果centerVertical属性为true，请使视图垂直居中。align parent bottom的值为true或false。示例：android:layout\u centerVertical=“true”。

下面是centerVertical属性和布局图像的示例代码。

<!-- 中心垂直示例-->
<文本视图
    android:layout\u width=“包装内容”
    android:layout\u height=“包装内容”
    android:text=“Text1中心垂直”
    android:layout\u centerVertical=“真”
    android:textSize=“20sp”
    android:textColor=“#000”
/>

---

相关布局示例及代码和说明：

示例1： 在这里，我们正在设计一个简单的登录屏幕 Android Studio 使用相对布局。以下是最终输出：

下面是activity\u main的代码。xml 要设计包含解释的UI，请执行以下操作：

<?xml版本=“1.0”编码=“utf-8”？>

<!--使用相对布局-->

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"
    android:layout\u width=“匹配父项”
    android:layout\u height=“match\u parent”>

    <!--用于在UI顶部显示登录文本的文本视图-->

    <文本视图
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:textAppearance=“？android:attr/textAppearanceLarge”
        android:text=“登录”
        android:id=“@+id/textView3”
        android:layout\u alignParentTop=“true”
        android:layout\u centerHorizontal=“真”/>

    <!--显示用户名的文本视图-->

    <文本视图
        android:id=“@+id/用户名”
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:layout\u marginLeft=“@dimen/activity\u horizontal\u margin”
        android:layout\u marginTop=“110dp”
        android:text=“用户名：”
        android:textColor=“#000000”
        android:textSize=“20sp”/>

    <!--显示密码的文本视图-->

    <文本视图
        android:id=“@+id/密码”
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:layout\u below=“@+id/用户名”
        android:layout\u margin=“@尺寸/活动\u水平\u margin”
        android:text=“密码：”
        android:textColor=“#000000”
        android:textSize=“20sp”/>

    <!--编辑用于填充用户名的文本-->

    <编辑文本
        android:id=“@+id/edt\u用户名”
        android:layout\u width=“填充父对象”
        android:layout\u height=“40dp”
        android:layout\u marginLeft=“@dimen/activity\u horizontal\u margin”
        android:layout\u marginTop=“100dp”
        android:layout\u toRightOf=“@+id/用户名”
        android:hint=“用户名”/>

    <!--编辑用于填写密码的文本-->

    <编辑文本
        android:layout\u width=“填充父对象”
        android:layout\u height=“40dp”
        android:layout\u below=“@+id/edt\u用户名”
        android:layout\u centerVertical=“真”
        android:layout\u toRightOf=“@+id/密码”
        android：提示=“密码”/>

    <!--填写详细信息后单击的按钮-->

    <按钮
        android:id=“@+id/btnLogin”
        android:layout\u width=“包装内容”
        android:layout\u height=“包装内容”
        android:layout\u below=“@+id/密码”
        android:layout\u centerHorizontal=“真”
        android:layout\u marginTop=“20dp”
        android：背景=“#03B424”
        android:text=“登录”
        android:textColor=“#ffffff”
        android:textStyle=“bold”/>


</RelativeLayout>

输出：

---

线性布局和相对布局之间的差异：

相对布局：

• 相对布局的每个元素都将自己排列到另一个元素或父元素。
• 在一个接一个地添加视图等时很有用
• 在相对布局中，可以为每个子级指定一个布局属性，该属性精确指定其相对于父级或相对于其他子级的位置。
• 视图可以层叠在一起。

线性布局：

• 在一个 线性布局，正如名称所示，所有元素都以线性方式垂直或水平显示。
• 无论是水平还是垂直，此行为都是在android中设置的：方向是节点的属性 线性布局.

  android:orientation=“水平”或android:orientation=“垂直”

• 线性布局将每个孩子一个接一个地水平或垂直排成一行。

继续阅读：

• Android Studio中的线性布局教程及示例
• Android Studio中的绝对布局教程及示例
• Android Studio中的框架布局教程及示例
• Android Studio中的适配器教程及示例
• Android Studio中的BaseAdapter教程及示例