Crea una UI reattiva con ConstraintLayout   Parte di Android Jetpack.

Prova Compose

Jetpack Compose è il toolkit per la UI consigliato per Android. Scopri come utilizzare i layout in Crea.

ConstraintLayout in Compose →

ConstraintLayout consente di creare layout grandi e complessi con una gerarchia di oggetti View piatta, senza gruppi di oggetti View nidificati. È simile a RelativeLayout in quanto tutte le visualizzazioni sono disposte in base alle relazioni tra le visualizzazioni secondarie e il layout principale, ma è più flessibile di RelativeLayout e più facile da usare con l'editor di layout di Android Studio.

Tutta la potenza di ConstraintLayout è disponibile direttamente dagli strumenti visivi dell'editor layout, perché l'API Layout e l'editor layout sono progettati appositamente l'uno per l'altro. Puoi creare il layout con ConstraintLayout interamente trascinando gli elementi anziché modificare il file XML.

Questa pagina mostra come creare un layout con ConstraintLayout in Android Studio 3.0 o versioni successive. Per saperne di più sull'editor layout, consulta Creare una UI con l'editor layout.

Per visualizzare una serie di layout che puoi creare con ConstraintLayout, consulta il progetto Constraint Layout Examples su GitHub.

Panoramica dei vincoli

Per definire la posizione di una visualizzazione in ConstraintLayout, devi aggiungere almeno un vincolo orizzontale e uno verticale per la visualizzazione. Ogni vincolo rappresenta una connessione o un allineamento a un'altra visualizzazione, al layout principale o a una linea guida invisibile. Ogni vincolo definisce la posizione della visualizzazione lungo l'asse verticale o orizzontale. Ogni visualizzazione deve avere almeno un vincolo per ogni asse, ma spesso ne sono necessari di più.

Quando rilasci una visualizzazione nel Layout Editor, questa rimane nella posizione in cui la lasci anche se non ha vincoli. Solo per semplificare la modifica. Se una visualizzazione non ha vincoli quando esegui il layout su un dispositivo, viene disegnata in posizione [0,0] (l'angolo in alto a sinistra).

Nella figura 1, il layout ha un bell'aspetto nell'editor, ma non è presente alcun vincolo verticale nella visualizzazione C. Quando questo layout viene disegnato su un dispositivo, la visualizzazione C è allineata orizzontalmente ai bordi sinistro e destro della visualizzazione A, ma viene visualizzata nella parte superiore dello schermo perché non ha vincoli verticali.

Figura 1. L'editor mostra la visualizzazione C sotto la visualizzazione A, ma non ha vincoli verticali.

Figura 2. La visualizzazione C ora è vincolata verticalmente sotto la visualizzazione A.

Sebbene un vincolo mancante non causi un errore di compilazione, l'editor layout indica i vincoli mancanti come errore nella barra degli strumenti. Per visualizzare gli errori e gli altri avvisi, fai clic su Mostra avvisi ed errori . Per aiutarti a evitare vincoli mancanti, il Layout Editor aggiunge automaticamente i vincoli con le funzionalità Connessione automatica e deduzione dei vincoli.

Aggiungere ConstraintLayout al progetto

Per utilizzare ConstraintLayout nel tuo progetto:

1. Assicurati di aver dichiarato il repository maven.google.com nel file settings.gradle:

   Alla moda

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   Kotlin

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

2. Aggiungi la libreria come dipendenza nel file build.gradle a livello di modulo, come mostrato nell'esempio seguente. L'ultima versione potrebbe essere diversa da quella mostrata nell'esempio.

   Groovy

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.1"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.1"
   }

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.1")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.1")
   }

3. Nella barra degli strumenti o nella notifica di sincronizzazione, fai clic su Sincronizza progetto con file Gradle.

Ora puoi creare il layout con ConstraintLayout.

Convertire un layout

Figura 3. Il menu per convertire un layout in ConstraintLayout.

Per convertire un layout esistente in un layout vincolato:

