CODEWITHSUNDEEP
androidandroid-layout
Nilzor
Nilzor

Reputation: 18583

How do I specify width and height of Android GridLayout cells in relative measures?

I'm trying to figure out how GridLayout works, but one thing I can't figure out from the documentation is how or if one can control the size of the grid cells.

Say I want a two by two grid where each cell occupy exactly 25% of the screen real estate (half height, half width) - can I do this?

With LinearLayout I would accomplish this by nesting two horizontal LinearLayout's in one vertical and then assigning a weight of 1 to all elements. GridLayout does not support the weight property though.

Upvotes: 43

Views: 88766

Answers (5)

Sunny Prakash
Sunny Prakash

Reputation: 870

I have made my own 3 * 3 board for tic tac toe using below dimensions. This code is for the first row. I did the same for other rows too.

    <android.support.v7.widget.GridLayout
    android:id="@+id/gridLayout"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/board"
    app:columnCount="3"
    app:layout_constraintBottom_toBottomOf="@+id/blackboard"
    app:layout_constraintEnd_toEndOf="@+id/blackboard"
    app:layout_constraintStart_toStartOf="@+id/blackboard"
    app:layout_constraintTop_toTopOf="@+id/blackboard"
    app:rowCount="3">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_column="0"
        app:layout_row="0"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"
        app:layout_gravity="center"/>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_column="1"
        app:layout_row="0"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"
        app:layout_gravity="center"/>

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_column="2"
        app:layout_row="0"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"
        app:layout_gravity="center"/>

Upvotes: -2

Jack
Jack

Reputation: 2660

There's two properties android:layout_columnWeight and layout_rowWeight which works like layout_weight in LinearLayout. This is supported in API 21. For older android devices, use the GridLayout from the v7 support library.

Those properties will allow you to adjust the width/height of column base on the value you assigned to each column. The formula goes like this (column_weight/ sum_of_column_weight) * gridLayout_width = column_width.

Here's an example which is a gridview with 2 rows and 2 columns evenly spread out, each takes 50% of the weight and height of the grid.

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
>

    <TextView
        android:text="SEARCH FEE"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
     />

    <TextView
        android:layout_columnWeight="1"
        android:text="SEARCH FEE"
        android:layout_rowWeight="1"
     />

    <TextView
        android:text="SEARCH FEE"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        />

    <TextView
        android:layout_columnWeight="1"
        android:text="SEARCH FEE"
        android:layout_rowWeight="1"
        />
</GridLayout>

Upvotes: 21

H3x0n
H3x0n

Reputation: 280

There is a helper method inside the GridLayout:

GridLayout.LayoutParams params = new GridLayout.LayoutParams();
            params.columnSpec = GridLayout.spec(GridLayout.UNDEFINED, 1, getAlignment(Gravity.NO_GRAVITY, true), 1);
item.setLayoutParams(params);

private GridLayout.Alignment getAlignment(int gravity, boolean horizontal) {
        int mask = horizontal ? HORIZONTAL_GRAVITY_MASK : VERTICAL_GRAVITY_MASK;
        int shift = horizontal ? AXIS_X_SHIFT : AXIS_Y_SHIFT;
        int flags = (gravity & mask) >> shift;
        switch (flags) {
            case (AXIS_SPECIFIED | AXIS_PULL_BEFORE):
                return horizontal ? LEFT : TOP;
            case (AXIS_SPECIFIED | AXIS_PULL_AFTER):
                return horizontal ? RIGHT : BOTTOM;
            case (AXIS_SPECIFIED | AXIS_PULL_BEFORE | AXIS_PULL_AFTER):
                return FILL;
            case AXIS_SPECIFIED:
                return CENTER;
            case (AXIS_SPECIFIED | AXIS_PULL_BEFORE | GravityCompat.RELATIVE_LAYOUT_DIRECTION):
                return START;
            case (AXIS_SPECIFIED | AXIS_PULL_AFTER | GravityCompat.RELATIVE_LAYOUT_DIRECTION):
                return END;
            default:
                return GridLayout.FILL;
        }
    }

Normally this is only accessible thought reflection.

And the smaller version:

params.columnSpec = GridLayout.spec(GridLayout.UNDEFINED, 1, GridLayout.FILL, 1);

Upvotes: 2

cesards
cesards

Reputation: 16329

It would be something like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:columnCount="2"
    app:rowCount="2">

    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="1"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="2"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="3"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="4"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

</android.support.v7.widget.GridLayout>

Upvotes: 9

Matt Taylor
Matt Taylor

Reputation: 3408

it looks like setting it as you'd like should be fairly straightforward according to the documentation:

android:rowCount='2'
android:columnCount='2'

and in the children set

android:layout_columnSpan="1"
android:layout_rowSpan="1"

This reference also mentions stretching:

To prevent a column from stretching, ensure that one of the components in the column does not define a gravity.

Which would seem like a solution to keep the rows and columns in a 50:50 ratio without resizing according to content

Upvotes: 12

Related Questions