Comment fonctionnent les marges dans les chaînes dans ConstraintLayout 1.1.0 (beta)

Question

J'ai vu exploser deux de mes mises en page depuis le passage à la version 1.1.0-beta4 de ConstraintLayout. Avant d'apporter des modifications, je veux mieux comprendre le fonctionnement des marges dans les chaînes ConstraintLayout. Dans ce qui suit, je compare une mise en page de ConstraintLayout version 1.0.2 à la version 1.1.0-beta4, mais je pense que le problème est apparu pour la première fois dans 1.1.0-beta2.

Mon objectif est de faire en sorte que certaines vues de texte s'étendent sur l'écran avec des écarts entre les première et deuxième vues de texte et les deuxième et troisième vues de texte. Le fond doit apparaître dans ces marges. Pour ce faire, je crée une chaîne horizontale et spécifie une marge de fin de la vue de texte gauche à la vue de texte centrale et une marge de fin de la vue de texte centrale à la vue de texte de droite. Le style de chaîne horizontale est spread_inside.

Exemple 1 - Utilisation de ConstraintLayout version 1.0.2

Voilà à quoi les choses ressemblent dans la version 1.0.2 et c'est ce que j'attends.

<Android.support.constraint.ConstraintLayout 
    Android:layout_width="match_parent"
    Android:layout_height="50dp"
    Android:background="@Android:color/holo_blue_light">

    <TextView
        Android:id="@+id/tvLeft"
        Android:layout_width="0dp"
        Android:layout_height="35dp"
        Android:layout_marginEnd="8dp"
        Android:background="@Android:color/white"
        Android:gravity="center"
        Android:text="Text1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tvCenter"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

    <TextView
        Android:id="@+id/tvCenter"
        Android:layout_width="0dp"
        Android:layout_height="35dp"
        Android:layout_marginEnd="8dp"
        Android:background="@Android:color/white"
        Android:gravity="center"
        Android:text="Text2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tvRight"
        app:layout_constraintStart_toEndOf="@+id/tvLeft"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

    <TextView
        Android:id="@+id/tvRight"
        Android:layout_width="0dp"
        Android:layout_height="35dp"
        Android:background="@Android:color/white"
        Android:gravity="center"
        Android:text="Text3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tvCenter"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

</Android.support.constraint.ConstraintLayout>

Exemple 2 - Utilisation de ConstraintLayout version 1.1.0-beta4

Cette même disposition ressemble à ce qui suit dans la version 1.1.0-beta4 de ConstraintLayout. Notez que les marges ont disparu. J'espère que cela devrait ressembler à l'exemple 1, mais ce n'est pas le cas.

Exemple 3 - Utilisation de ConstraintLayout version 1.1.0-beta4 avec marge de démarrage

Si je prends cette même disposition et ajoute simplement une marge de départ de 8dp vers la vue de texte de droite (tvRight), mes marges réapparaissent non seulement entre les vues de texte centrale et droite mais également entre les vues de texte gauche et centrale bien que je n'y ai pas modifié les marges.

C'est plus que les marges précédemment définies qui sont soudainement honorées. Si je définit la marge de départ sur la vue de texte la plus à droite sur '48dp', ce qui semble être un 48dp une marge apparaît également entre les vues de texte gauche et centrale.

<Android.support.constraint.ConstraintLayout 
    Android:layout_width="match_parent"
    Android:layout_height="50dp"
    Android:background="@Android:color/holo_blue_light">

<!-- TextViews tvLeft & tvRight not shown but are the same as above.-->

<TextView
    Android:id="@+id/tvRight"
    Android:layout_width="0dp"
    Android:layout_height="35dp"
    Android:layout_marginStart="48dp"
    Android:background="@Android:color/white"
    Android:gravity="center"
    Android:text="Text3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/tvCenter"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="HardcodedText" />

</Android.support.constraint.ConstraintLayout>  

Donc, ma question est: "Pourquoi est-ce que je vois ces résultats?" Comment les marges sont-elles gérées dans les chaînes ConstraintLayout, en particulier spread_inside Chaînes? Y a-t-il eu un changement dans la façon dont les marges de la chaîne sont traitées, ou ai-je oublié quelque chose? Je cherche une explication ou une référence à une documentation qui explique tout cela.

Answer 1

