Responsive UI mit ConstraintLayout erstellen   Teil von Android Jetpack

Abbildung 1. Im Editor wird Ansicht C unter Ansicht A angezeigt, sie hat aber keine vertikale Einschränkung.

Abbildung 2: Ansicht C ist jetzt vertikal unter Ansicht A positioniert.

Ein fehlender Constraint führt zwar nicht zu einem Kompilierungsfehler, der Layout-Editor zeigt fehlende Constraints jedoch als Fehler in der Symbolleiste an. Wenn Sie die Fehler und anderen Warnungen aufrufen möchten, klicken Sie auf Warnungen und Fehler anzeigen . Damit Sie keine Einschränkungen übersehen, werden im Layout-Editor automatisch Einschränkungen für Sie hinzugefügt, wenn Sie die Funktionen Automatisch verbinden und Einschränkungen ableiten verwenden.

ConstraintLayout zum Projekt hinzufügen

So verwenden Sie ConstraintLayout in Ihrem Projekt:

1. Prüfen Sie, ob das maven.google.com-Repository in Ihrer settings.gradle-Datei deklariert ist:

   Groovy

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

   Kotlin

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

2. Fügen Sie die Bibliothek als Abhängigkeit in die build.gradle-Datei auf Modulebene ein, wie im folgenden Beispiel gezeigt. Die aktuelle Version kann von der im Beispiel gezeigten abweichen.

   Cool

   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. Klicken Sie in der Symbolleiste oder in der Synchronisierungsbenachrichtigung auf Projekt mit Gradle-Dateien synchronisieren.

Jetzt können Sie Ihr Layout mit ConstraintLayout erstellen.

Layout umwandeln

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

So wandeln Sie ein vorhandenes Layout in ein ConstraintLayout um:

1. Öffnen Sie Ihr Layout in Android Studio und klicken Sie unten im Editorfenster auf den Tab Design.
2. Klicken Sie im Fenster Component Tree (Komponentenbaum) mit der rechten Maustaste auf das Layout und dann auf Convert LinearLayout to ConstraintLayout (LinearLayout in ConstraintLayout umwandeln).

Neues Layout erstellen

So erstellen Sie eine neue ConstraintLayout-Datei:

1. Klicken Sie im Fenster Project (Projekt) auf den Modulordner und wählen Sie File > New > XML > Layout XML (Datei > Neu > XML > Layout-XML) aus.
2. Geben Sie einen Namen für die Layoutdatei und „androidx.constraintlayout.widget.ConstraintLayout“ für das Root-Tag ein.
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 zum Anpassen der Größe in jeder Ecke und runden Ziehpunkten für Einschränkungen auf jeder Seite angezeigt.

2. Klicken Sie auf die Ansicht, um sie auszuwählen.
3. Führen Sie einen der folgenden Schritte aus:
   • Klicken Sie auf einen Einschränkungs-Ziehpunkt und ziehen Sie ihn zu einem verfügbaren Ankerpunkt. Dieser Punkt kann der Rand einer anderen Ansicht, der Rand des Layouts oder eine Richtlinie sein. Wenn Sie den Ziehpunkt für die Einschränkung ziehen, werden im Layout-Editor potenzielle Verbindungsanker und blaue Overlays angezeigt.

   • Klicken Sie im Fenster Attribute im Bereich Layout auf einen der Buttons Verbindung erstellen, wie in Abbildung 4 dargestellt.

     

     Abbildung 4: Im Bereich Layout des Fensters Attribute können Sie Verbindungen erstellen.

Wenn die Einschränkung erstellt wird, weist der Editor ihr einen Standardabstand zu, um die beiden Ansichten zu trennen.

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

• Jede Ansicht muss mindestens zwei Einschränkungen haben: eine horizontale und eine vertikale.
• Sie können Einschränkungen nur zwischen einem Ziehpunkt für Einschränkungen und einem Ankerpunkt erstellen, die sich in derselben Ebene befinden. Eine vertikale Ebene (die linke und rechte Seite) einer Ansicht kann nur an eine andere vertikale Ebene gebunden werden. Baselines können nur an andere Baselines gebunden werden.
• Jeder Constraint-Handle kann nur für eine Constraint verwendet werden. Sie können jedoch mehrere Constraints aus verschiedenen Ansichten für denselben Ankerpunkt erstellen.

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.

