Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

RelativeLayout: Uso práctico

11/20
Recursos

Aportes 27

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

RelativeLayout tiene la ventaja que te permite generar vistas usando menos viewgroups para estructurarlas. haciendo el arbol jerarquico menos pesado.

a mi me pasa algo que es que no me deja como tal usar el “end” o “start” si no me deja “left” y “right” por si a alguno le pasa

Este es mi SigIn con lo aprendido hasta el momento.

Yo vengo de ustudiar y trabajar en desarrollo web por un tiempo. Lo deje porque no me gusto lo que hacia y de alguna manera me sentía inconforme, por eso quise probar con desarrollo para Android. La verdad el tema de crear interfaces me inquietaba un poco pues sabia que se hacian a punta de XML, pero ahora que estoy aprendiendo debo decir que en lo personal me gusta más usar XML para hacer interfaces en Android que pelearme con CSS para hacer un layout complejo para web

RelativeLayout nos permite hacer responsive el diseño de nuestros elementos en pantalla.

Relative Layout utiliza los atributos alignParent[Top] y centerHorizontal con valor en true.


Relative también nos permite trabajar el responsive.

¿Cómo sabemos que layout nos conviene más?, ¿El que utilice menos código?

Código:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <EditText
        android:id="@+id/loginUser"
        android:layout_width="match_parent"
        android:layout_marginTop="30dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:hint="@string/user"
        android:drawableLeft="@drawable/ic_baseline_person_24"
        android:drawableStart="@drawable/ic_baseline_person_24"
        android:drawablePadding="5dp"/>

    <EditText
        android:id="@+id/loginPasword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/loginUser"
        android:hint="@string/password"
        android:drawableStart="@drawable/lock"
        android:drawableLeft="@drawable/lock"
        android:drawablePadding="5dp" />

    <EditText
        android:id="@+id/message"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@+id/loginPasword"
        android:layout_above="@+id/loginSend"
        android:layout_marginVertical="12dp"
        android:hint="@string/message"
        android:gravity="top" />

    <Button
        android:id="@+id/loginSend"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginVertical="10dp"
        android:layout_alignParentBottom="true"
        android:text="@string/send" />
</RelativeLayout>

Resultado:

Me gusta que haya diferentes tipos de layout que se ajusten a nuestras necesidades de diseño.

RelativeLayout no tiene una orientacion como tal ya que utiliza referencias para poder estructurar a sus elementos.

Wow! Considero que esta fue la mejor explicación de RelativeLayout que me han podido dar hasta el día de hoy. Muy buena clase, excelente profesor.

Así quedo la nueva vista de mi login actualizado:

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

RelativeLayout es como el Flex del desarrollo web 🤓

En este repo estare agregando algunos de los ejercicios que se veran en el curso por si necesitan consultarlo 😄
https://github.com/EdmaryBaga/android0_remember/blob/loginRelativeLayout/app/src/main/res/layout/activity_profile.xml

esplicas fatal … 😦

En resumen con este layout nos olvidamos de la jerarquía para alinear los elementos ya que contamos con referencias para ubicarlos en pantalla, es más simple ubicar los elementos sin embargo dependiendo del diseño de la interfaz va a determinar el layout a usar.

Es mas productivo trabajar con este tipo layout

Me late mas relative layout puesto que es responsive.

Este relativeLayout es mucho mas comodo que el anterior

Buena clase, sin embargo el Relative Layout nos exige definir las posiciones de cada uno de los componentes

Excelente, me quedo muy claro siempre había tenido duda entre estos layouts y los que se vienen mas adelante.

![](

Excelente función practica

A RelativeLayout es una utilidad muy poderosa para diseñar una interfaz de usuario porque puede eliminar grupos de vistas anidados y mantener plana la jerarquía de diseño, lo que mejora el rendimiento. Si se encuentra utilizando varios LinearLayoutgrupos anidados , es posible que pueda reemplazarlos con uno solo RelativeLayout.

Resumen: Con Relative Layout podemos alinear elementos respecto a su padre y respecto a los elementos hermanos identificados por un id

Mis apuntes de esta Clase:

Una ventaja de RelativeLayout es que en este se pueden crear interfaces usando menos ViewGroups, lo cuál hace el árbol jerárquico menos pesado.

android:layout_centerInParent="true" → Centra un elemento de forma horizontal y vertical.

🛈 Nota: es una buena práctica en layouts que se quiere abarcar todo el espacio de pantalla, indicar un width de 0dp y usar alignParentStart y alignParentEnd para que el elemento ocupe todo el espacio disponible sin importar el espacio de la pantalla.