1. Apri il layout in Android Studio e fai clic sulla scheda Design nella parte inferiore della finestra dell'editor.
2. Nella finestra Struttura dei componenti, fai clic con il tasto destro del mouse sul layout e poi su Converti LinearLayout in ConstraintLayout.

Creare un nuovo layout

Per avviare un nuovo file di layout con vincoli:

1. Nella finestra Progetto, fai clic sulla cartella del modulo e seleziona File > Nuovo > XML > Layout XML.
2. Inserisci un nome per il file di layout e inserisci "androidx.constraintlayout.widget.ConstraintLayout" per il tag radice.
3. Fai clic su Fine.

Aggiungere o rimuovere un vincolo

Per aggiungere un vincolo:

Video 1. Il lato sinistro di una visualizzazione è vincolato al lato sinistro del contenitore.

1. Trascina una visualizzazione dalla finestra Tavolozza nell'editor.

   Quando aggiungi una visualizzazione in un ConstraintLayout, questa viene visualizzata in un riquadro di delimitazione con handle di ridimensionamento quadrati in ogni angolo e handle di vincolo circolari su ogni lato.

2. Fai clic sulla visualizzazione per selezionarla.
3. Esegui una delle seguenti operazioni:
   • Fai clic su un punto di manipolazione del vincolo e trascinalo in un punto di ancoraggio disponibile. Questo punto può essere il bordo di un'altra visualizzazione, il bordo del layout o una linea guida. Tieni presente che, mentre trascini il punto di manipolazione del vincolo, l'editor del layout mostra i potenziali ancoraggi di connessione e le sovrapposizioni blu.

   • Fai clic su uno dei pulsanti Crea una connessione nella sezione Layout della finestra Attributi, come mostrato nella Figura 4.

     

     Figura 4. La sezione Layout della finestra Attributi consente di creare connessioni.

Quando viene creato il vincolo, l'editor gli assegna un margine predefinito per separare le due visualizzazioni.

Quando crei vincoli, ricorda le seguenti regole:

• Ogni visualizzazione deve avere almeno due vincoli: uno orizzontale e uno verticale.
• Puoi creare vincoli solo tra un punto di manipolazione del vincolo e un punto di ancoraggio che condividono lo stesso piano. Un piano verticale, ovvero i lati sinistro e destro di una visualizzazione, può essere vincolato solo a un altro piano verticale, mentre le linee di base possono essere vincolate solo ad altre linee di base.
• Ogni handle di vincolo può essere utilizzato per un solo vincolo, ma puoi creare più vincoli da viste diverse allo stesso punto di ancoraggio.

Puoi eliminare un vincolo in uno dei seguenti modi:

• Fai clic su un vincolo per selezionarlo, quindi fai clic su Elimina.

• Control-click (Command-click su macOS) su un ancoraggio del vincolo. Il vincolo diventa rosso per indicare che puoi fare clic per eliminarlo, come mostrato nella Figura 5.

  

  Figura 5. Un vincolo rosso indica che puoi fare clic per eliminarlo.

• Nella sezione Layout della finestra Attributi, fai clic su un ancoraggio del vincolo, come mostrato nella Figura 6.

  

  Figura 6. Fai clic su un ancoraggio del vincolo per eliminarlo.

Video 2. Aggiunta di un vincolo che si oppone a uno esistente.

Se aggiungi vincoli opposti a una vista, le linee dei vincoli si arrotolano come una molla per indicare le forze opposte, come mostrato nel video 2. L'effetto è più visibile quando le dimensioni della visualizzazione sono impostate su "Fisso" o "Contenuti a capo", nel qual caso la visualizzazione è centrata tra i vincoli. Se invece vuoi che la visualizzazione si adatti alle limitazioni, cambia le dimensioni in "Rispetta i vincoli". Se vuoi mantenere le dimensioni attuali ma spostare la visualizzazione in modo che non sia centrata,regola la distorsione del vincolo.

