Capitulo 23 ➜ FrameLayout

¿Qué es un FrameLayout en Android Studio?

Un FrameLayout es un tipo de layout en Android que se utiliza para superponer vistas unas sobre otras. Todas las vistas agregadas a un FrameLayout se posicionan en la parte superior izquierda del layout y se apilan una encima de la otra. La última vista agregada es la que se muestra en la parte superior.

FrameLayout es un layout muy simple y se utiliza comúnmente para los siguientes propósitos:

• Mostrar una vista encima de otra, como una ventana emergente o un menú desplegable.
• Animar vistas moviéndolas de un lugar a otro dentro del FrameLayout.
• Crear interfaces de usuario personalizadas con diseños superpuestos.

¿Cómo usar un FrameLayout en Android Studio?

Para usar un FrameLayout en Android Studio, siga estos pasos:

1. Agregue la dependencia de FrameLayout a su proyecto.

   Si aún no lo ha hecho, agregue la siguiente línea a su archivo build.gradle (Módulo: aplicación):

   implementation 'androidx.core:core-ktx:1.8.0'
   

2. Cree un FrameLayout en su diseño.

   Puede crear un FrameLayout en su diseño utilizando la siguiente etiqueta XML:

   XML

   <FrameLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   
       </FrameLayout>
   

    

   En este ejemplo, el FrameLayout tiene un ancho igual al ancho de su padre y un alto igual al alto de su padre.

3. Agregue vistas a su FrameLayout.

   Puede agregar cualquier vista a su FrameLayout, como TextViews, ImageViews, Buttons, etc. Por ejemplo, puede agregar el siguiente código XML para agregar un TextView y una ImageView a su FrameLayout:

   XML

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Texto 1"
       android:layout_margin="16dp" />
   
   <ImageView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:src="@drawable/image"
       android:layout_below="@id/textView" />
   

    

   En este ejemplo, se agrega un TextView con el texto "Texto 1" y una ImageView con la imagen "image.jpg" al FrameLayout.

4. Posicione las vistas en su FrameLayout.

   Puede posicionar las vistas en su FrameLayout utilizando los siguientes atributos XML:

   • android:layout_width: Establece el ancho de la vista.
   • android:layout_height: Establece el alto de la vista.
   • android:layout_margin: Establece los márgenes alrededor de la vista.
   • android:layout_gravity: Establece la gravedad de la vista dentro del FrameLayout. Los valores posibles para android:layout_gravity son:
     • top: Coloca la vista en la parte superior del FrameLayout.
     • center: Coloca la vista en el centro del FrameLayout.
     • bottom: Coloca la vista en la parte inferior del FrameLayout.
     • left: Coloca la vista en el lado izquierdo del FrameLayout.
     • right: Coloca la vista en el lado derecho del FrameLayout.
     • start: Coloca la vista en el lado inicial del FrameLayout (izquierda para idiomas de lectura de izquierda a derecha, derecha para idiomas de lectura de derecha a izquierda).
     • end: Coloca la vista en el lado final del FrameLayout (derecha para idiomas de lectura de izquierda a derecha, izquierda para idiomas de lectura de derecha a izquierda).

Ejemplo de código completo:

XML

<?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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Texto 1"
        android:layout_margin="16dp"
        android:layout_gravity="center" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/image"
        android:layout_below="@id/textView"