Gridlayout with square children

Question

I've been trying to achieve a GridLayout with square children as you can see from this image.

So basically the view should adjust depending on the number of items without me declaring the column size and row size. Is this possible for GridLayout? If not then forget about this question.

Now lets get to the square part. I tried implementing this code

public class SquareLinearLayout extends LinearLayout {


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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        final int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        if (widthSize == 0 && heightSize == 0) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);

            final int minSize = Math.min(getMeasuredWidth(), getMeasuredHeight());
            setMeasuredDimension(minSize, minSize);
            return;
        }

        final int size;
        if (widthSize == 0 || heightSize == 0) {
            size = Math.max(widthSize, heightSize);
        } else {
            size = Math.min(widthSize, heightSize);
        }

        final int newMeasureSpec = MeasureSpec.makeMeasureSpec(size, MeasureSpec.EXACTLY);
        super.onMeasure(newMeasureSpec, newMeasureSpec);
    }
}

though it does make the child layout square it also occupies the entire width of the screen pushing the other children out of the viewable part of the layout.

Do you have any links or you yourself have a code that is similar to this class but does not occupy the entire width of the layout? Thanks in advance.

http://stackoverflow.com/a/10033481/2826147 – Amit Vaghela Feb 03 '16 at 09:40 — Amit Vaghela, Feb 03 '16 at 09:40

score 0 · Accepted Answer · answered Feb 05 '16 at 00:54

Never mine I got it working using the same code above and place the items in TableLayout instead of Gridlayout.

Here is a sample code if you get stuck in this situation as I did. First I create a layout for the square one.

<?xml version="1.0" encoding="utf-8"?>
<com.android.f45tv.view.ui.SquareLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/sllContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="2dp"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/llHolder"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="2dp"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tvName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textColor="@color/white"
            android:layout_marginBottom="2dp"
            android:gravity="center_horizontal" />

        <TextView
            android:id="@+id/tvPercent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="40sp"
            android:textColor="@color/white"
            android:gravity="center" />

        <TextView
            android:id="@+id/tvBPM"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:textSize="12sp"
            android:gravity="end" />

        <TextView
            android:id="@+id/tvBPMLabel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="bpm"
            android:textSize="10sp"
            android:textColor="@color/white"
            android:gravity="end" />

    </LinearLayout>

</com.android.f45tv.view.ui.SquareLinearLayout>

Then add it to my main activity layout with an include tag inside a table row.

Gridlayout with square children

1 Answers1