Responsive UI mit ConstraintLayout erstellen Teil von Android Jetpack

Abbildung 1: Der Editor zeigt die Ansicht C unter A, die aber hat keine vertikale Einschränkung.

Abbildung 2: Ansicht C ist jetzt vertikal fixiert Ansicht A aus.

Obwohl eine fehlende Einschränkung keinen Kompilierungsfehler verursacht, wird das Layout Im Editor werden fehlende Einschränkungen in der Symbolleiste als Fehler angezeigt. So rufen Sie die Fehler und andere Warnungen finden Sie auf Show Warnings and errors (Warnungen und Fehler anzeigen). Um fehlende Einschränkungen zu vermeiden, fügt der Layout-Editor automatisch mit der Funktion Automatische Verbindung und Ableitung von Einschränkungen Funktionen.

ConstraintLayout zu Ihrem Projekt hinzufügen

Wenn Sie ConstraintLayout in Ihrem Projekt verwenden möchten, gehen Sie so vor:

1. Achten Sie darauf, dass das Repository maven.google.com deklariert ist in der Datei settings.gradle:

   Cool

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

   Kotlin

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

2. Bibliothek als Abhängigkeit auf Modulebene hinzufügen build.gradle, wie im folgenden Beispiel gezeigt. Das Neueste kann sich von der im Beispiel gezeigten Version unterscheiden.

   Groovig

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha14"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14"
   }
   

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha14")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14")
   }
   

3. Klicken Sie in der Symbolleiste oder in der Synchronisierungsbenachrichtigung auf Sync Project with Gradle (Projekt mit Gradle synchronisieren). Files (Dateien).

Jetzt können Sie Ihr Layout mit ConstraintLayout erstellen.

Layout konvertieren

Abbildung 3: Das Menü zum Konvertieren eines Layouts in ConstraintLayout

So konvertieren Sie ein vorhandenes Layout in ein Einschränkungslayout:

1. Öffnen Sie Ihr Layout in Android Studio und klicken Sie auf den Tab Design am unten im Editorfenster.
2. Klicken Sie im Fenster Komponentenstruktur mit der rechten Maustaste auf das Layout und klicken Sie auf Konvertieren Sie LinearLayout in ConstraintLayout.

Neues Layout erstellen

So starten Sie eine neue Einschränkungslayoutdatei:

1. Klicken Sie im Fenster Project (Projekt) auf den Modulordner und wählen Sie Datei > Neu > XML > Layout-XML.
2. Geben Sie einen Namen für die Layoutdatei ein „androidx.constraintlayout.widget.ConstraintLayout“ für den Root Tag.
3. Klicken Sie auf Fertig.

Einschränkung hinzufügen oder entfernen

So fügen Sie eine Einschränkung hinzu:

1. Ziehen Sie eine Ansicht aus dem Fenster Palette in den Editor.

   Wenn Sie eine Ansicht in einem ConstraintLayout hinzufügen, wird sie in einem Begrenzungsrahmen mit quadratischen Ziehpunkten an jeder Ecke und kreisförmiger Ziehpunkte auf jeder Seite.

2. Klicken Sie auf die Ansicht, um sie auszuwählen.
3. Führen Sie einen der folgenden Schritte aus: <ph type="x-smartling-placeholder">
   </ph>
   • Klicken Sie auf einen Ziehpunkt und ziehen Sie ihn zu einem verfügbaren Ankerpunkt. Dieser Punkt kann der Rand einer anderen Ansicht, der Rand des Layouts oder ein Richtlinie. Wenn Sie den Ziehpunkt ziehen, Im Editor werden potenzielle Verbindungsanker und blaue Overlays angezeigt.

   • Klicken Sie auf den Link Create a connection (Verbindung erstellen) im Abschnitt Layout des Fensters Attributes (Attribute) wie hier gezeigt die Schaltflächen in Abbildung 4.

     

     Abbildung 4: Das Layout des Fensters Attribute können Sie Verbindungen.

