View in ConstraintLayout does not fit within screen bounds

Question

I'm trying to align 3 TableLayouts within a ConstraintLayout. I want the table with the MaterialButtons to have 1:1 dimension ratio, while the table on the top and on start still completely remains within the bounds of the screen. This is what it currently looks like:

The definition of this TableLayout:

      <TableLayout
            android:id="@+id/play_field_table"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/play_field_row_values_table"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.7">

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <com.google.android.material.button.MaterialButton style="@style/field_unpainted" />
                ...
                <com.google.android.material.button.MaterialButton style="@style/field_unpainted" />
            </TableRow> 
            ...
      </TableLayout>

The definition of the button's style:

    <style name="field_unpainted" parent="Widget.MaterialComponents.Button.OutlinedButton">
        <item name="android:layout_margin">0dp</item>
        <item name="android:padding">0dp</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:insetTop">0dp</item>
        <item name="android:insetBottom">0dp</item>
        <item name="android:textAlignment">center</item>
        <item name="android:textStyle">bold</item>
        <item name="android:backgroundTint">#ffffff</item>
        <item name="android:strokeColor">#000000</item>
        <item name="cornerFamily">cut</item>
        <item name="cornerRadius">0dp</item>
    </style>

The definition of the TableLayout on the start:

      <TableLayout
            android:id="@+id/play_field_row_values_table"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_marginLeft="8dp"
            app:layout_constraintBottom_toBottomOf="@+id/play_field_table"
            app:layout_constraintEnd_toStartOf="@+id/play_field_table"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/play_field_table">

            <TableRow
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="end|center_vertical"
                    android:text="1 1"
                    android:textAlignment="gravity"
                    android:textColor="@color/black" />
            </TableRow>
            ...
      </TableLayout>

This is the definition of the TableLayout on the top:

        <TableLayout
            android:id="@+id/play_field_column_values_table"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toTopOf="@+id/play_field_table"
            app:layout_constraintEnd_toEndOf="@+id/play_field_table"
            app:layout_constraintStart_toStartOf="@+id/play_field_table">

            <TableRow
                android:layout_width="0dp"
                android:layout_height="wrap_content">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center_horizontal|bottom"
                    android:text="1"
                    android:textAlignment="gravity"
                    android:textColor="@color/black" />
                ...
            </TableRow>
            ...
      </TableLayout>

I've tried setting the layout_constraintDimensionRatio to 1:1 on the "id/play_field_table", but then it stretches out of the screen:

Also tried setting the layout_constraintDimensionRatio to 1:1 in the button style, but then the buttons either are just not displayed or the same result as above. I feel like the ratios should be both set for the buttons and for the table, just can't figure out correct combinations. Any advice?

Answer 1

I managed to fix the issue by setting the following values for the "@+id/play_field_table" TableLayout:

• Changed "layout_height" from "wrap_content" to "0dp" value
• Added "layout_constraintDimensionRatio" with "1:1" value
• Added "layout_weight" with "1" value to the TableRows inside the TableLayout