Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 207
Nilzor Avatar asked Jan 24 '13 11:01

Nilzor


People also ask

What is the grid layout in android?

A layout that places its children in a rectangular grid. The grid is composed of a set of infinitely thin lines that separate the viewing area into cells. Throughout the API, grid lines are referenced by grid indices. A grid with N columns has N + 1 grid indices that run from 0 through N inclusive.

What is the difference between GridView and GridLayout in Android?

Because a GridView gets its data from a ListAdapter, the only data loaded in memory will be the one displayed on screen. GridViews, much like ListViews reuse and recycle their views for better performance. Whereas a GridLayout is a layout that places its children in a rectangular grid.

Which attribute define number of row in GridLayout?

In short if you want to define the number of rows and columns in the project file, then there are two attributes present in gridLayout. These are columncount and rowcount present in the attributes. One can use these to define the numbers of columns and rows respectively.


3 Answers

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>
like image 60
Jack Avatar answered Oct 27 '22 22:10

Jack


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

like image 40
Matt Taylor Avatar answered Oct 27 '22 22:10

Matt Taylor


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>
like image 8
cesards Avatar answered Oct 28 '22 00:10

cesards