Diseño de Interfaces con Layout Relativo en Android

Curso Básico de Diseño de Interfaces con Android Studio

Contenido del curso

Introduccion

1
Creación de Interfaces de Usuario en Android con XML
03:39 min

Revisando los archivos para una UI

Creando una UI

Widgets y Vistas

Layouts base

Estilos y temas

Extendiendo los widgets

Cierre

20
Estilos y Atributos en XML: Curso Completo
00:37 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:25

Diseño de Interfaces con Layout Relativo en Android

Curso Básico de Diseño de Interfaces con Android Studio

Clase 11 de 20

Clase 11 / 20

Recursos

En la actualidad, las aplicaciones móviles necesitan ser responsivas para adaptarse en distintos dispositivos. Esta versatilidad es posible gracias a distintos tipos de diseño de interfaz, entre los cuales se destacan el diseño lineal y el relativo. En este artículo, exploraremos cómo convertir una pantalla diseñada con layout lineal a un diseño con layout relativo en la aplicación de Platzi, examinando los beneficios que cada uno ofrece y las consideraciones que se deben tomar para cada caso.

¿Cómo se convierte un diseño lineal a relativo?

Cuando pasamos de un diseño lineal a uno relativo, encontramos inmediatamente que los elementos se desalinean, ya que el diseño relativo funciona con referencias entre elementos, en lugar de seguir una orientación predefinida. Por ejemplo, si deseamos centrar un elemento respecto a su contenedor, eliminaríamos la orientación y usaríamos propiedades como centerInParent para alinear vertical y horizontalmente.

¿Qué pasos se deben seguir para alinear elementos en un diseño relativo?

Para estructurar adecuadamente los elementos en un layout relativo, es esencial seguir una serie de pasos:

Establecer un punto central: Empezamos definiendo el gravity center de los elementos que queremos centrar.
Eliminar la orientación: Los diseños relativos no trabajan con orientaciones como los lineales; por lo tanto, quitamos la orientación y comenzamos a referenciar elementos entre sí.
Alinear con respecto a otros elementos: Utilizamos identificadores para alinear elementos relacionados, como posicionar un EditText debajo de un logo.
Agregar identificadores a los elementos: Para referenciarlos más fácilmente, agregamos ids a los elementos que queremos posicionar en relación a otros.
Utilizar margenes y paddings: Se mantienen los mismos márgenes y paddings usados anteriormente para conservar la estructura espacial del diseño.

¿Cómo se alinea un botón en el diseño relativo?

Alinear un botón en un layout relativo es un proceso donde retiramos espacios adicionales no necesarios y usamos referencias directas para su posicionamiento. Al no requerir un contenedor que ocupe espacio en la pantalla, el botón puede alinearse con respecto al borde inferior (alignParentBottom) y ajustar su ancho con respecto al contenedor para estirarse adecuadamente (matchParent o 0dp).

¿Qué ventajas ofrece el layout relativo en diseño móvil?

El layout relativo aporta numerosas ventajas en el diseño de interfaces:

Flexibilidad en diferentes dispositivos: Permite que los elementos se ajusten proporcionalmente a la pantalla, ya sea en teléfonos o tabletas.
Optimización del espacio: Elimina la necesidad de espacios adicionales o elementos no visuales, utilizados solamente para crear separaciones en diseños lineales.
Simplicidad en la estructura: Ofrece una manera más sencilla de posicionar elementos en la pantalla basándose en las relaciones entre ellos.

Aunque el diseño relativo es ventajoso en muchos aspectos, es importante tener en cuenta otros tipos de layouts para ciertos escenarios de diseño. La elección entre un layout lineal y relativo dependerá de la naturaleza de la pantalla a diseñar y de cómo se desee presentar el contenido al usuario.

En la aventura de crear interfaces atractivas y eficientes, es crucial entender las herramientas y técnicas a nuestra disposición. Al dominar la transición entre diferentes tipos de diseño, como el lineal y relativo, aseguramos que nuestras aplicaciones no solo se vean bien, sino que también proporcionen la mejor experiencia posible en cualquier dispositivo. ¡Sigue aprendiendo y experimentando para descubrir qué enfoque funciona mejor para tus proyectos!

Emanuel Agustín Serdeiro

Hace 5 años

