Fill remaining space with a view that has aspect ratio in ConstraintLayout

Question

I have two views (viewA, viewB) in vertical chain. aspect ratio of viewA should always be 1:1, while height of viewB is dynamic (it may be 400dp, may be 700dp)

Expected results: Width viewA should be reduced (keeping the aspect ratio) when the height of viewB is too big to fit two views in screen.

Actual result: Width of viewA always matches parent and views leave bounds of screen if height of viewB is too big.

NOTE: It is desired to use ConstantsLayout and don't have nested viewgroups.

<View
    android:id="@+id/viewA"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/viewB"
    app:layout_constraintDimensionRatio="h,1:1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_chainStyle="spread"/>

<View
    android:id="@+id/viewB"
    android:layout_width="match_parent"
    android:layout_height="700dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/viewA"/>

Answer 1

Change the dimension ratio of the top view to the following:

app:layout_constraintDimensionRatio="w,1:1"

Now, when the bottom view height changes, the top will track as you want while maintaining the 1:1 ratio. I added color to better see the views in the layout.

Bottom view at 700dp

Bottom view at 500dp

Bottom view at 200dp