grid in constraintlayout

Question

I want to have 2 columns grid with square button in constraint layout this is my xml but it shows one big button when I add 4 button :

screen

and when I delete 2 button every thing works great:

screen2

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.example.poory.myapplication.MainActivity">

    <Button
        android:id="@+id/button"
        app:layout_constraintTop_toBottomOf="@id/slider"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,1:1"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button2"
        android:layout_marginTop="0dp" />

    <Button
        android:id="@+id/button2"
        app:layout_constraintTop_toBottomOf="@id/slider"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Button"
        app:layout_constraintDimensionRatio="H,1:1"
        tools:layout_editor_absoluteY="232dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button" />

    <Button
        android:id="@+id/button3"
        app:layout_constraintTop_toBottomOf="@id/button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Button"
        app:layout_constraintDimensionRatio="H,1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button2" />

    <Button
        android:id="@+id/button4"
        app:layout_constraintTop_toBottomOf="@id/button2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Button"
        app:layout_constraintDimensionRatio="H,1:1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button" />

</android.support.constraint.ConstraintLayout>

this grid should be in scrollview , so I cant use bottom of parent .

Answer 1

I added a Guideline which is working for me.

<Button
    android:id="@+id/button"
    app:layout_constraintTop_toBottomOf="@id/guideline"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="H,1:1"
    android:text="Button"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button2"
    android:layout_marginTop="0dp" />

<Button
    android:id="@+id/button2"
    app:layout_constraintTop_toBottomOf="@id/guideline"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Button"
    app:layout_constraintDimensionRatio="H,1:1"
    tools:layout_editor_absoluteY="232dp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/button" />

<Button
    android:id="@+id/button3"
    app:layout_constraintTop_toBottomOf="@id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"

    android:text="Button"
    app:layout_constraintDimensionRatio="H,1:1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button2"
    />

<Button
    android:id="@+id/button4"
    app:layout_constraintTop_toBottomOf="@id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Button"
    app:layout_constraintDimensionRatio="H,1:1"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/button" />

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline"
    app:layout_constraintGuide_begin="87dp"
    android:orientation="horizontal" />