Constraint, Relative y Linear Layout

Como y por qué.

Layout implementado desde Android Studio

Cuando hablo con algún Android developer junior, me preguntan principalmente sobre Material Design y como lograr que los diseños complejos se vuelvan simples.
Desde hace un par de años los diseños se han vuelto mucho más sencillos de implementar en Android, contamos con tres principales layouts que todo Android developer debería conocer, me he encontrado con que muchos creen que un tipo de layout es mejor que otro tipo de layout, la realidad es que deberiamos de usar lo que se requiere para obtener el resultado más simple y más eficiente.
En este artículo les enseñaré como lograr un mismo diseño usando Linear Layout, Relative Layout y Constraint Layout

Vista desde Zeplin

Linear Layout

Cuando se inicia un proyecto en Android Studio el layout por default de nuestra primer Activity es un Linear Layout, (aunque se pueda confirgurar para que sea alguno de los otros layouts) es la forma más primitiva para realizar un conjunto de diseños.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="155dp"
        android:scaleType="fitXY"
        android:src="@drawable/example" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:layout_margin="16dp"
        android:textColor="#1f2f42"
        android:lineSpacingExtra="8sp"
        android:text="Cras mattis, diam nec ultricies sodales." />

    <TextView
        android:layout_width="105dp"
        android:layout_height="wrap_content"
        android:padding="4dp"
        android:layout_marginLeft="16dp"
        android:textSize="11sp"
        android:textColor="#ffffff"
        android:gravity="center"
        android:background="@drawable/round_view"
        android:text="Lorem Ipsum" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#bf1f2f42"
        android:lineSpacingExtra="12sp"
        android:layout_margin="16dp"
        android:text="Cras malesuada efficitur neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultrices arcu eu massa scelerisque, in egestas dui fringilla. " />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#bf1f2f42"
        android:layout_margin="16dp"
        android:lineSpacingExtra="12sp"
        android:text="Cras malesuada efficitur neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultrices arcu eu massa scelerisque." />

</LinearLayout>

Una de las principales cualidades de Linear Layout es android:orientation sus dos posibles opciones son: vertical y horizontal, esto quiere decir que todos los elementos dentro de sus llaves se acomodaran en esa dirección

Cuenta con el atributo android:gravity para posicionar los elementos en cierta posición, alguno de ellos son: center, center_vertical o center_horizontal

Puedes contar con android:layout_weight en cada uno de los hijos individuales, para especificar en cuantas partes debe dividirse las vistas de Linear Layout

Relative Layout

La descripción exacta, según Google es la siguiente: “Un layout donde las posiciones de las vistas hijas, pueden ser descritas con respecto a otras vistas hijas o de su padre.”

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="155dp"
        android:scaleType="fitXY"
        android:src="@drawable/example" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:layout_margin="16dp"
        android:textColor="#1f2f42"
        android:lineSpacingExtra="8sp"
        android:layout_below="@id/image"
        android:text="Cras mattis, diam nec ultricies sodales." />

    <TextView
        android:id="@+id/label"
        android:layout_width="105dp"
        android:layout_height="wrap_content"
        android:padding="4dp"
        android:layout_marginLeft="16dp"
        android:textSize="11sp"
        android:textColor="#ffffff"
        android:gravity="center"
        android:layout_below="@id/title"
        android:background="@drawable/round_view"
        android:text="Lorem Ipsum" />

    <TextView
        android:id="@+id/first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#bf1f2f42"
        android:lineSpacingExtra="12sp"
        android:layout_margin="16dp"
        android:layout_below="@id/label"
        android:text="Cras malesuada efficitur neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultrices arcu eu massa scelerisque, in egestas dui fringilla. " />

    <TextView
        android:id="@+id/second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#bf1f2f42"
        android:layout_margin="16dp"
        android:layout_below="@id/first"
        android:lineSpacingExtra="12sp"
        android:text="Cras malesuada efficitur neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultrices arcu eu massa scelerisque." />

</RelativeLayout>

Para acomodar las vistas con respecto a sus hermanos o contra el padre, es importante tomar en cuenta que para lograrlo se requiere que nuestras vistas cuenten con un id, que actuara como identificador para verificar a que elemento se le esta haciendo referencia: android:id="@+id/******"

El único parámetro que se utilizo para construir esta vista fue: android:layout_below="@id/******" Para conocer más parámetros puedes encontrarlos en este link sobre RelativeLayout.LayoutParams

Constraint Layout

Constraint Layout es el nuevo layout de Google, fue introducido en Google I/O 2016 con la idea de manejar vistas complejas de forma más sencilla y lineal. Para implementar Constraint Layout se tiene que agregar las siguientes lineas a build.gradle del proyecto (Proyect:Your-project)

repositories {
    maven {
        url 'https://maven.google.com'
    }
}

Y a tu build.gradle del modulo (Module:your-app)

dependencies {
      implementation 'com.android.support.constraint:constraint-layout:1.0.2'
}

A continuación podras realizar el siguiente layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="155dp"
        android:scaleType="fitXY"
        android:src="@drawable/example" />

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:lineSpacingExtra="8sp"
        android:text="Cras mattis, diam nec ultricies sodales."
        android:textColor="#1f2f42"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/image" />

    <TextView
        android:id="@+id/label"
        android:layout_width="105dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/round_view"
        android:gravity="center"
        android:padding="4dp"
        android:text="Lorem Ipsum"
        android:textColor="#ffffff"
        android:textSize="11sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/title" />

    <TextView
        android:id="@+id/first"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:lineSpacingExtra="12sp"
        android:text="Cras malesuada efficitur neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultrices arcu eu massa scelerisque, in egestas dui fringilla. "
        android:textColor="#bf1f2f42"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/label" />

    <TextView
        android:id="@+id/second"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:lineSpacingExtra="12sp"
        android:text="Cras malesuada efficitur neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultrices arcu eu massa scelerisque."
        android:textColor="#bf1f2f42"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/first" />

</android.support.constraint.ConstraintLayout>

Al igual que Relative Layout, se pueden acomodar las vistas con respecto a otras vistas o el padre, sin contar que se puede manejar ángulos en las vistas, y proporciona una vista mucho más lineal del código, existen una gran cantidad de parámetros y el editor de Android Studio vuelve mucho más simple la tarea de construir vistas. Para más información visita la documentación oficial de Constraint Layout

https://twitter.com/Hablodemi