How to align 3 Views in the center of the screen in Android

Issue

I'm trying to align three elements (Views) in the center of the screen like the image below:

The goal is to align those 3 boxes in the center of the screen with that "inverted triangle" format, where two boxes stay in the first line, above the third box in the second line, centered both vertically between the title and buttons and horizontally between parent's limits.

This is what I tried:

<View
    android:id="@+id/v_box_male"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginEnd="10dp"
    android:background="@drawable/border"
    app:layout_constraintBottom_toTopOf="@id/iv_other"
    app:layout_constraintEnd_toStartOf="@id/v_box_female"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/tv_gender"/>

(...)

<View
    android:id="@+id/v_box_female"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginStart="10dp"
    android:background="@drawable/border"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/v_box_male"
    app:layout_constraintTop_toTopOf="@id/v_box_male" />

(...)

<View
    android:id="@+id/v_box_other"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:background="@drawable/border"
    app:layout_constraintTop_toBottomOf="@id/v_box_male"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="@id/bt_next" />

However, the third box is not getting "packed" to the other two boxes above it.

This is the result at the moment:

Solution

It seems I found the answer. The problem was on the app:layout_constraintBottom_toTopOf="@id/iv_other" of the v_box_male. It was referencing the Image View (gender symbol) and not the View (box).

It was also missing the app:layout_constraintVertical_chainStyle="packed".

Here's the correct code:

<View
    android:id="@+id/v_box_male"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginEnd="10dp"
    android:layout_marginBottom="10dp"
    android:background="@drawable/border"
    app:layout_constraintBottom_toTopOf="@id/v_box_other"
    app:layout_constraintEnd_toStartOf="@id/v_box_female"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/tv_gender"
    app:layout_constraintVertical_chainStyle="packed" />

<View
    android:id="@+id/v_box_female"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginStart="10dp"
    android:background="@drawable/border"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/v_box_male"
    app:layout_constraintTop_toTopOf="@id/v_box_male" />

<View
    android:id="@+id/v_box_other"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginTop="10dp"
    android:background="@drawable/border"
    app:layout_constraintBottom_toTopOf="@id/bt_next"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/v_box_male" />

Answered By - jpsf