Android GridLayout API 21

Question

I'm trying to accomplish something like this:

Currently, I'm manually setting the width of the tiles equal to half the screen width. This works well, but it makes adding dividers between the tiles (as seen in the screenshot) hard. Luckily, it seems that in API 21, there is now support for weight in GridLayout, quoted here for your convenience:

As of API 21, GridLayout's distribution of excess space accomodates the principle of weight. In the event that no weights are specified, the previous conventions are respected and columns and rows are taken as flexible if their views specify some form of alignment within their groups. The flexibility of a view is therefore influenced by its alignment which is, in turn, typically defined by setting the gravity property of the child's layout parameters. If either a weight or alignment were defined along a given axis then the component is taken as flexible in that direction. If no weight or alignment was set, the component is instead assumed to be inflexible.

Multiple components in the same row or column group are considered to act in parallel. Such a group is flexible only if all of the components within it are flexible. Row and column groups that sit either side of a common boundary are instead considered to act in series. The composite group made of these two elements is flexible if one of its elements is flexible.

To make a column stretch, make sure all of the components inside it define a weight or a gravity. To prevent a column from stretching, ensure that one of the components in the column does not define a weight or a gravity.

When the principle of flexibility does not provide complete disambiguation, GridLayout's algorithms favour rows and columns that are closer to its right and bottom edges. To be more precise, GridLayout treats each of its layout parameters as a constraint in the a set of variables that define the grid-lines along a given axis. During layout, GridLayout solves the constraints so as to return the unique solution to those constraints for which all variables are less-than-or-equal-to the corresponding value in any other valid solution.

I put together this simple layout consisting of a GridLayout with 2 columns, trying to achieve two equally-wide columns:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:columnCount="2">
        <TextView android:layout_width="wrap_content" android:layout_gravity="fill_horizontal" android:text="Hello" android:layout_columnWeight="1" />
        <TextView android:layout_width="wrap_content" android:layout_gravity="fill_horizontal" android:text="Hello" android:layout_columnWeight="1" />
        <TextView android:layout_width="wrap_content" android:layout_gravity="fill_horizontal" android:text="Hello" android:layout_columnWeight="1" />
        <TextView android:layout_width="wrap_content" android:layout_gravity="fill_horizontal" android:text="Hello" android:layout_columnWeight="1" />
        <TextView android:layout_width="wrap_content" android:layout_gravity="fill_horizontal" android:text="Hello" android:layout_columnWeight="1" />
    </GridLayout>
</RelativeLayout>

I thought that since all the children have equal column weight, it would result in equally-wide columns. This doesn't seem to be the case however, since this is what results:

The first column is narrower than the second column. Is there something I'm missing here? Am I misunderstanding how weight works with GridLayout?

As another question, I can't seem to do the 0 width with weight trick to ensure equal width regardless of content (the TextView just disappears). How can I accomplish this with GridLayout?

Answer 1

Just add android:layout_width="0dp" to every child of the GridLayout (any child without layout_width="0dp" will break the weight layout.)

Make sure there is no child view has a bigger width size than average width size if you have child view with specify width size.

Hope it will help u.

Answer 2

try this, i will edit it very soon, want to try myself and see

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

    <Button
        android:layout_column="0"
        android:layout_gravity="fill"
        android:layout_row="0"
        android:layout_columnWeight="1"
        android:text="c0 | r0" />

   <Button
        android:layout_column="1"
        android:layout_gravity="fill"
        android:layout_row="0"
         android:layout_columnWeight="1"
        android:text="c1 | r0" />

   <Button
        android:layout_column="1"
        android:layout_gravity="fill"
        android:layout_row="3"
        android:layout_columnWeight="1"
        android:text="c1 | r3" />

   <Button
        android:layout_column="0"
        android:layout_gravity="fill"
        android:layout_row="1"
        android:layout_columnWeight="1"
        android:text="c0 | r1" />

</GridLayout>

the text on the buttons explains how gridlayout works pretty cool right?

You specify the number of columns for a row and you place your widgets in their respective position (Column Number and Row Number).. placed the positions in the text to reflect it..

actually never took the time with gridlayout, i had to play with eclipse for 2 minutes to get it.. so column and row.. you can play with them actually, i just did and had one column and the other column empty.its in my example.

hope it helps