Android RelativeLayout en Kotlin

Android RelativeLayout es una subclase de ViewGroup, que se usa para especificar la posición de los elementos de vista secundarios entre sí, como (A a la derecha de B) o en relación con el principal (fijar en la parte superior del principal).

En lugar de usar LinearLayout, tenemos que usar RelativeLayout para diseñar la interfaz de usuario y mantener nuestra jerarquía plana porque mejora el rendimiento de la aplicación.

Atributos importantes para posicionar vistas en RelativeLayout

Como sabemos, necesitamos definir la posición de las vistas secundarias o ViewGroups en relación con cada elemento o con el principal. Por defecto, la posición es superior izquierda, si alguien olvida especificar la posición de las vistas secundarias.

¿Cómo declarar RelativeLayout en un archivo XML?

En primer lugar, debemos declarar RelativeLayout en el archivo de diseño usando el siguiente código.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="10dp"
    android:paddingRight="10dp">
  
    // Add other view or ViewGroup here
</RelativeLayout>

RelativeLayout en el archivo activity_main.xml

El siguiente es el código para RelativeLayout en el archivo xml.

<?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:paddingLeft="10dp"
    android:paddingRight="10dp">
     
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="First name:"
        android:layout_marginTop="20dp"
        android:textSize="20dp"/>
  
    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView1"
        android:layout_marginTop="8dp"/>
      
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="10dp"
        android:text="Last name:"
        android:textSize="20dp"/>
  
    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_toRightOf="@id/textView2"
        android:layout_marginTop="45dp"/>
  
    <Button
        android:id="@+id/btn4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/textView2"
        android:layout_marginTop="20dp"
        android:text="Submit" />
      
</RelativeLayout>

Archivo MainActivity.kt

Cuando hayamos creado el diseño, debemos cargar el recurso de diseño XML desde nuestro método de devolución de llamada onCreate() de actividad y acceder al elemento de la interfaz de usuario desde el XML usando findViewById.

package com.geeksforgeeks.myfirstKotlinapp
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
  
  
class MainActivity : AppCompatActivity() {
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // below access the UI elements
  
  
    }
}

Salida de diseño relativo:

Podemos ejecutar la aplicación utilizando el dispositivo virtual de Android (AVD) para obtener el resultado del código anterior.