Diseño de Interfaces con ConstraintLayout en Android Studio

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:0011:11

Diseño de Interfaces con ConstraintLayout en Android Studio

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

Clase 14 de 20

Clase 14 / 20

Recursos

Cuando desarrollas interfaces en Android, contar con un sistema de alineación flexible marca la diferencia entre una pantalla estática y una que reacciona dinámicamente a los cambios. Constraint Layout es precisamente ese sistema, y entender cómo funciona te permitirá crear diseños más robustos y adaptables desde Android Studio.

¿Qué es Constraint Layout y por qué es el layout por defecto?

Android incluye de serie varios layouts como LinearLayout, RelativeLayout y FrameLayout. Sin embargo, Constraint Layout es un layout externo que Android Studio agrega automáticamente en los proyectos nuevos [01:07]. Funciona de manera similar a RelativeLayout, pero con una ventaja clave: los elementos consideran a los demás componentes con los que se alinean y reaccionan cuando ocurre alguna modificación.

Esto lo convierte en la opción predilecta para:

Crear animaciones de forma más sencilla.
Agregar elementos dinámicos que se adapten a cambios de ancho o posición.
Trabajar con alineaciones precisas entre vistas.

Cuando creas una nueva actividad en Android Studio —por ejemplo, una Empty Activity—, el layout generado viene con Constraint Layout por defecto [02:20].

¿Dónde se configura la dependencia de Constraint Layout?

Dentro de la estructura del proyecto, en Gradle Scripts, existe un archivo llamado build.gradle que apunta a app [01:30]. En su sección de dependencies, Android Studio ya incluye la dependencia de Constraint Layout para que puedas utilizarla de inmediato.

¿Qué pasa si los elementos no están alineados?

Una regla fundamental: todos los elementos dentro de un Constraint Layout deben tener al menos una alineación horizontal y una vertical [06:48]. Si alguna vista no cumple esta condición, Android Studio mostrará errores de compilación indicando qué elementos carecen de alineación.

¿Cómo se aplican los constraints a cada elemento?

Al seleccionar un elemento en la vista de preview, Android Studio muestra cuatro círculos en los bordes de cada vista [05:19]. Estos representan los puntos de alineación: top, bottom, start y end. Puedes conectar, por ejemplo, el top de una vista con el bottom de otra, o el start con el start del padre.

Para la pantalla de login, el proceso de alineación sigue esta lógica:

Logotipo: se alinea su top al top del parent, su start al start del parent y su end al end del parent. Esto lo centra horizontalmente y lo posiciona arriba [05:45].
Campo de usuario: su top se alinea con el bottom del logo, y tanto start como end se alinean al parent. Se agrega un margen de 12 dp para dar espaciado [07:18].
Campo de password: su top se alinea al bottom del campo de usuario, repitiendo start y end al parent con el mismo margen de 12 dp [08:23].
Botón: su bottom se alinea al bottom del parent, colocándolo en la parte inferior de la pantalla. También se estira con start y end al parent [08:48].

¿Qué es el namespace app y por qué es necesario?

Cuando Android Studio genera constraints automáticos, agrega un namespace llamado app que corresponde a res-auto [04:42]. Este namespace es indispensable porque sin él, Constraint Layout no puede estructurar ni organizar la pantalla correctamente.

¿Cómo organizar el XML y aprovechar las herramientas de Android Studio?

Android Studio ofrece la opción de formatear el XML automáticamente para mantener una estructura ordenada [07:50]. En macOS se utiliza Command + Alt + L y en Windows Control + Alt + L. Esta acción reorganiza los atributos según su tipo, facilitando la lectura del código.

Otra herramienta útil es el botón de auto connections en la vista de blueprints [04:00], que intenta generar constraints automáticamente. Aunque puede ser conveniente en algunos casos, no siempre produce el resultado visual esperado, por lo que es recomendable definir los constraints manualmente.

