Android Expand Horizontallyはみだしちゃう

Codelabs for Android Developer Fundamentals　1.2 Part B: The layout editor
を進めていて、あれうまくいかない

言われた通りにやってるんだけどな〜　たぶん

これはConstraintLayoutに関するものです。

問題点

期待する結果

２つのButtonを選択した状態でツールバーのExpand Horizontallyをクリックすると
均等に配置されるよ。と言うもの

現状

COUNTボタンがはみ出ちゃう..

Expand HorizontallyをクリックすることでXMLファイルはどのように変化しているのか

クリック前

activity_main.xml

<Button
        android:id="@+id/button_toast"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorPrimary"
        android:onClick="showToast"
        android:text="@string/button_label_toast"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:background="@color/colorPrimary"
        android:onClick="countUp"
        android:text="@string/button_label_count"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button_toast"
        app:layout_constraintStart_toEndOf="@+id/button_toast" />

クリック後

activity_main.xml

<Button
        android:id="@+id/button_toast"
        android:layout_width="382dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorPrimary"
        android:onClick="showToast"
        android:text="@string/button_label_toast"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_count"
        android:layout_width="383dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:background="@color/colorPrimary"
        android:onClick="countUp"
        android:text="@string/button_label_count"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button_toast"
        app:layout_constraintStart_toEndOf="@+id/button_toast" />

デカデカと書いたけど、要するに、
layout_widthに値が入っただけ です
特に新しい行は増えてないみたい。行っていうか制約かな。
しかも382dp と 383dp で同じサイズでも無い

解決策

とりあえず
Expand Horizontallyをクリックすることをやめる

以下の記事を参考にしました。
[Android] ConstraintLayout レイアウト逆引きまとめ
初めてのConstraintLayoutでChainStyleを利用してみた

つまるところChainを使うといいみたい

(1) ふたつのButtonを選択して、Create Horizontal Chain

(2) ふたつのButtonのXMLを
android:layout_width="0dp" に変更

片方のButtonのXMLに
app:layout_constraintHorizontal_chainStyle="spread" を指定する

activity_main.xml

<Button
        android:id="@+id/button_toast"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorPrimary"
        android:onClick="showToast"
        android:text="@string/button_label_toast"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"/>

    <Button
        android:id="@+id/button_count"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:background="@color/colorPrimary"
        android:onClick="countUp"
        android:text="@string/button_label_count"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button_toast"
        app:layout_constraintStart_toEndOf="@+id/button_toast" />

すると、

惜しい！！！！
あとはCOUNTボタンに
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
の制約をつけてあげると、

うまいこといきました

やっぱりXMLでいじるのが大事ですねー