Diseño de Interfaces con RelativeLayout 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:005:25

Diseño de Interfaces con RelativeLayout en Android

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

Clase 10 de 20

Clase 10 / 20

Comentarios (18)18 comentarios

aSXasx SAXasx

Hace 7 años

Quiero una camiseta como la suya profe. Está muy way

wilking trinidad

Hace 3 años

Luis Fernando Díaz Devos

Hace 6 años

Luis Enrique Landaure Vargas

Hace 6 años

casi me confundo, para que no se confundan:

En la parte superior debe ser layout_alignParentTop="true" :D

Gregson Murcia Castro

Hace 6 años

Y también en layout_below ="@id/XYZ"

Bryan Imbaquingo

Hace 6 años

para que el elemento esté alineado arriba utilizamos

layout_alingParentTop="true"

si queremos que el elemento esté alineado abajo

layout_alingParentBottom="true"

para que un elemento esté alineado hacia la izquierda

layout_alingParentStart="true"

para que se pueda alinear a la derecha

layout_alingParentEnd="true"

si queremos que un elemento esté alineado con respecto a otro elemento primero indicamos su posición y le indicamos el elemento con el que queremos que esté alineado

layout_alingParentEnd="true"
layout_below="@id/imagen"
este codigo sirve para alinear el objeto a la derecha con respecto al elemento imagen

si lo que buscamos es que un elemento nos ocupe todo el ancho de la pantalla, RelativeLayout está pensado para eso, porque nosotros le podemos indicar la alineación inicial y final que debería tener en la pantalla.

layout_alingParentStart="true"
layout_alingParentEnd="true"

Le estamos diciendo que el objeto esté alineado a la izquierda y derecha de la pantalla, de esta manera ocupará todo el ancho de todo el activity

Daniel Jussef Zamorano Silva

Hace 4 años

Super muchas gracias!

Diego Ernesto Cuaycal Tirira

Hace un año

Excelente aporte

Daniel Jussef Zamorano Silva

Hace 4 años

Aquí la versión gráfica

Eduardo Peredo Rivero

Hace 7 años

Documentación y Referencia de RelativeLayout

https://developer.android.com/guide/topics/ui/layout/relative

https://developer.android.com/reference/kotlin/android/widget/RelativeLayout?hl=en

Christian Gómez

Hace 6 años

Relative Layout: Nos permite alinear elementos referenciandolos con otros identificadores o elementos.

Nasser Emil Issa Tavares

Hace 6 años

RelativeLayout Es un viewGroup que organiza los views de forma “no lineal”, es decir, podemos jugar con su ubicación en la pantalla poniendolos en el lugar que queramos de manera facil.

ERIKA ALEXANDRA GARCIA BARRIOS

Hace 5 años

Jamás vi esto en la U. <3 Me encanta

Edna Yulieth Cardona Echeverri

Hace 3 años

DIFERENCIA = LinearLayout y RelativeLayout

LinearLayout = los elementos estan organizados de izquierda a derecha o de arriba hacia abajo

RelativeLayout = es otro tipo de Layout con el cual podemos estructurar u organizar los elementos en pantalla en diferentes posiciones = un elemento puede flotar a la derecha, izquierda, arriba, abajo, al final etc.

Herberth Alberto Barrientos Funes

Hace 5 años

Practique con Buttons y asi quedo


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
>
 

    <Button
        android:id="@+id/btn_a"
        android:layout_width="154dp"
        android:layout_height="114dp"
        android:text="A"
        app:backgroundTint="#FF9800"
        tools:layout_editor_absoluteX="42dp"
        tools:layout_editor_absoluteY="42dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
    />

    <Button
        android:id="@+id/btn_b"
        android:layout_width="153dp"
        android:layout_height="344dp"
        android:background="#8BC34A"
        android:text="B"
        app:backgroundTint="#8BC34A"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        />

    <Button
        android:id="@+id/btn_c"
        android:layout_width="286dp"
        android:layout_height="236dp"
        android:text="C"
        app:backgroundTint="#309592"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/btn_b"
        />

    <Button
        android:id="@+id/btn_d"
        android:layout_width="131dp"
        android:layout_height="91dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:text="D"
        app:backgroundTint="#FF9800"

        />


</RelativeLayout>

algo que me llama la atencion es que cuando usamos el Start Android studio me dice que tambien hay que agregar Left y cuando uso End tengo que agregar Right, no sé si alguien sabe el porque

JOSE MANUEL PAREDES RAMIREZ

Hace 6 años

Like si también quieres tener esa playera XD

Joel Vicente Nieto Gómez

Hace 6 años

Me parece fantástico que Android haya introducido el RelativeLayout para agrupar los elementos en la pantalla y evitar conflictos con el padre a la hora de jerarquizar los elementos.

Excelente explicación, le entendi perfectamente.

Jordan Salazar

Hace 6 años

