Java Android App Development Course, Positioning with Relative Position - RelativeLayout

In Android app development, various layouts can be used, one of which is RelativeLayout.
RelativeLayout is a layout that allows child views to be positioned relative to each other.
Using this layout, each view can be arranged relative to other views on the screen, making it advantageous for composing complex UIs.

What is RelativeLayout?

RelativeLayout allows child views to be positioned in relation to the specified parent view.
In other words, users can define the position of each view in respect to the direction on the screen.
For example, it is possible to place one view to the right of another view or to align it in the center of the parent layout.

Main Attributes of RelativeLayout

When using RelativeLayout, the main attributes that can be applied to child views are as follows:

android:layout_alignParentTop: Aligns to the top of the parent
android:layout_alignParentBottom: Aligns to the bottom of the parent
android:layout_alignParentLeft: Aligns to the left of the parent
android:layout_alignParentRight: Aligns to the right of the parent
android:layout_centerInParent: Aligns in the center of the parent
android:layout_toLeftOf: Aligns to the left of the specified view
android:layout_toRightOf: Aligns to the right of the specified view
android:layout_above: Aligns above the specified view
android:layout_below: Aligns below the specified view

Advantages of RelativeLayout

Several advantages of using RelativeLayout include:

Flexible Layout Modification: It is easy to change the relative positions of existing views, making UI modifications convenient.
Ability to Compose Complex Layouts: You can easily create complex UIs compared to other layouts.
Performance Improvement: It can improve performance by reducing nested layouts.

Example of Using RelativeLayout

Now let’s learn how to use RelativeLayout through an example that includes views positioned relative to each other.
The example below shows how to arrange a TextView, Button, and ImageView using RelativeLayout.

Step 1: Project Setup

Create a new project in Android Studio,
and modify the provided activity_main.xml file.

Step 2: XML Layout Code

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

            <TextView
                android:id="@+id/text_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello, World!"
                android:textSize="24sp"
                android:layout_centerInParent="true"/>

            <Button
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Click Me"
                android:layout_below="@id/text_view"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="16dp"/>

            <ImageView
                android:id="@+id/image_view"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/ic_launcher_foreground"
                android:layout_above="@id/button"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="16dp"/>

        </RelativeLayout>

Step 3: Adding Actions to the Views

After setting up the XML layout, let’s implement actions for those views.
Open the MainActivity.java file and add the code below.

        
        package com.example.myapp;

        import androidx.appcompat.app.AppCompatActivity;
        import android.os.Bundle;
        import android.view.View;
        import android.widget.Button;
        import android.widget.TextView;

        public class MainActivity extends AppCompatActivity {

            private TextView textView;
            private Button button;

            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);

                textView = findViewById(R.id.text_view);
                button = findViewById(R.id.button);

                button.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        textView.setText("The button has been clicked!");
                    }
                });
            }
        }

Disadvantages of RelativeLayout

While RelativeLayout is very useful, it has some disadvantages.
Firstly, complex layouts can lead to performance degradation.
Additionally, there is a risk that multiple views may overlap or collide, which can make it visually difficult to see the order of views.

Comparing RelativeLayout with Other Layouts

RelativeLayout has its own strengths and weaknesses compared to other layouts such as LinearLayout and ConstraintLayout.
LinearLayout is suitable for arranging child views vertically or horizontally,
whereas ConstraintLayout offers more complex yet flexible layouts.
It is important to choose the appropriate layout according to the requirements of the user interface.

Conclusion

In this tutorial, we learned how to use RelativeLayout in Android to position views relatively.
RelativeLayout is characterized by its ability to easily set relationships with other views while constructing a UI,
making it suitable for various UI requirements.
Further, unleash your creativity in making your own app!

Java Android App Development Course, Positioning with Relative Position – RelativeLayout