Constraint Layout

Constraint Layout consente di creare layout complessi, basandosi sulle relazioni tra le viste, definendo dei vincoli per allinearle e posizionarle rispetto alle altre.

Per centrare una view basta creare vincoli orizzontali e verticali sui quattro lati: Top, Start, End, Bottom:
<TextView
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:text=”Hello World!”
        app:layout_constraintBottom_toBottomOf=”parent”
        app:layout_constraintLeft_toLeftOf=”parent”
        app:layout_constraintRight_toRightOf=”parent”
        app:layout_constraintTop_toTopOf=”parent” />

Quindi per spostarla in alto a destra:
<TextView
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:text=”Hello World!”
        app:layout_constraintEnd_toEndOf=”parent”
        app:layout_constraintTop_toTopOf=”parent”/>

Per vincolarla in alto a sinistra:
<TextView
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:text=”Hello World!”
        app:layout_constraintStart_toStartOf=”parent”
        app:layout_constraintTop_toTopOf=”parent”/>

Per creare un vincolo in basso a destra:
<TextView
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:text=”Hello World!”
        app:layout_constraintEnd_toEndOf=”parent”
        app:layout_constraintBottom_toBottomOf=”parent”/>

In basso a sinistra:
<TextView
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:text=”Hello World!”
        app:layout_constraintStart_toStartOf=”parent”
        app:layout_constraintBottom_toBottomOf=”parent”/>

Per creare una spaziatura tra un vincolo e una view si utilizzano gli attributi:
android:layout_marginStart, per il margine sinistro.
android:layout_marginEnd, per il margine destro.
android:layout_marginTop, per il margine superiore.
android:layout_marginBottom, per il margine inferiore:
<?xml version=”1.0″ encoding=”utf-8″?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
    xmlns:app=”http://schemas.android.com/apk/res-auto&#8221;
    xmlns:tools=”http://schemas.android.com/tools&#8221;
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”
    tools:context=”.MainActivity”>

    <TextView
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:text=”Hello World!”
        app:layout_constraintBottom_toBottomOf=”parent”
        android:layout_marginBottom=”100dp”/>

</androidx.constraintlayout.widget.ConstraintLayout>

Si può spostare una view lungo l’asse utilizzando il bias, che per impostazione predefinita è 0,5 con un valore decimale compreso tra 0(sinistra e in alto) e 1(destra e in basso):
<TextView
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:text=”Hello World!”
        app:layout_constraintBottom_toBottomOf=”parent”
        app:layout_constraintLeft_toLeftOf=”parent”
        app:layout_constraintRight_toRightOf=”parent”
        app:layout_constraintTop_toTopOf=”parent”
app:layout_constraintHorizontal_bias=”0.10″/>

Per creare una catena orizzontale:
<?xml version=”1.0″ encoding=”utf-8″?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
    xmlns:app=”http://schemas.android.com/apk/res-auto&#8221;
    xmlns:tools=”http://schemas.android.com/tools&#8221;
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”
    tools:context=”.MainActivity”>

   <Button
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
android:id=”@+id/button1″
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintTop_toTopOf=”parent”
        app:layout_constraintLeft_toLeftOf= “parent”
        app:layout_constraintRight_toLeftOf= “@+id/button2”  />

   <Button
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
android:id=”@+id/button2″
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintTop_toTopOf=”parent”
        app:layout_constraintLeft_toRightOf=”@+id/button1″
        app:layout_constraintRight_toLeftOf=  “@+id/button3”  />

   <Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/button3″
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintTop_toTopOf=”parent”
app:layout_constraintLeft_toRightOf=”@+id/button2″
app:layout_constraintRight_toRightOf=”parent”/>
</androidx.constraintlayout.widget.ConstraintLayout>

Una catena verticale:
<Button
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
android:id=”@+id/button2″
app:layout_constraintLeft_toLeftOf=”parent”
app:layout_constraintRight_toRightOf=”parent”
        app:layout_constraintTop_toBottomOf=”@+id/button1″
        app:layout_constraintBottom_toTopOf=  “@+id/button3”  />

   <Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/button3″
app:layout_constraintLeft_toLeftOf=”parent”
app:layout_constraintRight_toRightOf=”parent”
app:layout_constraintTop_toBottomOf=”@+id/button2″
app:layout_constraintBottom_toBottomOf=”parent”/>
</androidx.constraintlayout.widget.ConstraintLayout>

Si può controllare la disposizione degli elementi all’interno della catena usando gli attribuiti
“app:layout_constraintHorizontal_chainStyle”
“app:layout_constraintVertical_chainStyle”, che si applicano al primo elemento della catena, con tre possibili valori:
spread: per distribuire gli elementi in modo uniforme nello spazio disponibile.
packed: per raggruppare gli elementi al centro dello spazio disponibile.
spread_inside: il primo e l’ultimo elemento sono fissati sui rispettivi bordi, mentre gli altri sono distribuiti uniformemente nel mezzo:
   <Button
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
android:id=”@+id/button1″
app:layout_constraintLeft_toLeftOf=”parent”
app:layout_constraintRight_toRightOf=”parent”
        app:layout_constraintTop_toTopOf= “parent”
        app:layout_constraintBottom_toTopOf= “@+id/button2” 
app:layout_constraintVertical_chainStyle=”spread_inside”/>

   <Button
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
android:id=”@+id/button2″
app:layout_constraintLeft_toLeftOf=”parent”
app:layout_constraintRight_toRightOf=”parent”
        app:layout_constraintTop_toBottomOf=”@+id/button1″
        app:layout_constraintBottom_toTopOf=  “@+id/button3”  />

   <Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/button3″
app:layout_constraintLeft_toLeftOf=”parent”
app:layout_constraintRight_toRightOf=”parent”
app:layout_constraintTop_toBottomOf=”@+id/button2″
app:layout_constraintBottom_toBottomOf=”parent”/>