Easy Tutorial
❮ Python Yield Used Analysis Javascript Check Null Undefined ❯

2.2.2 RelativeLayout (Relative Layout)

Category Android Basic Tutorial

Introduction to This Section


In the previous section, we conducted a detailed analysis of LinearLayout, which is also a layout we use quite often. We are more fond of its weight attribute, which divides the screen proportionally and is quite helpful for screen adaptation. However, when using LinearLayout, there is a problem: when the interface is more complex, it is necessary to nest multiple layers of LinearLayout, which will reduce the efficiency of UI rendering speed. Moreover, if it is an item on a listview or gridview, the efficiency will be even lower. In addition, too many nested layers of LinearLayout will occupy more system resources and may even cause a stack overflow. But if we use RelativeLayout, it may only take one layer to complete, with reference to the parent container or sibling components + margin + padding to set the display position of the components, which is quite convenient! Of course, it's not absolute, analyze specific problems specifically! In summary: try to use RelativeLayout + the weight attribute of LinearLayout together!


1. Core Attribute Diagram


2. Parent Container Positioning Attribute Diagram


3. Positioning Based on Sibling Components

Let's first talk about what a sibling component is. The so-called sibling component is a component in the same level container, as shown in the figure.

The components 1 and 2 in the figure are sibling components, while component 3 is not a sibling component of component 1 or 2, so component 3 cannot be positioned through component 1 or 2, such as layout_toleftof = "Component 1" which will result in an error! Remember! The most classic example of this sibling component positioning is the "plum blossom layout", the following code implements it:

Running effect picture:

Implementation code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/RelativeLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent" >    

    <!-- This is in the center of the container -->    

    <ImageView    
        android:id="@+id/img1"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_centerInParent="true"    
        android:src="@drawable/pic1"/>    

    <!-- To the left of the middle picture -->    
    <ImageView    
        android:id="@+id/img2"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_toLeftOf="@id/img1"    
        android:layout_centerVertical="true"    
        android:src="@drawable/pic2"/>    

    <!-- To the right of the middle picture -->    
    <ImageView    
        android:id="@+id/img3"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_toRightOf="@id/img1"    
        android:layout_centerVertical="true"    
        android:src="@drawable/pic3"/>    

    <!-- Above the middle picture-->    
    <ImageView    
        android:id="@+id/img4"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_above="@id/img1"    
        android:layout_centerHorizontal="true"    
        android:src="@drawable/pic4"/>    

    <!-- Below the middle picture -->    
    <ImageView    
        android:id="@+id/img5"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_below="@id/img1"    
        android:layout_centerHorizontal="true"    
        android:src="@drawable/pic5"/>    

</RelativeLayout>

4. The Difference Between Margin and Padding

Beginners may be a bit confused about these two properties, so let's distinguish them here: Firstly, margin represents the offset, such as marginleft = "5dp" which means the component is offset 5dp from the left edge of the container; Padding, on the other hand, represents the filling, and the object of the filling is the element inside the component, such as in a TextView, for example, setting paddingleft = "5dp" is to fill a 5dp space on the left side of the element inside the component! Margin is for the components in the container, and padding is for the elements inside the component, they should be distinguished! The following is a simple code demonstration of the difference

android:background="@drawable/myicon" />

<ImageView
    android:id="@+id/imgCancle"
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:layout_alignRight="@id/imgBack"
    android:layout_alignTop="@id/imgBack"
    android:background="@drawable/cancel"
    android:layout_marginTop="-15dp"
    android:layout_marginRight="-10dp" />

</RelativeLayout>

Summary of This Section:

That concludes the detailed explanation of RelativeLayout. Any omissions, errors, or good suggestions are welcome.

Finally, here is the demo code from above for download: RelativeLayoutDemo

WeChat Follow

❮ Python Yield Used Analysis Javascript Check Null Undefined ❯