• Klicken Sie mit der Strg-Taste (Befehlstaste unter macOS) auf einen Anker für die Einschränkung. Die Einschränkung wird rot, um anzuzeigen, dass Sie darauf klicken können, um sie zu löschen (siehe Abbildung 5).

  

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

• Klicken Sie im Fenster Attribute im Bereich Layout auf einen Anker für die Einschränkung, wie in Abbildung 6 dargestellt.

  

  Abbildung 6. Klicken Sie auf einen Anker für eine Einschränkung, um ihn zu löschen.

Wenn Sie einer Ansicht gegensätzliche Einschränkungen hinzufügen, werden die Einschränkungslinien wie eine Feder gewunden, um die gegensätzlichen Kräfte darzustellen (siehe Video 2).  Der Effekt ist am deutlichsten sichtbar, wenn die Ansichtsgröße auf „fixed“ (fest) oder „wrap content“ (Inhalt umbrechen) festgelegt ist. In diesem Fall wird die Ansicht zwischen den Einschränkungen zentriert. Wenn Sie stattdessen möchten, dass die Ansicht ihre Größe an die Einschränkungen anpasst, ändern Sie die Größe in „An Einschränkungen anpassen“. Wenn Sie die aktuelle Größe beibehalten, die Ansicht aber so verschieben möchten, dass sie nicht zentriert ist, passen Sie die Constraint-Vorspannung an.

Mit Constraints können Sie verschiedene Arten von Layoutverhalten erzielen, wie in den folgenden Abschnitten beschrieben.

Übergeordnete Position

Die Seite einer Ansicht wird an den entsprechenden Rand des Layouts gebunden.

In Abbildung 7 ist die linke Seite der Ansicht mit dem linken Rand des übergeordneten Layouts verbunden. Mit „margin“ können Sie den Abstand zum Rand definieren.

Abbildung 7. Eine horizontale Einschränkung für das übergeordnete Element.

Position der Bestellung

Definieren Sie die Reihenfolge, in der zwei Ansichten vertikal oder horizontal angezeigt werden.

In Abbildung 8 ist B so eingeschränkt, dass es sich immer rechts von A befindet, und C ist unter A eingeschränkt. Diese Einschränkungen bedeuten jedoch nicht, dass die Elemente ausgerichtet sind. B kann sich also weiterhin nach oben und unten bewegen.

Abbildung 8. Eine horizontale und vertikale Einschränkung.

Ausrichtung

Richten Sie 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. Wenn Sie die Ansichtszentren ausrichten möchten, erstellen Sie auf beiden Seiten eine Einschränkung.

Sie können die Ausrichtung anpassen, indem Sie die Ansicht von der Einschränkung aus nach innen ziehen. Abbildung 10 zeigt beispielsweise B mit einer Ausrichtung mit einem Versatz von 24 dp. Der Versatz wird durch den Rand der eingeschränkten Ansicht definiert.

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

Abbildung 9. Eine Einschränkung für die horizontale Ausrichtung.

Abbildung 10. Eine horizontale Ausrichtungseinschränkung mit Offset.

Baseline-Abstimmung

Die Text-Baseline einer Ansicht an der Text-Baseline einer anderen Ansicht ausrichten.

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

Wenn Sie eine Baseline-Einschränkung erstellen möchten, klicken Sie mit der rechten Maustaste auf die Textansicht, die Sie einschränken möchten, und dann auf Baseline anzeigen. Klicken Sie dann auf die Text-Grundlinie und ziehen Sie die Linie auf eine andere Grundlinie.

Abbildung 11. Eine Einschränkung für die Ausrichtung der Baseline.

Auf eine Richtlinie beschränken

Sie können eine vertikale oder horizontale Hilfslinie hinzufügen, mit der Sie Ihre Ansichten einschränken können. Sie ist für die Nutzer Ihrer App nicht sichtbar. Sie können die Richtlinie im Layout entweder anhand von dp-Einheiten oder als Prozentsatz relativ zum Rand des Layouts positionieren.

Wenn Sie eine Hilfslinie erstellen möchten, klicken Sie in der Symbolleiste auf Hilfslinien und dann auf Vertikale Hilfslinie hinzufügen oder Horizontale Hilfslinie hinzufügen.

Ziehen Sie die gepunktete Linie, um sie neu zu positionieren, und klicken Sie auf den Kreis am Rand der Hilfslinie, um den Messmodus zu ändern.

Abbildung 12. Eine Ansicht, die auf eine Richtlinie beschränkt ist.