Puoi utilizzare i vincoli per ottenere diversi tipi di comportamento del layout, come descritto nelle sezioni seguenti.

Posizione genitore

Vincola il lato di una visualizzazione al bordo corrispondente del layout.

Nella figura 7, il lato sinistro della visualizzazione è collegato al bordo sinistro del layout principale. Puoi definire la distanza dal bordo con il margine.

Figura 7. Un vincolo orizzontale all'elemento principale.

Posizione dell'ordine

Definisci l'ordine di visualizzazione di due viste, in verticale o in orizzontale.

Nella figura 8, B è vincolato a trovarsi sempre a destra di A e C è vincolato a trovarsi sotto A. Tuttavia, questi vincoli non implicano l'allineamento, quindi B può ancora spostarsi verso l'alto e verso il basso.

Immagine 8. Un vincolo orizzontale e verticale.

Allineamento

Allinea il bordo di una visualizzazione allo stesso bordo di un'altra visualizzazione.

Nella figura 9, il lato sinistro di B è allineato al lato sinistro di A. Se vuoi allineare i centri di visualizzazione, crea un vincolo su entrambi i lati.

Puoi compensare l'allineamento trascinando la visualizzazione verso l'interno dal vincolo. Ad esempio, la figura 10 mostra B con un allineamento di offset di 24 dp. L'offset è definito dal margine della visualizzazione vincolata.

Puoi anche selezionare tutte le visualizzazioni che vuoi allineare, quindi fare clic su Allinea nella barra degli strumenti per selezionare il tipo di allineamento.

Figura 9. Un vincolo di allineamento orizzontale.

Figura 10. Un vincolo di allineamento orizzontale con offset.

Allineamento della linea di base

Allinea la linea di base del testo di una visualizzazione alla linea di base del testo di un'altra visualizzazione.

Nella figura 11, la prima riga di B è allineata al testo in A.

Per creare un vincolo di base, fai clic con il tasto destro del mouse sulla visualizzazione testo che vuoi vincolare, quindi fai clic su Mostra linea di base. Poi fai clic sulla linea di base del testo e trascinala in un'altra linea di base.

Figura 11. Un vincolo di allineamento della linea di base.

Limitare a una linea guida

Puoi aggiungere una linea guida verticale o orizzontale che ti consente di vincolare le tue visualizzazioni ed è invisibile agli utenti della tua app. Puoi posizionare la guida all'interno del layout in base alle unità dp o a una percentuale rispetto al bordo del layout.

Per creare una guida, fai clic su Guide nella barra degli strumenti, poi fai clic su Aggiungi guida verticale o Aggiungi guida orizzontale.

Trascina la linea punteggiata per riposizionarla e fai clic sul cerchio sul bordo della guida per attivare/disattivare la modalità di misurazione.

Figura 12. Una visualizzazione vincolata a una linea guida.

Limita a una barriera

Simile a una linea guida, una barriera è una linea invisibile a cui puoi vincolare le visualizzazioni, tranne per il fatto che una barriera non definisce la propria posizione. Invece, la posizione della barriera si sposta in base alla posizione delle visualizzazioni contenute al suo interno. Questa funzionalità è utile quando vuoi limitare una visualizzazione a un insieme di visualizzazioni anziché a una visualizzazione specifica.

Ad esempio, nella figura 13 la visualizzazione C è vincolata al lato destro di una barriera. La barriera è impostata sulla "fine" (o sul lato destro, in un layout da sinistra a destra) sia della visualizzazione A che della visualizzazione B. La barriera si sposta a seconda che il lato destro della visualizzazione A o della visualizzazione B sia il più a destra.

Per creare una barriera:

1. Fai clic su Linee guida nella barra degli strumenti, quindi fai clic su Aggiungi barriera verticale o Aggiungi barriera orizzontale.
2. Nella finestra Albero dei componenti, seleziona le visualizzazioni che vuoi inserire all'interno della barriera e trascinale nel componente barriera.
3. Seleziona la barriera dall'albero dei componenti, apri la finestra Attributi e poi imposta barrierDirection.