Je ne trouve aucune documentation qui donne une réponse faisant autorité à cette question exacte. Cependant, il y a un peu de discussion sur les marges dans la documentation de l'API pour ConstraintLayout :

Si des marges latérales sont définies, elles seront appliquées aux contraintes correspondantes (si elles existent)

Dans l'instance spécifique d'une chaîne, vous avez des contraintes bidirectionnelles entre chaque vue. Autrement dit, non seulement la fin de la vue A est contrainte au début de la vue B, mais le début de la vue B est également contraint à la fin de la vue A.

Dans votre présentation publiée, la vue A a une contrainte de fin et une marge de fin, mais la vue B a une contrainte de début sans marge de début. Autant que je sache, cela signifie que vous avez des règles contradictoires dans votre disposition (la vue A veut être à 8dp de la vue B, mais la vue B veut être à 0dp de la vue A). Peut-être que différentes versions de la bibliothèque ConstraintLayout ont des stratégies différentes pour (a) déterminer si cela compte même comme un conflit et (b) résoudre le conflit si c'est le cas.

Par l'expérimentation, voici comment j'ai trouvé des marges à travailler en chaîne sur différentes versions de la bibliothèque ConstraintLayout:

Version 1.0.2

Les marges latérales de chaque vue de la chaîne ne dépendent ni n'affectent les autres vues de la chaîne. Cela a (au moins) deux effets visibles sur le comportement. Tout d'abord, l'ajout de marge à une vue repoussera l'autre vue de ce montant, quelles que soient les marges de cette vue. Deuxièmement, l'ajout de marge à une vue n'affectera pas les marges de vues plus bas dans la chaîne (par exemple, placer une marge de fin de 8dp sur votre première vue ne fait pas en soi également apparaître 8dp d'espace entre vos deuxième et troisième vues).

Version 1.1.0-beta4

Les marges latérales de chaque vue de la chaîne dépendent et affectent les autres vues de la chaîne. Encore une fois, cela a deux effets visibles sur le comportement. Tout d'abord, l'ajout d'une marge à une vue ne repoussera pas l'autre vue à moins qu'elle n'ait également une marge du même montant *. Deuxièmement, l'ajout de marge entre la première et la deuxième vue de la chaîne affectera également l'espacement entre la deuxième et la troisième vue de la chaîne **.

*: Il semble que 1.1.0-beta4 n'autorise qu'une marge de départ pour séparer les vues, tandis qu'une simple marge de fin n'aura aucun effet. Quoi qu'il en soit, je recommande de faire correspondre les marges.

**: I suspect c'est parce que la chaîne essaie d'allouer "l'espace" de manière égale. Les marges entre les vues A et B créent un écart, et puisque la chaîne veut appliquer un espacement constant, elle ajoute un écart similaire entre les vues B et C.

Exemples:

Dépouillé, voici une mise en page comme votre original, avec des marges légèrement modifiées. J'ai laissé tous les autres attributs inchangés.

<Android.support.constraint.ConstraintLayout>

    <TextView
        Android:layout_marginEnd="8dp"/>

    <TextView
        Android:layout_marginStart="8dp"/>

    <TextView/>

</Android.support.constraint.ConstraintLayout>

v1.0.2:

v1.1.0-beta4:

Cela devrait illustrer les deux différences entre les versions de la bibliothèque. Encore une fois, je n'ai pas été en mesure de trouver de documentation officielle expliquant tout cela, mais cela semble être vrai uniquement sur la base de l'expérimentation.

Answer 2

En développant la réponse de Ben P., j'ai déterminé ce qui suit concernant les marges dans les chaînes ConstraintLayout. Ces informations s'appliquent à ConstraintLayout version 1.1.0-beta4.

Observations générales

1. Au sein d'une chaîne, toutes les marges de départ (Android:layout_marginStart) sont honorés. Cela signifie que l'espacement entre les vues ne sera pas inférieur à la marge de départ spécifiée. Cependant, l'espacement peut être plus grand comme expliqué ci-dessous.

2. Marges de fin (Android:layout_marginEnd) n'ont aucune pertinence et semblent être ignorés. Cela ne s'applique pas aux marges d'extrémité de la vue à la fin de la chaîne, mais uniquement aux marges intérieures où les vues sont réticulées pour créer la chaîne.

3. Lorsqu'une chaîne est centrée dans ses contraintes, la chaîne est centrée entre la marge de début de la tête de la chaîne et la marge de fin de la queue de la chaîne.

Dans les exemples ci-dessous, les vues "A", "D" et "G" sont limitées au début parent. Les vues "C", "F" et "I" sont limitées à l'extrémité parent.

Style de chaîne: packed

Si le style de chaîne est "compressé", toutes les vues sont placées de bout en bout, séparées par les marges de début spécifiées. L'espacement entre les vues peut varier selon la façon dont les marges de départ sont définies. Dans l'image suivante, la largeur des vues est match_constraints et les marges sont définies comme indiqué.

Si les largeurs des vues sont définies sur autre chose que match_constraints, les vues sont toujours remplies avec les marges spécifiées, mais la chaîne est centrée entre la marge de début de la tête de la chaîne et la marge de fin de la queue de la chaîne.

Je suis venu à cette interprétation au lieu de considérer la marge de fin à attacher à la vue de fin car le Android Studio Designer a cette même interprétation:

Style de chaîne: spread

Dans le style de chaîne "étalée", toutes les vues sont réparties entre les contraintes de début et de fin de sorte que l'espace avant et après chaque vue soit le même et égal à la plus grande marge de début définie. Si la largeur de chaque vue est match_constraints, alors toutes les vues auront la même largeur par défaut.

Style de chaîne: spread_inside

Le spread_inside le style des chaînes prendra la première vue de la chaîne et l'ancrera à sa contrainte de début tout en respectant sa marge de départ. La vue d'extrémité sera ancrée à sa contrainte d'extrémité tout en respectant sa marge d'extrémité. Les vues intérieures seront distribuées avec un espacement égal entre les vues comme les chaînes spread.

---

Vous trouverez ci-dessous la même disposition avec différentes marges définies. Les vues "F" et "I" ont une marge de départ de 8dp défini mais l'écart s'est élargi à 16dp. Les vues "G", "H" et "I" sont toutes de même largeur bien qu'elles ne semblent pas l'être.

Le XML de cette mise en page est présenté à la fin de ce post.

Intéressant mais sans réelle importance: les différents types de chaînes sont indiscernables si les vues ont une largeur de match_constraints et toutes les marges sont nulles.

Les informations ci-dessus s'appliquent également aux chaînes verticales. Remplacer Android:layout_marginTop pour Android:layout_marginStart et Android:layout_marginBottom pour Android:layout_marginEnd.

Disposition

<Android.support.constraint.ConstraintLayout 
    Android:id="@+id/constraintLayout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@Android:color/holo_blue_light">

    <TextView
        Android:id="@+id/heading1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="16dp"
        Android:text="packed, match_constraints"
        Android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        Android:textSize="16sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

    <TextView
        Android:id="@+id/textA"
        Android:layout_width="0dp"
        Android:layout_height="35dp"
        Android:layout_marginTop="8dp"
        Android:background="@Android:color/white"
        Android:gravity="center"
        Android:text="A"
        Android:textColor="@Android:color/black"
        app:layout_constraintEnd_toStartOf="@+id/textB"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/heading1"
        tools:ignore="HardcodedText" />

    <View
        Android:layout_width="8dp"
        Android:layout_height="35dp"
        Android:background="#ff00cc"
        app:layout_constraintEnd_toStartOf="@id/textB"
        app:layout_constraintTop_toTopOf="@id/textB" />

    <TextView
        Android:id="@+id/textB"
        Android:layout_width="0dp"
        Android:layout_height="35dp"
        Android:layout_marginStart="8dp"
        Android:background="@Android:color/darker_gray"
        Android:gravity="center"
        Android:text="B"
        Android:textColor="@Android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/textC"
        app:layout_constraintStart_toEndOf="@+id/textA"
        app:layout_constraintTop_toTopOf="@+id/textA"
        tools:ignore="HardcodedText" />

    <View
        Android:id="@+id/view16dpOnC"
        Android:layout_width="16dp"
        Android:layout_height="35dp"
        Android:background="#fffb00"
        app:layout_constraintEnd_toStartOf="@id/textC"
        app:layout_constraintTop_toTopOf="@+id/textC" />

    <TextView
        Android:id="@+id/textC"
        Android:layout_width="0dp"
        Android:layout_height="35dp"
        Android:layout_marginStart="16dp"
        Android:background="@Android:color/white"
        Android:gravity="center"
        Android:text="C"
        Android:textColor="@Android:color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textB"
        app:layout_constraintTop_toTopOf="@+id/textA"
        tools:ignore="HardcodedText" />

    <TextView
        Android:id="@+id/heading2"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="8dp"
        Android:text="spread, match_constraints"
        Android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        Android:textSize="16sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textA"
        tools:ignore="HardcodedText" />

    <View
        Android:layout_width="16dp"
        Android:layout_height="35dp"
        Android:background="#00ff19"
        app:layout_constraintEnd_toStartOf="@id/textD"
        app:layout_constraintTop_toTopOf="@id/textD" />

    <TextView
        Android:id="@+id/textD"
        Android:layout_width="0dp"
        Android:layout_height="35dp"
        Android:layout_marginTop="8dp"
        Android:background="@Android:color/white"
        Android:gravity="center"
        Android:text="D"
        Android:textColor="@Android:color/black"
        app:layout_constraintEnd_toStartOf="@+id/textE"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/heading2"
        tools:ignore="HardcodedText" />

    <View
        Android:layout_width="16dp"
        Android:layout_height="35dp"
        Android:background="#fffb00"
        app:layout_constraintEnd_toStartOf="@id/textE"
        app:layout_constraintTop_toTopOf="@id/textE" />

    <TextView
        Android:id="@+id/textE"
        Android:layout_width="0dp"
        Android:layout_height="35dp"
        Android:layout_marginStart="16dp"
        Android:background="@Android:color/darker_gray"
        Android:gravity="center"
        Android:text="E"
        Android:textColor="@Android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/textF"
        app:layout_constraintStart_toEndOf="@+id/textD"
        app:layout_constraintTop_toTopOf="@+id/textD"
        tools:ignore="HardcodedText" />

    <View
        Android:layout_width="8dp"
        Android:layout_height="35dp"
        Android:background="#003cff"
        app:layout_constraintStart_toEndOf="@id/textE"
        app:layout_constraintTop_toTopOf="@+id/textE" />

    <View
        Android:layout_width="8dp"
        Android:layout_height="35dp"
        Android:background="#ff00cc"
        app:layout_constraintEnd_toStartOf="@id/textF"
        app:layout_constraintTop_toTopOf="@id/textF" />

    <TextView
        Android:id="@+id/textF"
        Android:layout_width="0dp"
        Android:layout_height="35dp"
        Android:layout_marginStart="8dp"
        Android:background="@Android:color/white"
        Android:gravity="center"
        Android:text="F"
        Android:textColor="@Android:color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textE"
        app:layout_constraintTop_toTopOf="@+id/textD"
        tools:ignore="HardcodedText" />

    <View
        Android:layout_width="16dp"
        Android:layout_height="35dp"
        Android:background="#00ff19"
        app:layout_constraintStart_toEndOf="@id/textF"
        app:layout_constraintTop_toTopOf="@id/textF" />

    <TextView
        Android:id="@+id/heading3"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="8dp"
        Android:text="spread_inside, match_constraints"
        Android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        Android:textSize="16sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textD"
        tools:ignore="HardcodedText" />

    <View
        Android:layout_width="8dp"
        Android:layout_height="35dp"
        Android:background="#003cff"
        app:layout_constraintEnd_toStartOf="@id/textG"
        app:layout_constraintTop_toTopOf="@+id/textG" />

    <TextView
        Android:id="@+id/textG"
        Android:layout_width="0dp"
        Android:layout_height="35dp"
        Android:layout_marginStart="8dp"
        Android:layout_marginTop="8dp"
        Android:background="@Android:color/white"
        Android:gravity="center"
        Android:text="G"
        Android:textColor="@Android:color/black"
        app:layout_constraintEnd_toStartOf="@+id/textH"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/heading3"
        tools:ignore="HardcodedText" />

    <View
        Android:layout_width="16dp"
        Android:layout_height="35dp"
        Android:background="#fffb00"
        app:layout_constraintEnd_toStartOf="@id/textH"
        app:layout_constraintTop_toTopOf="@id/textH" />

    <TextView
        Android:id="@+id/textH"
        Android:layout_width="0dp"
        Android:layout_height="35dp"
        Android:layout_marginStart="16dp"
        Android:background="@Android:color/darker_gray"
        Android:gravity="center"
        Android:text="H"
        Android:textColor="@Android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/textI"
        app:layout_constraintStart_toEndOf="@+id/textG"
        app:layout_constraintTop_toTopOf="@+id/textG"
        tools:ignore="HardcodedText" />

    <View
        Android:layout_width="8dp"
        Android:layout_height="35dp"
        Android:background="#003cff"
        app:layout_constraintStart_toEndOf="@id/textH"
        app:layout_constraintTop_toTopOf="@id/textH" />

    <View
        Android:layout_width="8dp"
        Android:layout_height="35dp"
        Android:background="#ff00cc"
        app:layout_constraintEnd_toStartOf="@id/textI"
        app:layout_constraintTop_toTopOf="@id/textI" />

    <TextView
        Android:id="@+id/textI"
        Android:layout_width="0dp"
        Android:layout_height="35dp"
        Android:layout_marginStart="8dp"
        Android:background="@Android:color/white"
        Android:gravity="center"
        Android:text="I"
        Android:textColor="@Android:color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textH"
        app:layout_constraintTop_toTopOf="@+id/textG"
        tools:ignore="HardcodedText" />

    <View
        Android:layout_width="8dp"
        Android:layout_height="35dp"
        Android:background="#ff00cc"
        Android:visibility="gone"
        app:layout_constraintEnd_toStartOf="@id/textC"
        app:layout_constraintTop_toTopOf="@id/textC" />

    <View
        Android:id="@+id/view8dp"
        Android:layout_width="8dp"
        Android:layout_height="35dp"
        Android:layout_marginStart="24dp"
        Android:background="#ff00cc"
        app:layout_constraintBottom_toTopOf="@id/view8dpGap"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textG"
        app:layout_constraintVertical_bias="0.100000024"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        Android:id="@+id/text8dp"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginStart="16dp"
        Android:text="8dp start margin"
        app:layout_constraintBottom_toBottomOf="@+id/view8dp"
        app:layout_constraintStart_toEndOf="@id/view8dp"
        app:layout_constraintTop_toTopOf="@+id/view8dp"
        tools:ignore="HardcodedText" />

    <View
        Android:id="@+id/view8dpGap"
        Android:layout_width="8dp"
        Android:layout_height="35dp"
        Android:layout_marginStart="24dp"
        Android:layout_marginTop="8dp"
        Android:background="#003cff"
        app:layout_constraintBottom_toTopOf="@+id/view16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view8dp" />

    <TextView
        Android:id="@+id/textView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginStart="16dp"
        Android:text="8dp gap not defined by start margin"
        app:layout_constraintBottom_toBottomOf="@+id/view8dpGap"
        app:layout_constraintStart_toEndOf="@+id/view8dpGap"
        app:layout_constraintTop_toTopOf="@+id/view8dpGap"
        tools:ignore="HardcodedText" />

    <View
        Android:id="@+id/view16dp"
        Android:layout_width="17dp"
        Android:layout_height="35dp"
        Android:layout_marginStart="24dp"
        Android:layout_marginTop="8dp"
        Android:background="#fffb00"
        app:layout_constraintBottom_toTopOf="@+id/view16dpGap"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view8dpGap" />

    <TextView
        Android:id="@+id/text16dp"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginStart="8dp"
        Android:text="16dp start margin"
        app:layout_constraintBottom_toBottomOf="@+id/view16dp"
        app:layout_constraintStart_toEndOf="@+id/view16dp"
        app:layout_constraintTop_toTopOf="@+id/view16dp"
        tools:ignore="HardcodedText" />

    <View
        Android:id="@+id/view16dpGap"
        Android:layout_width="17dp"
        Android:layout_height="35dp"
        Android:layout_marginStart="24dp"
        Android:layout_marginTop="8dp"
        Android:background="#00ff19"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view16dp" />

    <TextView
        Android:id="@+id/text16dpGap"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginStart="8dp"
        Android:text="16dp gap not defined by start margin"
        app:layout_constraintBottom_toBottomOf="@+id/view16dpGap"
        app:layout_constraintStart_toEndOf="@+id/view16dpGap"
        app:layout_constraintTop_toTopOf="@+id/view16dpGap"
        tools:ignore="HardcodedText" />

</Android.support.constraint.ConstraintLayout>