Una ventaja significativa de Constraint Layout es su comportamiento en tiempo de ejecución [09:30]. Si durante la ejecución de la aplicación un elemento se oculta —por ejemplo, cambiando su atributo de visibility—, los demás elementos se reajustan automáticamente según sus constraints. Esto permite crear interfaces donde los componentes se mueven o desaparecen de forma fluida sin romper el diseño.

¿Ya probaste migrar tus layouts existentes a Constraint Layout? Comparte tu experiencia y las diferencias que notaste en el rendimiento de tu interfaz.

Santiago Rojas Colunge

Hace 6 años

Hola, en este mometo me encuentro diseñando una aplicacion, pero tengo un problema en mi dispositivo que es android 7.0, tengo un switch pero en ese dispositivo no quiere funcionar el switch y no entiendo por que?, utilizo constrain y varios linear layout alguna sugerencia que por favor me pueda ayudar, dejo aqui el archivo xml. Muchas gracias.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="3"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/linearLayout4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <EditText
            android:id="@+id/edithora"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="1sp"
            android:layout_marginLeft="10sp"
            android:hint="@string/hora"
            android:importantForAutofill="no"
            android:inputType="number"
            android:padding="10sp"
            android:textSize="14sp" />

        <EditText
            android:id="@+id/Editminutos"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5sp"
            android:layout_marginLeft="20sp"
            android:hint="@string/min"
            android:importantForAutofill="no"
            android:inputType="number"
            android:padding="10sp"
            android:textSize="14sp" />

        <EditText
            android:id="@+id/EditSEC"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5sp"
            android:layout_marginLeft="20sp"
            android:hint="@string/seg"
            android:importantForAutofill="no"
            android:inputType="number"
            android:padding="10sp"
            android:textSize="14sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:text="@string/salidas" />

        <CheckBox
            android:id="@+id/checkBoxA"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:text="@string/a" />


        <CheckBox
            android:id="@+id/checkBoxB"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:text="@string/b" />

    </LinearLayout>


    <TextView
        android:id="@+id/textViewRepetir"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="100dp"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="52dp"
        android:text="@string/Diasrepetidos"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textViewDuracionYEnvio"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="100dp"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="136dp"
        android:text="@string/duraci_n_y_envio_de_datos"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="84dp"
        android:orientation="horizontal"
        android:weightSum="7"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <CheckBox
            android:id="@+id/checkBoxLunes"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:text="@string/Dia1" />

        <CheckBox
            android:id="@+id/checkBoxMartes"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:text="@string/Dia2" />

        <CheckBox
            android:id="@+id/checkBoxMiercoles"
            android:layout_width="55dp"
            android:layout_height="wrap_content"
            android:text="@string/Dia3" />

        <CheckBox
            android:id="@+id/checkBoxJueves"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:text="@string/Dia4" />

        <CheckBox
            android:id="@+id/checkBoxViernes"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:text="@string/Dia5" />

        <CheckBox
            android:id="@+id/checkBoxSabado"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:text="@string/Dia6" />

        <CheckBox
            android:id="@+id/checkBoxDomingo"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:text="@string/Dia7" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="168dp"
        android:orientation="horizontal"
        android:weightSum="4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <EditText
            android:id="@+id/Duración"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:autofillHints=""
            android:hint="@string/duraci_n"
            android:inputType="number" />

        <CheckBox
            android:id="@+id/checkboxsegundos"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginLeft="5dp"
            android:text="@string/segche" />

        <CheckBox
            android:id="@+id/checkboxminutos"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="1dp"
            android:layout_marginLeft="1dp"
            android:text="@string/minche" />

        <CheckBox
            android:id="@+id/checkboxhoras"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="1dp"
            android:layout_marginLeft="1dp"
            android:text="@string/horache" />

        <Switch
            android:id="@+id/switchsend"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:button="@drawable/ic_send_black_24dp"
            android:clickable="true"
            android:focusable="true"
            android:textColorLink="#D32F2F" />


    </LinearLayout>

    <TextView
        android:id="@+id/textViewCambiarFechaYHora"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="100dp"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="230dp"
        android:text="@string/cambiar_fecha_y_hora"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="260dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <EditText
            android:id="@+id/EditTextAñoTemp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="@string/a_o"
            android:inputType="number"
            android:importantForAutofill="no"/>
        <EditText
            android:id="@+id/EditTextMesTemp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="@string/mes"
            android:inputType="text"
            android:importantForAutofill="no"/>
        <EditText
            android:id="@+id/EditTextDiaTemp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="@string/dia"
            android:inputType="number"
            android:importantForAutofill="no"/>
        <EditText
            android:id="@+id/EditTextHoraTemp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="@string/horaTemp"
            android:inputType="number"
            android:importantForAutofill="no"/>
        <EditText
            android:id="@+id/EditTextMinutosTemp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="@string/minTemp"
            android:inputType="number"
            android:importantForAutofill="no"/>
        <EditText
            android:id="@+id/EditTextSegundosTemp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="@string/segTemp"
            android:inputType="number"
            android:importantForAutofill="no"/>

        <Switch
            android:id="@+id/switchsendTemp"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:button="@drawable/ic_send_black_24dp"
            android:clickable="true"
            android:focusable="true"
            android:textColorLink="#D32F2F" />

    </LinearLayout>

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/fabmenu"
        android:layout_width="59dp"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:clickable="true"
        android:focusable="true"
        app:fab_addButtonColorNormal="@color/colorPrimaryDark"
        app:fab_addButtonColorPressed="@color/colorPrimaryDark"
        app:fab_labelStyle="@style/etiqueta"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"
        app:srcCompat="@drawable/navigate">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_colorNormal="?attr/colorAccent"
            app:fab_icon="@drawable/ic_bluetooth_connected_black_24dp"
            app:fab_size="normal"
            app:fab_title="Bluetooth" />

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_colorNormal="?attr/colorAccent"
            app:fab_icon="@drawable/ic_access_alarms_black_24dp"
            app:fab_size="normal"
            app:fab_title="Alarmas" />

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_colorNormal="?attr/colorAccent"
            app:fab_icon="@drawable/icono_expand"
            app:fab_size="normal"
            app:fab_title="Contraer" />

    </com.getbase.floatingactionbutton.FloatingActionsMenu>