Wenn die Einschränkung erstellt wird, weist der Editor ihr eine default margin (Standardrand) zum Trennen der beiden Ansichten verwenden.

Beachten Sie beim Erstellen von Einschränkungen die folgenden Regeln:

• Für jede Ansicht müssen mindestens zwei Einschränkungen gelten: eine horizontale und eine vertikal ausgerichtet sind.
• Sie können Einschränkungen nur zwischen einem Einschränkungs-Ziehpunkt und einem Anker erstellen die sich dieselbe Ebene teilen. Vertikale Ebene: links und rechts Seiten – einer Ansicht können nur auf eine andere vertikale Ebene beschränkt werden und Baselines können sich nur auf andere Baselines beschränken.
• Jeder Einschränkungs-Ziehpunkt kann nur für eine Einschränkung verwendet werden, Erstellen mehrerer Einschränkungen aus verschiedenen Ansichten für denselben Ankerpunkt.

Sie haben folgende Möglichkeiten, eine Einschränkung zu löschen:

• Klicken Sie auf eine Einschränkung, um sie auszuwählen, und dann auf Löschen.

• Strg+Klick (Befehlstaste+Klick unter macOS) a Einschränkungsanker. Die Einschränkung wird rot, um anzuzeigen, dass Sie löschen, wie in Abbildung 5 gezeigt.

  

  Abbildung 5: Eine rote Einschränkung auf den Sie klicken können, um sie zu löschen.

• Klicken Sie im Fenster Attributes (Attribute) im Abschnitt Layout (Layout) auf einen Fixierungsanker, wie in Abbildung 6 dargestellt.

  

  Abbildung 6: Auf eine Einschränkung klicken Anchor löschen.

Wenn Sie einer Ansicht entgegengesetzte Einschränkungen hinzufügen, werden die Beschränkungslinien zu wie eine Feder gewickelt, um die Gegenkräfte anzuzeigen (siehe Video 2). Die Effekt ist am sichtbarsten, wenn die Ansichtsgröße auf „Fest“ festgelegt ist. oder „Inhalte zusammenfassen“ In diesem Fall wird die Ansicht zwischen den Beschränkungen zentriert. Wenn Sie stattdessen die Ansicht so gestreckt werden, dass sie die Einschränkungen erfüllt, Ändern Sie die Größe in "Einschränkungen anpassen". Wenn möchten Sie die aktuelle Größe beibehalten, aber die Ansicht verschieben, sodass sie nicht zentriert ist. Einschränkungsverzerrung anpassen

Sie können Einschränkungen verwenden, um verschiedene Arten von Layoutverhalten zu erreichen, wie die in den folgenden Abschnitten beschrieben werden.

Übergeordnete Position

Fixieren Sie die Seite einer Ansicht auf den entsprechenden Rand des Layouts.

In Abbildung 7 ist die linke Seite der Ansicht mit der linken Kante des übergeordnetes Layout. Mit dem Rand können Sie den Abstand von der Kante definieren.

Abbildung 7: Eine horizontale Beschränkung auf das übergeordnete Element.

Auftragsposition

Definieren Sie die Darstellungsreihenfolge für zwei Ansichten, entweder vertikal oder horizontal.

In Abbildung 8 ist B festgelegt, dass es sich immer rechts von A befindet, und C ist die unter A liegen. Diese Einschränkungen implizieren jedoch keine Abstimmung, sodass B nach oben und unten bewegen.

Abbildung 8: Eine horizontale und eine vertikale Einschränkung.

Koordinierung

Richtet den Rand einer Ansicht am selben Rand einer anderen Ansicht aus.

In Abbildung 9 ist die linke Seite von B an der linken Seite von A ausgerichtet. Bei Bedarf Um die Ansichtsmitte auszurichten, erstellen Sie eine Fixierung auf beiden Seiten.