Copiando la idea de un compañero, tambien me anime a hacer el mio !

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/logo"
            android:layout_alignParentStart="true"
            android:layout_marginStart="10sp"
            android:layout_gravity="start"
            android:src="@drawable/logo"
            android:layout_width="200dp"
            android:layout_height="50dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_toStartOf="@id/musicApp"
            android:textColor="#DB4437"
            android:text="SigIn / " />

        <TextView
            android:id="@+id/musicApp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerInParent="true"
            android:textColor="@color/app_color"
            android:text="@string/musicapp" />
    </RelativeLayout>



    <EditText
        android:drawableStart="@drawable/vector_person"
        android:hint="@string/hint_username"
        android:drawablePadding="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"/>

    <EditText
        android:drawableStart="@drawable/vector_password"
        android:drawablePadding="10dp"
        android:hint="@string/hint_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"/>

    <Space
        android:layout_width="match_parent"
        android:layout_height="12dp"
        />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/button_login"
        android:backgroundTint="@color/app_color"
        android:layout_marginStart="20sp"
        android:layout_marginEnd="20sp"
        />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Facebook"
        android:backgroundTint="#3b5998"
        android:layout_marginStart="20sp"
        android:layout_marginEnd="20sp"
        />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Google"
        android:backgroundTint="#DB4437"
        android:layout_marginStart="20sp"
        android:layout_marginEnd="20sp"
        android:layout_marginBottom="20sp"
        />
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toStartOf="@+id/createaccount"
        android:text="¿No tiene cuenta?" />

    <TextView
        android:id="@+id/createaccount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="¡Cree una gratis!"
        android:textColor="@color/app_color"
        android:paddingBottom="5sp"/>
</RelativeLayout>

    <TextView
        android:id="@+id/olvidecontrasena"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Olvide mi contraseña"
        android:gravity="center"/>

Comentarios (40)40 comentarios

Denis Morales

Hace 7 años

Leider Stiven Castillo Garcia

Victor Hugo Gallegos Mota

Joshua Daniel Rios Cervantes

Juan Carlos Añazco Pazos

Nicolas Avila

Hace 3 años

Andres López

Hace 6 años

Kevin Parra Lopez

Joel Vicente Nieto Gómez

Christian Gómez

Enrique Rabell Talamantes

Erik Elyager

Guadalupe Giovanni Hernández Medina

Emilio Rafael Vera Maldonado

Andrés Romero Martin

Hace un año

Mario Roberto

Hace 4 años

Andres Garcia Quina

Adolfo Hristo David Roque Gámez

Raul Armas

Miguel Angel Fuentes Garcia

Sinuhe Jaime Valencia

Profesor

Miguel Gutiérrez Rodríguez

Ignacio Saccomano

Héctor Eduardo Vidal de la Cruz

Edgard Eduardo Sorto Ayala

Hace 2 meses

Fernando Romero

Introduccion

Creación de Interfaces de Usuario en Android con XML

Revisando los archivos para una UI

Instalación de Android Studio para Desarrollo de Apps

Creación y gestión de proyectos en Android Studio

Creando una UI

Diseño de Interfaces en Android Studio: Herramientas y Técnicas

Gestión de Vistas y Recursos en Android Studio

Widgets y Vistas

Vistas y ViewGroups en Android: Diferencias y Uso Práctico

Atributos de Layout en Android: Width y Height

Atributos de Diseño y Referencias en Android Studio

Layouts base

Alineación de elementos con LinearLayout en Android

Diseño de Interfaces con RelativeLayout en Android

Diseño de Interfaces con Layout Relativo en Android

Uso de FrameLayout para Organizar Elementos en Android

Diseño de Interfaces con FrameLayout en Android Studio

Diseño de Interfaces con ConstraintLayout en Android Studio

Estilos y temas

Estilos en Android: Creación y Aplicación en Elementos de UI

Temas y Estilos en Android: Personalización Global de la App

Gestión de Dimensiones y Estilos en Android XML

Extendiendo los widgets

Integración de Librerías Externas en Proyectos Android

Reutilización de Layouts en Android: Incluyendo y Merging Elementos

Cierre

Estilos y Atributos en XML: Curso Completo

Diseño de Interfaces con Layout Relativo en Android

Progreso del curso

Introduccion

Revisando los archivos para una UI

Creando una UI

Widgets y Vistas

Layouts base

Estilos y temas

Extendiendo los widgets

Cierre

Recursos

Recursos