Ora puoi creare un vincolo da un'altra visualizzazione alla barriera.

Puoi anche vincolare le visualizzazioni all'interno della barriera alla barriera. In questo modo, puoi allineare tutte le visualizzazioni nella barriera tra loro, anche se non sai quale visualizzazione è la più lunga o la più alta.

Puoi anche includere una guida all'interno di una barriera per garantire una posizione "minima" per la barriera.

Figura 13. La visualizzazione C è vincolata a una barriera, che si sposta in base alla posizione e alle dimensioni sia della visualizzazione A che della visualizzazione B.

Regola la distorsione del vincolo

Quando aggiungi un vincolo a entrambi i lati di una visualizzazione e le dimensioni della visualizzazione per la stessa dimensione sono "fisse" o "contenuto a capo", la visualizzazione viene centrata tra i due vincoli con una distorsione del 50% per impostazione predefinita. Puoi regolare la distorsione trascinando il cursore nella finestra Attributi o trascinando la visualizzazione, come mostrato nel video 3.

Se invece vuoi che la visualizzazione si estenda per soddisfare i vincoli, imposta le dimensioni su "Corrispondenza con i vincoli".

Video 3. Regolazione della distorsione del vincolo.

Regolare le dimensioni della visualizzazione

Figura 14. Quando selezioni una visualizzazione, la finestra Attributi include controlli per 1 proporzioni, 2 eliminazione dei vincoli, 3 modalità altezza o larghezza, 4 margini e 5 bias dei vincoli. Puoi anche evidenziare singole limitazioni nell'editor layout facendo clic su di esse nell'elenco 6 delle limitazioni.

Puoi utilizzare i punti di manipolazione angolari per ridimensionare una visualizzazione, ma in questo modo le dimensioni vengono codificate in modo permanente e la visualizzazione non viene ridimensionata per contenuti o dimensioni dello schermo diversi. Per selezionare una modalità di ridimensionamento diversa, fai clic su una visualizzazione e apri la finestra Attributi sul lato destro dell'editor.

Nella parte superiore della finestra Attributi si trova lo strumento di ispezione della visualizzazione, che include i controlli per diversi attributi di layout, come mostrato nella figura 14. Questa opzione è disponibile solo per le visualizzazioni in un layout vincolato.

Puoi modificare il modo in cui vengono calcolate l'altezza e la larghezza facendo clic sui simboli indicati con il callout 3 nella figura 14. Questi simboli rappresentano la modalità di ridimensionamento come segue. Fai clic sul simbolo per alternare queste impostazioni:

• Fissa: specifica una dimensione specifica nella casella di testo seguente o ridimensionando la visualizzazione nell'editor.
• A capo: la visualizzazione si espande solo quanto necessario per adattarsi ai contenuti.
• layout_constrainedWidth

Imposta questo valore su true per consentire alla dimensione orizzontale di rispettare i vincoli. Per impostazione predefinita, un widget impostato su WRAP_CONTENT non è limitato da vincoli.

• Vincoli di corrispondenza: la visualizzazione si espande il più possibile per soddisfare i vincoli su ciascun lato, dopo aver tenuto conto dei margini della visualizzazione. Tuttavia, puoi modificare questo comportamento con i seguenti attributi e valori. Questi attributi vengono applicati solo quando imposti la larghezza della visualizzazione su "Corrispondenza vincoli":
  • layout_constraintWidth_min

    Viene utilizzata una dimensione dp per la larghezza minima della visualizzazione.

  • layout_constraintWidth_max

    Viene utilizzata una dimensione dp per la larghezza massima della visualizzazione.

  Tuttavia, se la dimensione specificata ha un solo vincolo, la visualizzazione si espande per adattarsi ai contenuti. L'utilizzo di questa modalità per l'altezza o la larghezza ti consente anche di impostare un rapporto di dimensioni.