Sie können die Ausrichtung verschieben, indem Sie die Ansicht von der Beschränkung aus nach innen ziehen. Abbildung 10 zeigt beispielsweise B mit einer 24-dp-Offset-Ausrichtung. Der Offset ist definiert durch den Rand der eingeschränkten Ansicht.

Sie können auch alle Ansichten auswählen, die Sie ausrichten möchten, und dann auf Ausrichten in der Symbolleiste, um den Ausrichtungstyp auszuwählen.

Abbildung 9: Eine horizontale Ausrichtung Einschränkung.

Abbildung 10. Ein horizontaler Versatz Ausrichtungsbeschränkung.

Referenzausrichtung

Richtet die Textbasis einer Ansicht an der Textbasis einer anderen Ansicht aus.

In Abbildung 11 ist die erste Zeile von B auf den Text in A ausgerichtet.

Klicken Sie zum Erstellen einer Basiseinschränkung mit der rechten Maustaste auf die Textansicht, und klicken Sie dann auf Referenz anzeigen. Klicken Sie dann auf den Text Grundlinie und ziehen Sie die Linie zu einer anderen Referenz.

Abbildung 11. Eine Basisausrichtung Einschränkung.

Auf eine Richtlinie beschränken

Sie können eine vertikale oder horizontale Führungslinie hinzufügen, um die und ist für die Nutzer der App unsichtbar. Sie können die Richtlinie positionieren, basierend auf den dp-Einheiten oder einem Prozentsatz relativ Rand des Layouts.

Wenn du eine Richtlinie erstellen möchtest, klicke auf Richtlinien. in der Symbolleiste und klicken Sie dann entweder auf Vertikale Führungslinie hinzufügen oder Hinzufügen Horizontale Richtlinie.

Ziehen Sie die gepunktete Linie, um sie neu zu positionieren, und klicken Sie auf den Kreis am Rand des um den Messmodus umzuschalten.

Abbildung 12. Eine Ansicht, die auf ein Richtlinie.

Auf eine Barriere beschränken

Ähnlich wie eine Richtlinie ist eine Barriere eine unsichtbare Linie, die Sie mit Ausnahme einer Barriere, die keine eigene Position definiert. Stattdessen sollte die Hürde basierend auf der Position der darin enthaltenen Ansichten verschoben. Dies ist nützlich, wenn Sie eine Ansicht auf eine Reihe von Ansichten und nicht auf eine beschränken möchten. für eine bestimmte Ansicht.

In Abbildung 13 ist beispielsweise Ansicht C auf die rechte Seite eines Hindernisse zu beseitigen. Die Hürde ist auf das Ende gesetzt. (oder die rechte Seite, Layout) von Ansicht A und Ansicht B. Die Barriere richtet sich danach, ist die rechte Seite von Ansicht A oder von Ansicht B ganz rechts.

So erstellen Sie eine Barriere:

1. Klicke auf Richtlinien. in der Symbolleiste und klicken Sie dann auf Vertikale Barriere hinzufügen oder Horizontale Barriere hinzufügen:
2. Wählen Sie im Fenster Komponentenstruktur die Ansichten aus, die im und ziehen Sie sie in die Barrierekomponente.
3. Wählen Sie in der Komponentenstruktur die Barriere aus und öffnen Sie Attribute und legen Sie dann barrierDirection fest.

Jetzt können Sie eine Einschränkung aus einer anderen Ansicht für die Hürde erstellen.

Sie können auch Ansichten innerhalb der Barriere für die Hindernisse zu beseitigen. So können Sie alle Ansichten in der Barriere aufeinander abstimmen, auch wenn Sie nicht wissen, welche Ansicht die längste oder höchste ist.

Sie können auch eine Richtlinie innerhalb einer Barriere einfügen, um ein "Minimum" zu gewährleisten. Position für die Hürde zu finden.

Abbildung 13. Ansicht C ist durch eine Barriere eingeschränkt, basierend auf der Position und Größe der Ansicht A und B bewegt.

Einschränkungsverzerrung anpassen

