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 parentandroid:layout_alignParentBottom: Aligns to the bottom of the parentandroid:layout_alignParentLeft: Aligns to the left of the parentandroid:layout_alignParentRight: Aligns to the right of the parentandroid:layout_centerInParent: Aligns in the center of the parentandroid:layout_toLeftOf: Aligns to the left of the specified viewandroid:layout_toRightOf: Aligns to the right of the specified viewandroid:layout_above: Aligns above the specified viewandroid: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!