2

I need to create a square grid with labels for the rows on the left side. The grid should use the entire space available on the device while keeping width=height. Because this grid has several rows and several columns automatically adjusted, I thought that using a customized ConstraintLayout would fit that requirement.

In the code below, which is used in a "portrait" layout, if I set the layout_width of the SCFrame view to

  • match_parent: the size of the grid is as expected, but the gravity of the textView10 and textView11 fields is not applied
  • wrap_content: the grid collapses to 0dpx0dp
  • 0dp: same as wrap_content, which in my opinion is not in line with the documentation of the ConstraintLayout that says "Using 0dp, which is the equivalent of MATCH_CONSTRAINT"
  • xxxdp: the SCFrame grid is square with width=xxxdp and height=xxxdp, and the gravity of the textView10 and textView11 fields is correctly applied

What should I change in the following code to get a grid that is square and uses the entire width of the screen (whatever the used device and allowing space for the labels column) and with the correct gravity for the labels?

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/scMainFrame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="?attr/actionBarSize"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintVertical_chainStyle="spread_inside"
    app:layout_optimizationLevel="chains"
    tools:context=".MainActivity"
    tools:layout_behavior="@string/appbar_scrolling_view_behavior">

    <TextView
        android:id="@+id/textView10"
        android:layout_width="14dp"
        android:layout_height="0dp"
        android:gravity="center_vertical"
        android:text="A"
        android:background="#FF0000"
        app:layout_constraintTop_toTopOf="@+id/SCFrame"
        app:layout_constraintRight_toLeftOf="@+id/SCFrame"
        app:layout_constraintBottom_toTopOf="@+id/textView11" />

    <TextView
        android:id="@+id/textView11"
        android:layout_width="14dp"
        android:layout_height="0dp"
        android:gravity="center_vertical"
        android:text="B"
        android:background="#FF0000"
        app:layout_constraintTop_toBottomOf="@+id/textView10"
        app:layout_constraintRight_toLeftOf="@+id/SCFrame"
        app:layout_constraintBottom_toBottomOf="@+id/SCFrame" />

    <be.ema.sclibrary.SCConstraintLayout
        android:id="@+id/SCFrame"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="14dp"
        android:background="#0000FF"
        app:layout_constraintLeft_toRightOf="@+id/textView10"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <TextView
            android:id="@+id/A1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="this is A1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/A2"
            app:layout_constraintBottom_toTopOf="@+id/B1" />

        <TextView
            android:id="@+id/A2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="this is A2"
            app:layout_constraintLeft_toRightOf="@+id/A1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/B2" />

        <TextView
            android:id="@+id/B1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="this is B1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/A1"
            app:layout_constraintRight_toLeftOf="@+id/B2"
            app:layout_constraintBottom_toBottomOf="parent" />

        <TextView
            android:id="@+id/B2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="this is B2"
            app:layout_constraintLeft_toRightOf="@+id/B1"
            app:layout_constraintTop_toBottomOf="@+id/A1"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

    </be.ema.sclibrary.SCConstraintLayout>
</android.support.constraint.ConstraintLayout>

This is the code for the customized ConstraintLayout:

class SCConstraintLayout extends android.support.constraint.ConstraintLayout {
    public SCConstraintLayout(Context context) {
        super(context);
    }

    public SCConstraintLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SCConstraintLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int chosenDimension = 0;
        int mode = 0;

        if (ScMain.isLandscapeOriented) {
            chosenDimension = MeasureSpec.getSize(heightMeasureSpec);
            mode = MeasureSpec.getMode(heightMeasureSpec);
        } else {
            chosenDimension =  MeasureSpec.getSize(widthMeasureSpec);
            mode = MeasureSpec.getMode(widthMeasureSpec);
        }

        int width = MeasureSpec.makeMeasureSpec(chosenDimension, mode);
        int height = MeasureSpec.makeMeasureSpec(chosenDimension, mode);

        //        setMeasuredDimension(width, height);
        super.onMeasure(width, height);
    }
}
TheLibrarian
  • 1,540
  • 1
  • 11
  • 22
ema3272
  • 1,021
  • 2
  • 13
  • 28

0 Answers0