Wenn Sie auf beiden Seiten einer Ansicht eine Einschränkung hinzufügen, und die Ansichtsgröße für die dieselbe Dimension ist entweder "fest" wird die Ansicht zentriert, mit einer Verzerrung von 50% zwischen den beiden Einschränkungen. Sie können die indem Sie den Schieberegler im Fenster Attribute ziehen oder wie in Video 3 gezeigt.

Wenn Sie stattdessen möchten, dass die Ansicht den Beschränkungen entspricht, Ändern Sie die Größe in "Einschränkungen anpassen".

Ansichtsgröße anpassen

Abbildung 14: Bei der Auswahl einer Ansicht Das Fenster Attribute enthält Steuerelemente für 1 Größenverhältnis, 2 Löschen von Einschränkungen 3 den Höhen- oder Breitenmodus, 4 Ränder und 5 Beschränkungsverzerrung. Sie können auch die einzelnen Einschränkungen im Layout-Editor durch Klicken 6 Einschränkungsliste.

Mit den Eckziehpunkten können Sie die Größe einer Ansicht ändern. Dadurch wird jedoch Größe: Die Größe der Ansicht wird nicht an unterschiedliche Inhalte oder Bildschirmgrößen angepasst. Bis Wählen Sie einen anderen Größenmodus aus, klicken Sie auf eine Ansicht und öffnen Sie die Attribute rechts im Editor.

Oben im Fenster Attributes befindet sich das Ansichtsprüftool, mit dem Sie enthält Steuerelemente für mehrere Layout-Attribute, wie in Abbildung 14 dargestellt. Dies ist nur für Ansichten mit einem Einschränkungslayout verfügbar.

Sie können die Berechnungsmethode für Höhe und Breite ändern, indem Sie auf das Symbole, die mit der Zusatzinformation 3 in Abbildung 14 gekennzeichnet sind. Diese Symbole stellen den Größenmodus wie folgt dar. Zum Umschalten auf das Symbol klicken zwischen diesen Einstellungen:

• Fest: Geben Sie eine bestimmte Dimension in das folgende Textfeld oder durch die Größe der Ansicht im Editor ändern.
• Umfließen von Inhalt: Die Ansicht wird nur so stark erweitert, wie es in den Inhalte.
• layout_restrictedWidth

Legen Sie diese Option auf true fest, damit die horizontale Dimension in folgenden Wert geändert wird: Einschränkungen zu berücksichtigen. Standardmäßig ist ein Widget auf WRAP_CONTENT festgelegt nicht durch Einschränkungen eingeschränkt ist.

• Übereinstimmungsbeschränkungen: Die Ansicht wird so weit wie möglich erweitert, um die auf jeder Seite ein, wobei die Ränder der Ansicht berücksichtigt werden. Sie haben jedoch können Sie dieses Verhalten mit den folgenden Attributen und Werten ändern. Diese -Attribute werden nur wirksam, wenn Sie die Ansichtsbreite auf "Einschränkungen anpassen" festlegen: <ph type="x-smartling-placeholder">
  </ph>
  • layout_constraintWidth_min

    Hierfür wird eine dp-Dimension für die Mindestbreite der Ansicht benötigt.

  • layout_constraintWidth_max

    Hierfür wird die Dimension dp für die maximale Breite der Ansicht benötigt.

  Wenn die angegebene Dimension jedoch nur eine Einschränkung hat, wird die Ansicht wird an den Inhalt angepasst. Wenn Sie diesen Modus für die Höhe oder Breite verwenden, können Sie ein Größenverhältnis festlegen.

Größe als Verhältnis festlegen

Abbildung 15. Die Ansicht ist auf ein Seitenverhältnis von 16:9 eingestellt. die Breite basierend auf dem Verhältnis der Höhe.

Sie können die Ansichtsgröße auf ein Seitenverhältnis wie 16:9 festlegen, wenn mindestens eines der Ansichtsdimensionen ist auf "Übereinstimmungseinschränkungen" festgelegt (0dp) Um den Klicken Sie auf Aspect Ratio Constraint (Einschränkung des Seitenverhältnisses wechseln) (Zusatzinformationen). 1 in Abbildung 14) und geben Sie den Wert width:height-Verhältnis in der angezeigten Eingabe.

