ConstraintLayout en Android

ConstraintLayout es similar al de otros View Groups que hemos visto en Android, como RelativeLayout , LinearLayout y muchos más. En este artículo, veremos el uso de ConstraintLayout en Android. 

Atributos importantes de ConstraintLayout 

Ventajas de usar ConstraintLayout en Android

• ConstraintLayout le brinda la capacidad de diseñar completamente su interfaz de usuario con la función de arrastrar y soltar proporcionada por el editor de diseño de Android Studio.
• Ayuda a mejorar el rendimiento de la interfaz de usuario sobre otros diseños.
• Con la ayuda de ConstraintLayout, podemos controlar el grupo de widgets a través de una sola línea de código.
• Con la ayuda de ConstraintLayout, podemos agregar fácilmente animaciones a los componentes de la interfaz de usuario que usamos en nuestra aplicación.

Desventajas de usar ConstraintLayout 

• Cuando usamos el diseño de restricciones en nuestra aplicación, el código XML generado se vuelve un poco difícil de entender.
• En la mayoría de los casos, el resultado obtenido no será el mismo que pudimos ver en el editor de diseño.
• A veces tenemos que crear un archivo de diseño separado para manejar la interfaz de usuario para el modo horizontal.

¿En qué se diferencia ConstraintLayout de Linear Layout? 

• Con la ayuda de ConstraintLayout, podemos colocar nuestros componentes de la interfaz de usuario en cualquier tipo de orden, ya sea horizontal o vertical. Pero en el caso del diseño lineal, solo podemos organizar nuestros componentes de la interfaz de usuario de manera horizontal o vertical.
• El diseño lineal proporciona una usabilidad con la que podemos dividir por igual todos los componentes de la interfaz de usuario de manera horizontal o vertical utilizando la suma de peso, pero en el diseño de restricción, tenemos que organizar este componente de la interfaz de usuario manualmente.
• En el diseño lineal, la interfaz de usuario que se ve realmente en el editor de diseño de Android Studio será la misma que veremos en la aplicación, pero en el caso del diseño de restricción, si el componente de la interfaz de usuario no está restringido, la interfaz de usuario no lo estará. tienen el mismo aspecto que en el editor de diseño.

¿En qué se diferencia ConstraintLayout de RelativeLayout? 

• En Diseño de restricción, tenemos que agregar restricciones a la vista en los cuatro lados, mientras que en Diseño relativo podemos simplemente alinear nuestro componente de interfaz de usuario en relación con su ID usando los ID de los componentes de la interfaz de usuario.
• En Relative Layout, la interfaz de usuario que se ve realmente en el editor de diseño de Android Studio será la misma que veremos en la aplicación, pero en el caso del diseño de restricción, si el componente de la interfaz de usuario no está restringido, la interfaz de usuario no se ve igual que en el editor de diseño.

¿En qué se diferencia el diseño de restricciones del diseño de cuadrícula? 

• En el diseño de cuadrícula, los componentes de la interfaz de usuario solo se organizan en forma de cuadrícula y no podemos organizar los componentes de la interfaz de usuario de acuerdo con los requisitos, mientras que en el diseño de restricciones podemos alinear los componentes de la interfaz de usuario de acuerdo con los requisitos.
• En el diseño de cuadrícula, la interfaz de usuario que se ve realmente en el editor de diseño de Android Studio será la misma que veremos en la aplicación, pero en el caso del diseño de restricción, si el componente de la interfaz de usuario no está restringido, la interfaz de usuario no se ve igual que en el editor de diseño.

Implementación paso a paso para agregar diseño de restricción en Android 

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: Agregar dependencia para usar Diseño de restricción en Android

Vaya a la aplicación > Scripts de Gradle > archivo build.gradle y agregue la dependencia a continuación en la sección de dependencias.

implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

Ahora sincroniza tu proyecto y avanzaremos hacia el trabajo con activity_main.xml. 

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?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:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MyActivity">
  
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="Geeks for Geeks"
        android:textColor="@color/black"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Como estamos trabajando solo con archivos de diseño, no tenemos que agregar ningún código en el archivo Java o Kotlin para MainActivity. Después de agregar este código, ahora tenemos que ejecutar la aplicación para ver el resultado de la aplicación. 

Producción: