Inicio » Cursos » Programación Android desde Cero

Curso Programación Android desde Cero

Capitulo 23 ➜ FrameLayout

FrameLayout

¿Cómo usar 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.

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

1773 visitas

Sigue con el curso: Capítulo 24 – ConstraintLayout

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

Más cursos que pueden interesarte

Más cursos

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023