Nota: non puoi utilizzare match_parent per nessuna visualizzazione in un ConstraintLayout. Utilizza invece "Vincoli di corrispondenza" (0dp).

Impostare le dimensioni come rapporto

Figura 15. La visualizzazione è impostata su proporzioni 16:9 con la larghezza basata su un rapporto dell'altezza.

Puoi impostare le dimensioni della visualizzazione su un rapporto, ad esempio 16:9, se almeno una delle dimensioni della visualizzazione è impostata su "Corrispondenza vincoli" (0dp). Per attivare il rapporto, fai clic su Attiva/disattiva vincolo proporzioni (callout 1 nella figura 14) e inserisci il rapporto width:height nell'input visualizzato.

Se sia la larghezza che l'altezza sono impostate su "Corrispondenza vincoli", puoi fare clic su Attiva/disattiva vincolo proporzioni per selezionare la dimensione basata su un rapporto con l'altra. L'ispettore della visualizzazione indica quale dimensione è impostata come rapporto collegando i bordi corrispondenti con una linea continua.

Ad esempio, se imposti entrambi i lati su "Corrispondenza vincoli", fai clic due volte su Attiva/disattiva vincolo proporzioni per impostare la larghezza in base a un rapporto con l'altezza. L'intera dimensione è determinata dall'altezza della visualizzazione, che può essere definita in qualsiasi modo, come mostrato nella figura 15.

Regolare i margini della visualizzazione

Per distanziare uniformemente le visualizzazioni, fai clic su Margine nella barra degli strumenti per selezionare il margine predefinito per ogni visualizzazione che aggiungi al layout. Qualsiasi modifica apportata al margine predefinito si applica solo alle visualizzazioni che aggiungi da quel momento in poi.

Puoi controllare il margine per ogni visualizzazione nella finestra Attributi facendo clic sul numero nella riga che rappresenta ogni vincolo. Nella figura 14, il callout 4 mostra che il margine inferiore è impostato su 16 dp.

Figura 16. Il pulsante Margine della barra degli strumenti.

Tutti i margini offerti dallo strumento sono multipli di 8 dp per allineare le visualizzazioni ai consigli della griglia quadrata di 8 dp di Material Design.

Controllare i gruppi lineari con una catena

Figura 17. Una catena orizzontale con due visualizzazioni.

Una catena è un gruppo di viste collegate tra loro con vincoli di posizione bidirezionali. Le visualizzazioni all'interno di una catena possono essere distribuite verticalmente o orizzontalmente.

Figura 18. Esempi di ogni stile di catena.

Le catene possono essere stilizzate in uno dei seguenti modi:

1. Spread:le visualizzazioni vengono distribuite in modo uniforme dopo aver tenuto conto dei margini. Questa è l'impostazione predefinita.
2. Spaziatura interna:la prima e l'ultima visualizzazione sono fissate ai vincoli a ogni estremità della catena e le altre sono distribuite in modo uniforme.
3. Ponderato:quando la catena è impostata su distribuisci o distribuisci all'interno, puoi riempire lo spazio rimanente impostando una o più visualizzazioni su"rispetta i vincoli" (0dp). Per impostazione predefinita, lo spazio viene distribuito in modo uniforme tra ogni visualizzazione impostata su "rispetta i vincoli", ma puoi assegnare un peso di importanza a ogni visualizzazione utilizzando gli attributi layout_constraintHorizontal_weight e layout_constraintVertical_weight. Funziona allo stesso modo di layout_weight in un layout lineare: la visualizzazione con il valore di peso più alto ottiene più spazio e le visualizzazioni con lo stesso peso ottengono la stessa quantità di spazio.
4. Compattate:le visualizzazioni sono compattate dopo aver tenuto conto dei margini. Puoi regolare la distorsione dell'intera catena, a sinistra o a destra, in alto o in basso, modificando la distorsione della visualizzazione "principale" della catena.