Wenn sowohl für Breite als auch für Höhe auf „Übereinstimmungen mit Einschränkungen“ festgelegt ist, können Sie auf Umschalten Sie die Seitenverhältnis-Einschränkung, um auszuwählen, welche Dimension auf einer des anderen Verhältnisses. Im Ansichtsprüftool sehen Sie, welche Dimension als indem du die entsprechenden Kanten mit einer durchgezogenen Linie verbindest.

Wenn Sie z. B. für beide Seiten „Einschränkungen anpassen“ festlegen, klicken Sie auf Umschalten Seitenverhältniseinschränkung, um für die Breite ein Verhältnis der Höhe festzulegen. Die gesamte Größe wird durch die Höhe der Ansicht bestimmt, die in wie in Abbildung 15 gezeigt.

Ansichtsränder anpassen

Wenn die Ansichten gleichmäßig verteilt werden sollen, klicken Sie auf Marge. in der Symbolleiste, um den Standardrand für jede Ansicht auszuwählen, die Sie dem Menü Layout. Jede Änderung, die Sie am Standardmarge vornehmen, wirkt sich nur auf die Ansichten aus, und fügen Sie sie von nun an hinzu.

Sie können den Rand für jede Ansicht im Fenster Attribute festlegen, indem Sie indem Sie auf die Zahl in der Zeile klicken, die die jeweilige Einschränkung darstellt. In Abbildung 14 Legen Sie die Legende 4 fest, dass der untere Rand auf 16dp.

Abbildung 16. Den Rand der Symbolleiste Schaltfläche.

Alle vom Tool angebotenen Ränder haben einen Faktor von 8 dp, damit sich Ihre Aufrufe angleichen können. an die Material Design-Empfehlungen für ein quadratisches Raster mit 8 dp.

Lineare Gruppen mit einer Kette steuern

Abbildung 17. Eine horizontale Kette mit zwei Ansichten.

Eine Kette ist eine Gruppe von Ansichten, die über bidirektionale zwischen Positionsbeschränkungen. Die Ansichten in einer Kette können entweder vertikal oder horizontal.

Abbildung 18. Beispiele für die einzelnen Ketten .

Für Ketten gibt es folgende Stile:

1. Streuung: Die Ansichten sind gleichmäßig verteilt, nachdem die Ränder festgelegt wurden. berücksichtigt. Das ist die Standardeinstellung.
2. Innenansicht:Die erste und die letzte Ansicht werden im an beiden Enden der Kette, der Rest ist gleichmäßig verteilt sind.
3. Gewichtet: Wenn die Kette auf spread oder verteilt sind, können Sie den verbleibenden Platz füllen, indem Sie eine oder mehrere Ansichten auf "Übereinstimmungseinschränkungen" anwenden (0dp) Standardmäßig ist das Leerzeichen gleichmäßig verteilt zwischen den Ansichten, für die "Übereinstimmungseinschränkungen" festgelegt ist, aber können Sie jeder Ansicht mithilfe der layout_constraintHorizontal_weight und layout_constraintVertical_weight-Attribute. Dies funktioniert genauso wie layout_weight in einem lineares Layout: erhält die Ansicht mit dem höchsten Gewichtungswert den meisten Platz. Ansichten mit derselben Gewichtung erhalten dieselbe Fläche.
4. Packet:Die Aufrufe werden zusammengefasst, nachdem die Margen erfasst wurden. für die Sie angegeben haben. Sie können die Verzerrung der gesamten Kette anpassen – nach links oder rechts, nach oben oder indem Sie den "Kopf" der Kette Verzerrungen zu berücksichtigen.

