FrameLayout de Android en Kotlin

Android Framelayout es una subclase de ViewGroup que se usa para especificar la posición de múltiples vistas colocadas una encima de la otra para representar una sola pantalla de vista.

En general, podemos decir que FrameLayout simplemente bloquea un área particular de la pantalla para mostrar una sola vista. Aquí, todas las vistas o elementos secundarios se agregan en formato de pila, lo que significa que el elemento secundario agregado más recientemente se mostrará en la parte superior de la pantalla.

Sin embargo, podemos agregar varias vistas de niños y controlar sus posiciones solo mediante el uso de atributos de gravedad en FrameLayout.

El FrameLayout se puede definir usando el siguiente código:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
  
   // Add items or widgets here
</FrameLayout>

archivo actividad_principal.xml

En este archivo, declaramos FrameLayout y comenzamos a agregar múltiples vistas como textView, editText y Button, etc. Todas las vistas se colocan una sobre la otra, pero las desplazamos de acuerdo con nuestros requisitos.

Primero, agregamos una imagen en el fondo y agregamos otros widgets en la parte superior. En la pantalla, podemos ver la hermosa página de inicio de sesión con una imagen de fondo.

<?xml version="1.0" encoding="utf-8"?>
  
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp">
  
    <ImageView
        android:id="@+id/imgvw1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/img" />
  
    <TextView
        android:id="@+id/txtvw1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#286F24"
        android:padding="10dp"
        android:text="Login Details"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:layout_marginLeft="100dp"/>
  
    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="80dp"
        android:background="#ECEEE8"
        android:padding="10dp"
        android:hint="Enter your email" />
  
    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="150dp"
        android:background="#ECEEE8"
        android:padding="10dp"
        android:hint="Enter password"/>
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text= "Submit"
        android:layout_marginTop="240dp"
        android:layout_marginLeft="110dp"/>
  
</FrameLayout>

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)
        // finding the UI elements
  
  
    }
}

Salida de diseño de marco:

Necesitamos ejecutar usando el dispositivo virtual de Android (AVD) para ver el resultado.