La visualizzazione "principale" della catena, ovvero la visualizzazione più a sinistra in una catena orizzontale (in un layout da sinistra a destra) e la visualizzazione più in alto in una catena verticale, definisce lo stile della catena in XML. Tuttavia, puoi passare da Spalmatura a Spalmatura interna e a Compattato selezionando una qualsiasi visualizzazione nella catena e facendo clic sul pulsante della catena che viene visualizzato sotto la visualizzazione.

Per creare una catena, procedi nel seguente modo, come mostrato nel video 4:

1. Seleziona tutte le visualizzazioni da includere nella catena.
2. Fai clic con il tasto destro del mouse su una delle visualizzazioni.
3. Seleziona Catene.
4. Seleziona Centra orizzontalmente o Centra verticalmente.

Video 4. Creazione di una catena orizzontale.

Ecco alcuni aspetti da considerare quando utilizzi le catene:

• Una visualizzazione può far parte sia di una catena orizzontale che verticale, in modo da poter creare layout a griglia flessibili.
• Una catena funziona correttamente solo se ogni estremità è vincolata a un altro oggetto sullo stesso asse, come mostrato nella figura 14.
• Anche se l'orientamento di una catena è verticale o orizzontale, l'utilizzo di uno non allinea le visualizzazioni in quella direzione. Per ottenere la posizione corretta per ogni visualizzazione nella catena, includi altri vincoli, ad esempio i vincoli di allineamento.

Crea automaticamente vincoli

Invece di aggiungere vincoli a ogni visualizzazione mentre la posizioni nel layout, puoi spostare ogni visualizzazione nelle posizioni che preferisci nel Layout Editor e poi fare clic su Deduci vincoli per creare automaticamente i vincoli.

Infer Constraints analizza il layout per determinare l'insieme più efficace di vincoli per tutte le visualizzazioni. Limita le visualizzazioni alle posizioni attuali offrendo al contempo flessibilità. Potresti dover apportare modifiche per fare in modo che il layout risponda come previsto per dimensioni e orientamenti dello schermo diversi.

Connessione automatica con il genitore è una funzionalità separata che puoi attivare. Quando è attivata e aggiungi viste figlio a un elemento principale, questa funzionalità crea automaticamente due o più vincoli per ogni vista man mano che le aggiungi al layout, ma solo quando è opportuno vincolare la vista al layout principale. Il collegamento automatico non crea vincoli per le altre visualizzazioni nel layout.

La connessione automatica è disattivata per impostazione predefinita. Per abilitarlo, fai clic su Abilita connessione automatica al contenitore nella barra degli strumenti del Layout Editor.

Animazioni con fotogrammi chiave

All'interno di un ConstraintLayout, puoi animare le modifiche alle dimensioni e alla posizione degli elementi utilizzando ConstraintSet e TransitionManager.

Un ConstraintSet è un oggetto leggero che rappresenta i vincoli, i margini e il padding di tutti gli elementi secondari all'interno di un ConstraintLayout. Quando applichi un ConstraintSet a un ConstraintLayout visualizzato, il layout aggiorna i vincoli di tutti i relativi elementi secondari.

Per creare un'animazione utilizzando ConstraintSet, specifica due file di layout che fungono da fotogrammi chiave di inizio e fine dell'animazione. A questo punto, puoi caricare un ConstraintSet dal secondo file di fotogrammi chiave e applicarlo al ConstraintLayout visualizzato.

Nota:le animazioni ConstraintSet animano solo le dimensioni e la posizione degli elementi secondari. Non animano altri attributi, come il colore.

Il seguente esempio di codice mostra come animare lo spostamento di un singolo pulsante nella parte inferiore dello schermo.

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Nota:con Android Studio 3.6 e versioni successive, la funzionalità view binding può sostituire le chiamate findViewById(). Fornisce inoltre la sicurezza dei tipi in fase di compilazione per il codice che interagisce con le visualizzazioni. Prendi in considerazione l'utilizzo del binding delle visualizzazioni anziché findViewById().

Risorse aggiuntive

ConstraintLayout viene utilizzato nell'app demo Sunflower.