Auf eine Barriere beschränken

Ähnlich wie eine Richtlinie ist eine Barriere eine unsichtbare Linie, auf die Sie Ansichten beschränken können. Eine Barriere definiert jedoch keine eigene Position. Stattdessen wird die Position der Barriere basierend auf der Position der darin enthaltenen Ansichten verschoben. Das ist nützlich, wenn Sie eine Ansicht auf eine Gruppe von Ansichten und nicht auf eine bestimmte Ansicht beschränken möchten.

In Abbildung 13 ist Ansicht C beispielsweise auf die rechte Seite einer Barriere beschränkt. Die Barriere wird am „Ende“ (oder auf der rechten Seite bei einem Layout von links nach rechts) von Ansicht A und Ansicht B platziert. Die Trennlinie wird verschoben, je nachdem, ob die rechte Seite von Ansicht A oder von Ansicht B am weitesten rechts liegt.

So erstellen Sie eine Barriere:

1. Klicken Sie in der Symbolleiste auf Richtlinien und dann auf Vertikale Trennlinie hinzufügen oder Horizontale Trennlinie hinzufügen.
2. Wählen Sie im Fenster Komponentenbaum die Ansichten aus, die sich innerhalb der Barriere befinden sollen, und ziehen Sie sie in die Barrierekomponente.
3. Wählen Sie die Barriere im Komponentenbaum aus, öffnen Sie das Fenster Attribute und legen Sie dann barrierDirection fest.

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

Sie können auch Ansichten, die innerhalb der Barriere liegen, auf die Barriere beschränken. So können Sie alle Ansichten in der Barriere aneinander ausrichten, auch wenn Sie nicht wissen, welche Ansicht die längste oder höchste ist.

Sie können auch eine Richtlinie in eine Barriere einfügen, um eine „Mindestposition“ für die Barriere festzulegen.

Abbildung 13. Ansicht C ist auf eine Barriere beschränkt, die sich basierend auf der Position und Größe von Ansicht A und Ansicht B bewegt.

Einschränkungsvoreingenommenheit anpassen

Wenn Sie einer Ansicht auf beiden Seiten eine Einschränkung hinzufügen und die Ansichtsgröße für dieselbe Dimension entweder „fixed“ oder „wrap content“ ist, wird die Ansicht standardmäßig mit einem Bias von 50% zwischen den beiden Einschränkungen zentriert. Sie können den Bias anpassen, indem Sie den Bias-Schieberegler im Fenster Attribute oder die Ansicht ziehen, wie in Video 3 gezeigt.

Wenn Sie stattdessen möchten, dass die Ansicht ihre Größe an die Einschränkungen anpasst, ändern Sie die Größe in „An Einschränkungen anpassen“.

Größe der Ansicht anpassen

Abbildung 14. Wenn Sie eine Ansicht auswählen, enthält das Fenster Attribute Steuerelemente für 1 Größenverhältnis, 2 Löschen von Einschränkungen, 3 Höhen- oder Breitenmodus, 4 Ränder und 5 Einschränkungsvoreingenommenheit. Sie können auch einzelne Constraints im Layout-Editor hervorheben, indem Sie in der 6-Constraint-Liste darauf klicken.

Mit den Eckziehpunkten können Sie die Größe einer Ansicht ändern. Dadurch wird die Größe jedoch fest codiert. Die Ansicht wird also nicht an unterschiedliche Inhalte oder Bildschirmgrößen angepasst. Wenn Sie einen anderen Größenanpassungsmodus auswählen möchten, klicken Sie auf eine Ansicht und öffnen Sie rechts im Editor das Fenster Attribute .

Oben im Fenster Attribute befindet sich der Ansichtsprüfer, der Steuerelemente für verschiedene Layoutattribute enthält (siehe Abbildung 14). Diese Option ist nur für Ansichten in einem ConstraintLayout verfügbar.

Sie können die Berechnung von Höhe und Breite ändern, indem Sie auf die mit dem Hinweis 3 in Abbildung 14 gekennzeichneten Symbole klicken. Diese Symbole stellen den Größenmodus so dar: Klicken Sie auf das Symbol, um zwischen den folgenden Einstellungen zu wechseln:

• Fest: Geben Sie im folgenden Textfeld eine bestimmte Dimension an oder ändern Sie die Größe der Ansicht im Editor.
• Inhalt umbrechen: Die Ansicht wird nur so weit erweitert, wie es für die Anzeige der Inhalte erforderlich ist.
• layout_constrainedWidth