En qué caso real se usaría Relative Layout sobre Linear Layout?

Emmanuel Rodríguez

Hace 6 años

Si vienes del diseño web, un símil de concepto sería grid-layout y flexbox. En contexto, sería la practicidad de acomodar tus elementos dentro de un frame o viewgroup. Pudes utilizar ambos, pero dependerá mucho tu vista e imaginación para utilizar uno u otro o ambos. Un ejemplo de Linear, sería Instagram. Y de relative, es netflix o Uber eats.

Adrian Bautista Orozco

Hace 5 años

al usar layout_below, este ejemplo se pone debajo porque ya no hay espacio a lado de B, pero al relative layout igual pude modificarse el orientation para saber si se pone debajo o a un lado del elemento?

Sinuhe Jaime Valencia

Profesor

Hace 5 años

No, en el caso de RelativeLayout no es posible poner una orientación, por lo que siempre se ira hacia abajo. El RelativeLayout justo busca que todos los elementos se mantengan con "relacion" hacia otro elemento dentro del layout, cambiar la orientación romperia con eso y seria confuso el saber si se pone abajo o a un lado ya que la perspectiva estaria cambiada por una sola linea de codigo.

Julian Camilo Espitia Caicedo

Hace 5 años

**Código de la clase: **

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:height="150dp"
    android:width="150dp"
    android:text="A"
    android:textColor="#FFF"
    android:layout_alignParentTop="true"
    android:id="@+id/A"
    />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:height="340dp"
    android:width="200dp"
    android:text="B"
    android:textColor="#FFF"
    android:layout_alignParentEnd="true"
    android:id="@+id/B"
    />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:height="300dp"
    android:width="300dp"
    android:text="C"
    android:textColor="#FFF"
    android:layout_alignParentStart="true"
    android:layout_below="@id/B"
    />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:height="80dp"
    android:text="D"
    android:textColor="#FFF"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    />

Platzi Team

Hace 5 años

Ya con el constrainslayout facilita todo jeje.. pero excelente explicacion de este layout :)

Valeria Calcina Cisneros

Hace 7 años

Al parecer Android venia todo preparado para los desarrolladores :D

Enrique Rabell Talamantes

Hace 6 años

que pasa si en algún caso la pantalla fuera muy pequeña? Se encimarian todos los elementos ?

Recursos

¿Qué es un RelativeLayout y por qué resulta útil?

El RelativeLayout es un tipo de Layout en Android que permite posicionar elementos en la pantalla de forma relativa entre sí, lo cual es muy ventajoso en ciertas situaciones de diseño. A diferencia de los Linearlayout, los cuales organizan elementos en direcciones secuenciales (horizontal o vertical), el RelativeLayout ofrece mayor flexibilidad al permitir que los componentes floten y se sitúen a despecho de otros.

¿Cuáles son las ventajas de utilizar un RelativeLayout?

Jerarquía simplificada: No necesitas anidar múltiples Layout como en un diseño lineal, donde podrías necesitar anidar horizontales dentro de verticales o viceversa para lograr el diseño deseado.
Mejor rendimiento: Al reducir la complejidad jerárquica, Android genera menos elementos, lo cual mejora el rendimiento.
Flexibilidad: Permite que los elementos se alineen con respecto a otros elementos o a los bordes de la pantalla de manera directa mediante atributos.

¿Cómo se estructura un diseño con RelativeLayout?

Al crear un diseño con RelativeLayout, es esencial definir explícitamente cómo se alinearán los elementos para asegurar que el diseño permanezca consistente, independientemente del tamaño de la pantalla. Vamos a ver cómo organizar varios componentes:

Pasos para alinear elementos básicos

Alinear un elemento al borde superior izquierdo:
```
<RelativeLayout ...>
    <View
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />
</RelativeLayout>
```
El atributo android:layout_alignParentLeft="true" asegura que el elemento esté alineado al lado izquierdo del layout y android:layout_alignParentTop="true" lo alinea en la parte superior.

Colocar un elemento a la derecha de otro:

Para un segundo elemento que deba estar a la derecha de uno inicial:

<View
    android:id="@+id/viewA"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true" />

<View
    android:layout_toRightOf="@id/viewA"
    android:layout_alignParentTop="true" />

Aquí, android:layout_toRightOf="@id/viewA" sitúa al segundo elemento a derecha de viewA.

Alinear un elemento centrado debajo de otro:

Si deseas que un tercer elemento esté debajo del anterior:
```
<View
    android:layout_below="@id/viewB"
    android:layout_centerHorizontal="true" />
```
Utilizando android:layout_below="@id/viewB", se sitúa el elemento justo debajo de viewB.

Extender un elemento a lo ancho de la pantalla

Para un elemento que deba estirarse completamente, se pueden usar atributos de alineación así:

<View
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true" />

