Android RelativeLayout Example

Android RelativeLayout Example Introduction

In the previous section, we carried out a detailed analysis of LinearLayout. LinearLayout is also one of the more layouts we use. We prefer the weight attribute more often. The help is quite big; but there is also a problem when using LinearLayout. When the interface is more complicated, you need to nest multiple LinearLayouts. This will reduce the efficiency of UI Rendering (rendering speed). Items, the efficiency will be lower.In addition, too many layers of LinearLayout nesting will occupy more system resources and may cause stackoverflow; but if we use RelativeLayout, it may only need one layer to complete it. Brother component reference + margin + padding can set the display position of the component, it is more convenient! Of course, it is not absolute, the specific problem is analyzed! The summary is: try to use the weight property of RelativeLayout + LinearLayout together !
RelativeLayout is the layout that displays the sub-views it contains at different locations in their relationship (such as this Child's View is under a different Child's View, This Child's View is to the left of another Child's View ...) , including their relationship to the parent RelativeLayout itself (such as the alignment of that side of the parent element, between the parent element, to the left of the parent element ...).

Android RelativeLayout is a very powerful layout in terms of convenience and efficiency, if the interface is not too complicated, choosing RelativeLayout network performance is better than ConstraintLayout. RelativeLayout used when simple, ConstraintLayout when the interface is complex.

Locate and relate child views in RelativeLayout

Default positioning
When children view into RelativeLayout, if there is no established reciprocal relationship with the parent element or other child View elements, it will be located in the upper-left corner of RelativeLayout. As in the case below, all three child views have no established relationship, so it is located in the upper / left corner and overlaps, which child views will be in the upper layer of the screen.

<?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>

android: gravity and android: ignoreGravity of RelativeLayout
The child views when finished positioning in RelativeLayout, assuming all child views fit within a rectangular border, the whole block of these child views can be moved to certain locations in RelativeLayout by belonging compute: android: gravity, it takes values (can be combined with the symbol | similar to LinearLayout)
The following figure is an example, setting android: gravity = "center | right"

<?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:gravity="center|right"
    android:background="#e2e3eb">
</RelativeLayout>

RelativeLayout supports a child view separated from a rectangular block containing child views so that the element is not affected by gravity by the android attribute: ignoreGravity = "id-view-child"

The following example separates the TextView element with id: textview from the gravity of RelativeLayout

<?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:gravity="center|right"
    android:ignoreGravity="@id/textview"

    android:background="#e2e3eb">
    <TextView
        android:id="@+id/textview"
        android:text="Example RelativeLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <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>

Locate the child View by contacting the parent View RelativeLayout

The position of the child View in RelativeLayout can be established by indicating the location relationship with the parent view such as the left-side alignment of the parent's View with the child's View, the right-aligned edge of the parent's View with the child's View, etc. Show this function as follows

<TextView
        android:id="@+id/view3"
        android:layout_centerInParent="true"
        android:layout_alignParentRight="true"
        android:text="view3"
        android:gravity="center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#d4a00f8f" />

The android: layout_margin ... of the child View
On the side of the child View (left, top, right, bottom) if there is a relationship with the parent View or child View, then that side can set additional margin properties such as: android: layout_marginLeft, android: layout_marginTop, android: layout_marginRight, android: layout_marginBottom to set the distance of that relationship.
The following example uses the child view and margin relationships to locate the child views

<?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_toLeftOf="@id/view3"
        android:layout_alignBottom="@id/view3"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:background="#e8d33636" />
    <TextView
        android:id="@+id/view2"
        android:text="view2"
 
        android:layout_alignRight="@id/view1"
        android:layout_above="@id/view1"
        android:gravity="center"
        android:layout_width="50dp"
        android:layout_height="200dp"
        android:background="#e71faf15" />
    <TextView
        android:id="@+id/view3"
 
        android:layout_centerInParent="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="30dp"
        android:text="view3"
        android:gravity="center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#d4a00f8f" />
</RelativeLayout>

For example, the RelativeLayout login screen:

<?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:gravity="center"
    android:background="#e2e3eb">

    <TextView
        android:id="@+id/textview"
        android:text="Đăng nhập"
        android:layout_centerHorizontal="true"
        android:textSize="20sp"
        android:textAllCaps="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/username"
        android:hint="Username"
        android:layout_below="@id/textview"
        android:layout_marginTop="40dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <EditText
        android:id="@+id/password"
        android:hint="passwords"
        android:inputType="textPassword"
        android:layout_below="@+id/username"
        android:layout_marginTop="8dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btnLogin"
        android:layout_below="@id/password"
        android:layout_toLeftOf="@id/recoverypassword"
        android:text="Đăng nhập"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/recoverypassword"
        android:text="Quyên MK"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/help"
        android:text="Trợ giúp"
        android:layout_below="@id/password"
        android:layout_toRightOf="@id/recoverypassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout> 

Key Search :Android RelativeLayout Example,Relative Layout  android, android Relative Layout ,Android RelativeLayout with Examples,Android Relative Layout,Relative Layout In Android With Example,Android Layout - LinearLayout, RelativeLayout