Legen Sie diesen Wert auf true fest, damit sich die horizontale Dimension an die Einschränkungen anpasst. Standardmäßig unterliegt ein Widget, das auf WRAP_CONTENT festgelegt ist, keinen Einschränkungen.

• Match Constraints: Die Ansicht wird so weit wie möglich erweitert, um die Einschränkungen auf jeder Seite zu erfüllen, nachdem die Ränder der Ansicht berücksichtigt wurden. Sie können dieses Verhalten jedoch mit den folgenden Attributen und Werten ändern. Diese Attribute werden nur wirksam, wenn Sie die Ansichtsbreite auf „match constraints“ festlegen:
  • layout_constraintWidth_min

    Dazu wird eine dp-Dimension für die Mindestbreite der Ansicht verwendet.

  • layout_constraintWidth_max

    Dabei wird eine dp-Dimension für die maximale Breite der Ansicht verwendet.

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

Größe als Verhältnis festlegen

Abbildung 15. Die Ansicht wird auf ein Seitenverhältnis von 16:9 festgelegt. Die Breite basiert auf einem Verhältnis der Höhe.

Sie können die Ansichtsgröße auf ein Verhältnis wie 16:9 festlegen, wenn mindestens eine der Ansichtsdimensionen auf „Beschränkungen anpassen“ (0dp) eingestellt ist. Klicken Sie dazu auf Seitenverhältnisbeschränkung ein-/ausschalten (Beschriftung 1 in Abbildung 14) und geben Sie das Verhältnis width:height in das angezeigte Eingabefeld ein.

Wenn sowohl die Breite als auch die Höhe auf „An Einschränkungen anpassen“ festgelegt sind, können Sie auf Seitenverhältnis-Einschränkung umschalten klicken, um auszuwählen, welche Dimension auf einem Verhältnis der anderen basiert. Im Ansicht-Inspector wird angegeben, welche Dimension als Verhältnis festgelegt ist. Dazu werden die entsprechenden Kanten mit einer durchgezogenen Linie verbunden.

Wenn Sie beispielsweise beide Seiten auf „Match constraints“ (An Einschränkungen anpassen) festlegen, klicken Sie zweimal auf Toggle Aspect Ratio Constraint (Seitenverhältnis-Einschränkung umschalten), um die Breite als Verhältnis der Höhe festzulegen. Die Gesamtgröße wird durch die Höhe der Ansicht bestimmt, die beliebig definiert werden kann (siehe Abbildung 15).

Ansichtsränder anpassen

Wenn Sie die Ansichten gleichmäßig verteilen möchten, klicken Sie in der Symbolleiste auf Rand , um den Standardrand für jede Ansicht auszuwählen, die Sie dem Layout hinzufügen. Alle Änderungen, die Sie am Standardrand vornehmen, gelten nur für die Ansichten, die Sie ab diesem Zeitpunkt hinzufügen.

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

Abbildung 16: Schaltfläche Margin (Marge) in der Symbolleiste.

Alle vom Tool angebotenen Ränder sind Faktoren von 8 dp, damit Ihre Ansichten den Empfehlungen für das 8‑dp-Raster von Material Design entsprechen.

Lineare Gruppen mit einer Kette steuern

Abbildung 17. Eine horizontale Kette mit zwei Ansichten.

Eine Kette ist eine Gruppe von Ansichten, die mit bidirektionalen Positionsbeschränkungen miteinander verknüpft sind. Die Ansichten in einer Kette können entweder vertikal oder horizontal verteilt werden.

Abbildung 18. Beispiele für die einzelnen Kettenstile.

Ketten können auf eine der folgenden Arten formatiert werden:

1. Verteilung:Die Aufrufe sind gleichmäßig verteilt, nachdem die Margen berücksichtigt wurden. Das ist die Standardeinstellung.
2. Gleichmäßig verteilt:Die erste und die letzte Ansicht werden an den Beschränkungen an jedem Ende der Kette angebracht und die restlichen Ansichten werden gleichmäßig verteilt.
3. Gewichtet:Wenn die Kette auf spread oder spread inside festgelegt ist, können Sie den verbleibenden Platz füllen, indem Sie eine oder mehrere Ansichten auf „match constraints“ (0dp) festlegen. Standardmäßig wird der Platz gleichmäßig auf alle Ansichten verteilt, die auf „match constraints“ festgelegt sind. Sie können jedoch jeder Ansicht mit den Attributen layout_constraintHorizontal_weight und layout_constraintVertical_weight eine Gewichtung zuweisen. Das funktioniert genauso wie layout_weight in einem linearen Layout: Die Ansicht mit dem höchsten Gewichtungswert erhält den meisten Platz und Ansichten mit demselben Gewichtungswert erhalten denselben Platz.
4. Gepackt:Die Ansichten werden nach Berücksichtigung der Ränder zusammengefasst. Sie können die Ausrichtung der gesamten Kette nach links oder rechts bzw. nach oben oder unten anpassen, indem Sie die Ausrichtung der „Head“-Ansicht der Kette ändern.

Die „Kopf“-Ansicht der Kette – die Ansicht ganz links in einer horizontalen Kette (bei einem Layout von links nach rechts) und die oberste Ansicht in einer vertikalen Kette – definiert den Stil der Kette in XML. Sie können jedoch zwischen Gestreckt, Gestreckt innen und Gepackt wechseln, indem Sie eine beliebige Ansicht in der Kette auswählen und auf die Kettenschaltfläche  klicken, die unter 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.

Hier sind einige Dinge, die Sie bei der Verwendung von Chains beachten sollten:

• Eine Ansicht kann Teil einer horizontalen und einer vertikalen Kette sein. So lassen sich flexible Rasterlayouts erstellen.
• Eine Kette funktioniert nur dann richtig, wenn jedes Ende der Kette an ein anderes Objekt auf derselben Achse gebunden ist, wie in Abbildung 14 dargestellt.
• Die Ausrichtung einer Kette ist zwar vertikal oder horizontal, aber die Ansichten werden dadurch nicht in dieser Richtung ausgerichtet. Damit die einzelnen Ansichten in der Kette richtig positioniert werden, müssen Sie weitere Einschränkungen wie Ausrichtungseinschränkungen einfügen.

Einschränkungen automatisch erstellen

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

Mit Infer Constraints wird das Layout gescannt, um die effektivsten Einschränkungen für alle Ansichten zu ermitteln. Die Ansichten werden auf ihre aktuellen Positionen beschränkt, bieten aber dennoch Flexibilität. Möglicherweise müssen Sie Anpassungen vornehmen, damit das Layout auf verschiedenen Bildschirmgrößen und in verschiedenen Ausrichtungen wie gewünscht reagiert.

Automatische Verbindung mit Eltern ist eine separate Funktion, die Sie aktivieren können. Wenn diese Funktion aktiviert ist und Sie einem übergeordneten Element untergeordnete Ansichten hinzufügen, werden automatisch zwei oder mehr Constraints für jede Ansicht erstellt, wenn Sie sie dem Layout hinzufügen. Dies geschieht jedoch nur, wenn es sinnvoll ist, die Ansicht auf das übergeordnete Layout zu beschränken. Mit Autoconnect werden keine Einschränkungen für andere Ansichten im Layout erstellt.

Die automatische Verbindung ist standardmäßig deaktiviert. Aktivieren Sie die Funktion, indem Sie in der Symbolleiste des Layout-Editors auf Automatische Verbindung zum übergeordneten Element aktivieren klicken.

Keyframe-Animationen

Innerhalb eines ConstraintLayout können Sie Änderungen an der Größe und Position von Elementen mit ConstraintSet und TransitionManager animieren.

Ein ConstraintSet ist ein einfaches Objekt, das die Einschränkungen, Ränder und den Innenabstand aller untergeordneten Elemente in einem ConstraintLayout darstellt. Wenn Sie ein ConstraintSet auf ein angezeigtes ConstraintLayout anwenden, werden die Einschränkungen aller untergeordneten Elemente des Layouts aktualisiert.

Wenn Sie eine Animation mit ConstraintSet erstellen möchten, geben Sie zwei Layoutdateien an, die als Start- und End-Keyframes für die Animation dienen. Anschließend können Sie eine ConstraintSet aus der zweiten Keyframe-Datei laden und auf die angezeigte ConstraintLayout anwenden.

Das folgende Codebeispiel zeigt, wie Sie die Bewegung einer einzelnen Schaltfläche an den unteren Bildschirmrand animieren.

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

Zusätzliche Ressourcen

ConstraintLayout wird in der Sunflower-Demo-App verwendet.