Constraint Layout es la nueva tecnología de Android Studio para crear interfaces de usuario en distintos tamaños y resoluciones. Similar como pasa en xCode con los storyboards. Ahora bastará crear una vista e implementar los constraints para crear una interfaz de usuario de todos los tamaños de pantalla que existen en el mercado.
Empecemos Creando Nuestro Proyecto
Creamos un proyecto nuevo en Android Studio y le pondremos el nombre de TestingContraintLayout, puedes guardarlo donde quieras:
Ya sabes, escoges tu Api, Seleccionamos un EmptyActivity y dejamos que el resto lo haga el IDE por nosotros:
¿Cómo implementar Constraint Layout?
Para lograr esto iremos al SDK Manager y nos situaremos en la pestaña de SDK Tools:
Puedes ver: ¿Qué es y para que sirve Android SDK?
En el renglón de Support Repository, marcamos la casilla <<ConstraintLayout for Android>> y <<Solver for ConstraintLayout>>. Presiona en aplicar y acepta los términos para instalar las librerías. Por cierto, debes poner atención a que versión de librería estás descargando, así al momento de implementar la dependencia tenga coherencia con el SDK.
En mi caso tengo la versión 1.0.2 de Contraint Layout por lo cual implementaremos la siguiente dependencia dentro mi archivo app.gradle
compile ‘com.android.support.constraint:constraint-layout:1.0.1’
Luego presionas el boton de sincronizar y con eso ya tenemos implementado Constraint Layout en nuestro proyecto.
Convirtiendo nuestro Layout a Constraint
Convertir tu clásico Linear Layout o Relative Layout a un Constraint no es tan complicado, sin embargo yo recomiendo que Constraint Layout se implemente en nuevos proyecto.
En los proyectos que se encuentran desarrollados y muy bien optimizados, no es tan aconsejable implementar esta tecnología, por el simple motivo que tendrían que mover todas las vistas y rediseñar la app (llevaría mucho tiempo).
Ahora situémonos en res/layout/activity_main.xml y abrimos el archivo.
En <<Component Tree>> marcamos con clic derecho nuestro layout (sea Linear o Relative) y seleccionamos la opción Convert layout to ConstraintLayout.
Listo con eso hemos convertido nuestro layout a ConstraintLayout.
¿Cómo Agregar Una Constraint Android?
Los desarrolladores de Google quisieron implementar una nueva forma más intuitiva para interactuar con los constraints al estilo DRAG AND DROP, puedes crear tus constraints fácil y rápido.
Hay dos maneras de crear los contraint Layout, al igual que en muchos casos, puedes hacerlo de forma manual o de forma automatizada. En este tutorial te enseñare de manera manual, ya que para mí es más fiable que hacerlo de manera automática además que no es tan automático como lo vende Android Studio, tendremos que mover datos y hace que sea doble trabajo al final de cuentas.
Vamos a hacer que nuestro xml tenga los siguientes widgets y que se vean de esta manera:
Bueno ya sabés lo sencillo que es colocar los widgets de Android. Aquí viene la parte que todos queremos saber, cada widgets ahora tendrá una especie de chibolitas en cada uno de sus extremos.
Tan sencillo como presionar el círculo y jalar hacia donde quieres que tomen márgenes y listo. Lo sé es bastante simple y extraño, y con los demás widgets procedemos de igual manera.
Recuerda que los widgets deben tener coherencia con cada uno de los widgets y márgenes. Si deseas tener más ilustraciones de los constraint layout, te recomiendo que revises la documentación oficial de Contraint Layout en Android para que no te queden dudas al respecto.
Es cuestión de práctica, cuando domines la lógica de los constraint se te haré súper fácil desarrollar interfaces de usuario ¡increíbles! en Android Studio con Constraint Layout.