Der „Kopf“ der Kette Ansicht: die Ansicht ganz links in einer horizontalen Kette in einem von links nach rechts angeordneten Layout Ansicht der obersten Ebene in einer vertikalen Kette – definiert den Stil der Kette in XML. Sie können jedoch zwischen den Optionen Streuung, Innenbreiten und gepackt, indem Sie eine beliebige Ansicht in der Kette auswählen und auf die Kettenschaltfläche klicken das unterhalb der Ansicht angezeigt wird.

So erstellen Sie eine Kette (siehe Video 4):

1. Wählen Sie alle Datenansichten aus, die in die Kette aufgenommen werden sollen.
2. Klicken Sie mit der rechten Maustaste auf eine der Ansichten.
3. Wählen Sie Ketten aus.
4. Wählen Sie entweder Horizontal zentrieren oder Vertikal zentrieren aus.

Beachten Sie bei der Verwendung von Ketten Folgendes:

• Eine Ansicht kann sowohl Teil einer horizontalen als auch einer vertikalen Kette sein. flexible Rasterlayouts erstellen.
• Eine Kette funktioniert nur dann ordnungsgemäß, wenn jedes Ende der Kette durch ein anderes Objekt auf der gleichen Achse, wie in Abbildung 14 dargestellt.
• Obwohl die Ausrichtung einer Kette vertikal oder horizontal ist, werden die Ansichten nicht in diese Richtung ausgerichtet. Um die richtige Position für enthalten weitere Einschränkungen, wie Ausrichtungsbeschränkungen.

Einschränkungen automatisch erstellen

Anstatt beim Platzieren im Layout jeder Ansicht Einschränkungen hinzuzufügen, können Sie jede Ansicht im Layout-Editor an die gewünschten Positionen verschieben und Klicken Sie dann auf Einschränkungen ableiten. um automatisch Einschränkungen zu erstellen.

Mit Einschränkungen ableiten wird das Layout gescannt, um den effektivsten Satz zu ermitteln. von Einschränkungen für alle Ansichten. Die Ansichten werden auf ihre aktuellen Positionen beschränkt. und gleichzeitig Flexibilität bieten. Möglicherweise müssen Sie Anpassungen vornehmen, das Layout wie gewünscht für unterschiedliche Bildschirmgrößen und -ausrichtungen anzupassen.

Automatische Verbindung mit Eltern ist eine separate Funktion, die Sie aktivieren können. Wann? Wenn Sie untergeordnete Ansichten zu einem übergeordneten Element hinzufügen, wird diese Funktion werden zwei oder mehr Einschränkungen für jede Ansicht erstellt, wenn Sie diese Layout, aber nur, wenn es angebracht ist, die Ansicht auf das übergeordnete Element zu beschränken. Layout. Die automatische Verbindung schränkt andere Ansichten im Layout nicht ein.

Die automatische Verbindung ist standardmäßig deaktiviert. Klicken Sie auf Aktivieren Automatische Verbindung zum Elternteil in der Symbolleiste des Layout-Editors.

Keyframe-Animationen

Innerhalb eines ConstraintLayout können Sie Größenänderungen animieren und Position von Elementen mithilfe der ConstraintSet und TransitionManager

Ein ConstraintSet ist ein einfaches Objekt, das den Einschränkungen, Ränder und Abstände aller untergeordneten Elemente innerhalb einer ConstraintLayout. Wenn Sie ein ConstraintSet auf ein ConstraintLayout angezeigt, aktualisiert das Layout die Einschränkungen von all seinen untergeordneten Elementen.

Wenn Sie eine Animation mit ConstraintSet erstellen möchten, geben Sie zwei Layouts an -Dateien, die als Start- und End-Keyframes für die Animation dienen. Anschließend können Sie ein ConstraintSet aus der zweiten Keyframe-Datei und wenden es auf die ConstraintLayout angezeigt.

Das folgende Codebeispiel zeigt, wie das Verschieben einer einzelnen Schaltfläche in den unten auf dem Bildschirm.

// 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>

Weitere Informationen

ConstraintLayout wird verwendet in: Sonnenblume Demo-App.