Aquí, alignParentBottom, alignParentLeft, y alignParentRight logran que el elemento se alinee y estire desde el borde izquierdo al derecho.

Consejos para usar RelativeLayout eficazmente

Usa atributos relativos con conciencia: Define relaciones de alineación claramente para evitar resultados inestables.
Simplifica la jerarquía: Aunque puede parecer atractivo mezclar diferentes layouts, mantener la estructura sencilla favorece el rendimiento.
Prueba diferentes dimensiones: Asegúrate de que el diseño se adapte bien tanto en pantallas pequeñas como grandes asegurando así una experiencia de usuario consistente.

Aprovecha las posibilidades del RelativeLayout para crear interfaces fluidas y adaptativas que mantengan su estructura sin importar el tamaño de pantalla. Úsalos sabiamente para optimizar tanto el rendimiento como la experiencia visual de tus usuarios.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
>
 

    <Button
        android:id="@+id/btn_a"
        android:layout_width="154dp"
        android:layout_height="114dp"
        android:text="A"
        app:backgroundTint="#FF9800"
        tools:layout_editor_absoluteX="42dp"
        tools:layout_editor_absoluteY="42dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
    />

    <Button
        android:id="@+id/btn_b"
        android:layout_width="153dp"
        android:layout_height="344dp"
        android:background="#8BC34A"
        android:text="B"
        app:backgroundTint="#8BC34A"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        />

    <Button
        android:id="@+id/btn_c"
        android:layout_width="286dp"
        android:layout_height="236dp"
        android:text="C"
        app:backgroundTint="#309592"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/btn_b"
        />

    <Button
        android:id="@+id/btn_d"
        android:layout_width="131dp"
        android:layout_height="91dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:text="D"
        app:backgroundTint="#FF9800"

        />


</RelativeLayout>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:height="150dp"
    android:width="150dp"
    android:text="A"
    android:textColor="#FFF"
    android:layout_alignParentTop="true"
    android:id="@+id/A"
    />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:height="340dp"
    android:width="200dp"
    android:text="B"
    android:textColor="#FFF"
    android:layout_alignParentEnd="true"
    android:id="@+id/B"
    />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:height="300dp"
    android:width="300dp"
    android:text="C"
    android:textColor="#FFF"
    android:layout_alignParentStart="true"
    android:layout_below="@id/B"
    />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:height="80dp"
    android:text="D"
    android:textColor="#FFF"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    />

Resumen

¿Qué es un RelativeLayout y por qué resulta útil?

¿Cuáles son las ventajas de utilizar un RelativeLayout?

Jerarquía simplificada: No necesitas anidar múltiples Layout como en un diseño lineal, donde podrías necesitar anidar horizontales dentro de verticales o viceversa para lograr el diseño deseado.
Mejor rendimiento: Al reducir la complejidad jerárquica, Android genera menos elementos, lo cual mejora el rendimiento.
Flexibilidad: Permite que los elementos se alineen con respecto a otros elementos o a los bordes de la pantalla de manera directa mediante atributos.

¿Cómo se estructura un diseño con RelativeLayout?

Pasos para alinear elementos básicos

Alinear un elemento al borde superior izquierdo:
```
<RelativeLayout ...>
    <View
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />
</RelativeLayout>
```
El atributo android:layout_alignParentLeft="true" asegura que el elemento esté alineado al lado izquierdo del layout y android:layout_alignParentTop="true" lo alinea en la parte superior.

Colocar un elemento a la derecha de otro:

Para un segundo elemento que deba estar a la derecha de uno inicial:

<View
    android:id="@+id/viewA"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true" />

<View
    android:layout_toRightOf="@id/viewA"
    android:layout_alignParentTop="true" />

Aquí, android:layout_toRightOf="@id/viewA" sitúa al segundo elemento a derecha de viewA.

Alinear un elemento centrado debajo de otro:

Si deseas que un tercer elemento esté debajo del anterior:
```
<View
    android:layout_below="@id/viewB"
    android:layout_centerHorizontal="true" />
```
Utilizando android:layout_below="@id/viewB", se sitúa el elemento justo debajo de viewB.

Extender un elemento a lo ancho de la pantalla

Para un elemento que deba estirarse completamente, se pueden usar atributos de alineación así:

<View
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true" />

Aquí, alignParentBottom, alignParentLeft, y alignParentRight logran que el elemento se alinee y estire desde el borde izquierdo al derecho.

Consejos para usar RelativeLayout eficazmente

Usa atributos relativos con conciencia: Define relaciones de alineación claramente para evitar resultados inestables.
Simplifica la jerarquía: Aunque puede parecer atractivo mezclar diferentes layouts, mantener la estructura sencilla favorece el rendimiento.
Prueba diferentes dimensiones: Asegúrate de que el diseño se adapte bien tanto en pantallas pequeñas como grandes asegurando así una experiencia de usuario consistente.

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 RelativeLayout 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