Guideline in RelativeLayout: Kotlin XML Development for Android (Legacy)

In traditional Android XML layout development, the RelativeLayout was a common choice for creating complex and flexible UI structures. The Guideline, when used in conjunction with the PercentRelativeLayout (from the now deprecated Android Percent Support Library), offered a powerful way to create layouts that adapt well to different screen sizes. However, with the rise of ConstraintLayout and Jetpack Compose, these methods are becoming less common. Still, understanding them can be useful, especially when maintaining older projects or needing to leverage specific behaviors not easily replicated in newer layout systems. This blog post will delve into how to effectively use Guideline within a PercentRelativeLayout in Kotlin XML layout development for Android.

Understanding RelativeLayout and PercentRelativeLayout

RelativeLayout

RelativeLayout is a view group that displays child views relative to each other or to the parent. It allows you to specify relationships like “to the left of,” “below,” or “centered in parent,” making it versatile for designing complex UIs without nested layouts. While powerful, deeply nested RelativeLayout structures can lead to performance issues due to the multiple measurement passes required during layout inflation.

PercentRelativeLayout

The PercentRelativeLayout, provided by the now deprecated Android Percent Support Library, extends the capabilities of RelativeLayout by allowing you to specify dimensions (width, height, margins) as percentages of the parent’s dimensions. This makes it easier to create layouts that scale correctly across various screen sizes without the need for manual calculations. The Percent Support Library is deprecated, so this component should be considered carefully, but understanding how it works remains useful for legacy codebases.

What is a Guideline?

A Guideline is a visual aid in the Android layout editor, representing an invisible line to which other views can be aligned. It allows you to create consistent margins and positions for your views. Guidelines can be oriented vertically or horizontally, helping create organized and adaptable layouts. Using Guidelines within RelativeLayout and especially PercentRelativeLayout makes positioning views at exact percentage-based locations much more manageable.

Why Use Guidelines with PercentRelativeLayout?

• Consistent Positioning: Helps maintain consistent spacing and alignment across different screen sizes.
• Adaptability: Easier to adapt layouts to varying screen dimensions using percentage-based relationships.
• Readability: Makes layout definitions more readable by providing visual anchors in XML.

How to Use Guideline in PercentRelativeLayout

Here’s how to implement and use Guideline with PercentRelativeLayout:

Step 1: Add Dependency (If Not Already Present)

Although deprecated, if you are working with a project that uses the PercentRelativeLayout, ensure the necessary dependency is included in your build.gradle file:

dependencies {
    implementation 'androidx.percentlayout:percentlayout:1.0.0' // Replace with your project's version, if necessary. Note that this library is deprecated.
}

Step 2: Define the PercentRelativeLayout in XML

Open your layout XML file (e.g., activity_main.xml) and define the PercentRelativeLayout as the root layout:

<androidx.percentlayout.widget.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Your views and guidelines will go here -->

</androidx.percentlayout.widget.PercentRelativeLayout>

Step 3: Add Guidelines

Add horizontal and/or vertical Guideline elements within the PercentRelativeLayout. You must set the orientation and the app:layout_guidePercent attribute to specify the guideline’s position as a percentage of the parent’s dimension. This is what provides the core utility.

<androidx.percentlayout.widget.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Vertical Guideline at 30% -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_guidePercent="0.30" />

    <!-- Horizontal Guideline at 50% -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_guidePercent="0.50" />

</androidx.percentlayout.widget.PercentRelativeLayout>

Note: While the Guideline widget comes from androidx.constraintlayout.widget, it’s still usable inside PercentRelativeLayout to achieve the desired layout structure. If you don’t have the ConstraintLayout library, you may need to add it:

dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4' // or newer
}

Step 4: Position Views Relative to the Guidelines

Position your views relative to these guidelines using standard RelativeLayout attributes like android:layout_toLeftOf, android:layout_toRightOf, android:layout_above, and android:layout_below, referencing the guideline IDs.

<androidx.percentlayout.widget.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Vertical Guideline at 30% -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_guidePercent="0.30" />

    <!-- Horizontal Guideline at 50% -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_guidePercent="0.50" />

    <!-- Example View -->
    <TextView
        android:id="@+id/my_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, Guideline!"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@id/guideline_vertical"
        android:layout_above="@id/guideline_horizontal"
        android:textSize="18sp" />

</androidx.percentlayout.widget.PercentRelativeLayout>

Step 5: Use Percent Attributes (Optional)

You can also leverage the PercentRelativeLayout‘s ability to specify sizes as percentages by using the app:layout_widthPercent, app:layout_heightPercent, app:layout_marginLeftPercent, etc., to make the view dimensions proportional to the parent’s size.

<androidx.percentlayout.widget.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Vertical Guideline at 30% -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_guidePercent="0.30" />

    <!-- Horizontal Guideline at 50% -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_guidePercent="0.50" />

    <!-- Example View with percent attributes -->
    <TextView
        android:id="@+id/my_text_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Hello, Guideline!"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@id/guideline_vertical"
        android:layout_above="@id/guideline_horizontal"
        app:layout_widthPercent="0.6"
        app:layout_heightPercent="0.4"
        android:textSize="18sp" />

</androidx.percentlayout.widget.PercentRelativeLayout>

Kotlin Usage (If Necessary)

In most cases, you won’t need to interact with the Guideline directly from your Kotlin code. However, if you need to programmatically modify the layout (which is less common with this approach), you can access the view by its ID.

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val textView: TextView = findViewById(R.id.my_text_view)
        // You can interact with the TextView here if needed
    }
}

Why This Approach Is Less Common Today

Several factors contribute to the declining use of RelativeLayout with Guideline and PercentRelativeLayout:

• ConstraintLayout: Offers similar flexibility and percentage-based positioning through constraints and guidelines but is more performant and actively supported.
• Jetpack Compose: Provides a modern, declarative approach to UI development that allows more flexible and dynamic layouts using composables like Box, Column, and custom layouts.
• Deprecation of Android Percent Support Library: The PercentRelativeLayout comes from a deprecated library, making it less desirable for new projects due to lack of updates and potential compatibility issues.

Alternatives to PercentRelativeLayout

1. ConstraintLayout:
• Use ConstraintLayout and its Guideline to achieve similar results with better performance.
• Set constraints to position views relative to guidelines as percentages of the parent’s dimensions.
2. Jetpack Compose:
• Utilize the Layout composable to create custom layouts that offer both flexibility and control over UI positioning.
• Compose allows you to define layouts programmatically, making it easy to handle different screen sizes and orientations.

Conclusion

Using Guideline within PercentRelativeLayout was a technique for creating adaptable layouts in older Android development workflows. While RelativeLayout and PercentRelativeLayout are less frequently used now, understanding them is still helpful for maintaining legacy projects. Modern alternatives like ConstraintLayout and Jetpack Compose provide more performant and flexible solutions for creating adaptive and responsive UIs.