</androidx.constraintlayout.widget.ConstraintLayout>```

Emmanuel Rodríguez

Hace 6 años

Cargué tu código y, salvo por tu FloatingActionsMenu, funciona correctamente aunque no ubico el enfoque porque me faltó tu archivo String, además del Java/Kotlin.

Ojalá pudieras compartir el repositorio del código para visualizarlo mejor.

Santiago Rojas Colunge

Hace 6 años

Muchas gracias!!, si ahora resolvi el problema es mas una cuestion de utilizar mejor cada una de las propiedades que ofrece android studio, por ejemplo combinar constrainLayout con LinearLayout me parece una excelente opcion para organizar los elementos en pantalla, ademas utilizar match parent y wrap Content, con eso se ayusta a cualquier pantalla.

Comentarios (30)30 comentarios

Christian Gómez

Luis Canchari

MARTIN SERNA DIAZ

Hace 5 años

Victor Hugo Gallegos Mota

Cristian Camilo Díaz Pizza

Hace 4 años

wilking trinidad

Hace 3 años

Denis Morales

Hace 7 años

Andres López

Ricardo Celis

Profesor

Kevin Parra Lopez

Diego Valadez Olmos

Brandon Malagon

Nicolás Beltrami

ERIKA ALEXANDRA GARCIA BARRIOS

Enrique Rabell Talamantes

Erik Elyager

WILLIAM FERNEY CHAPARRO CHAPARRO

Elvis Salvatierra

Sergio Lasso

Fernando Poveda García

Usuario anónimo

User

Sinuhe Jaime Valencia

Jesus Gaviria Rubio

Josué Eduardo García Estrada

Hace un año

Jonny jordy Tejada Troncoso

Hace 2 años

Diego Geovanny Bracero

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 ConstraintLayout en Android Studio

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