CommonsWare CommonsWare - 11 days ago 6
Android Question

GridLayout and Row/Column Span Woe

The Android Developers Blog post introducing

shows this diagram of how spans impact automatic index allocation:

automatic index allocation

I am attempting to actually implement that using a
GridLayout
. Here is what I have so far:

<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.commonsware.android.gridlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:orientation="horizontal"
app:columnCount="8">

<Button
app:layout_columnSpan="2"
app:layout_rowSpan="2"
android:layout_gravity="fill_horizontal"
android:text="@string/string_1"/>

<Button
app:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:text="@string/string_2"/>

<Button
app:layout_rowSpan="4"
android:text="@string/string_3"/>

<Button
app:layout_columnSpan="3"
app:layout_rowSpan="2"
android:layout_gravity="fill_horizontal"
android:text="@string/string_4"/>

<Button
app:layout_columnSpan="3"
android:layout_gravity="fill_horizontal"
android:text="@string/string_5"/>

<Button
app:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:text="@string/string_6"/>

<android.support.v7.widget.Space
app:layout_column="0"
android:layout_width="36dp"
/>

<android.support.v7.widget.Space
android:layout_width="36dp"
/>

<android.support.v7.widget.Space
android:layout_width="36dp"
/>

<android.support.v7.widget.Space
android:layout_width="36dp"
/>

<android.support.v7.widget.Space
android:layout_width="36dp"
/>

<android.support.v7.widget.Space
android:layout_width="36dp"
/>

<android.support.v7.widget.Space
android:layout_width="36dp"
/>

<android.support.v7.widget.Space
android:layout_width="36dp"
/>

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


I had to introduce the
<Space>
elements to ensure each column had a minimum width, otherwise, I would have a bunch of zero-width columns.

However, even with them, I get this:

sample GridLayout

Notably:


  • Despite
    android:layout_gravity="fill_horizontal"
    , my widgets with column spans do not fill the spanned columns

  • Despite the
    android:layout_rowSpan
    values, nothing spans rows



Can anyone reproduce the diagram from the blog post using a
GridLayout
?

Thanks!

Answer

It feels pretty hacky, but I managed to get the correct look by adding an extra column and row beyond what is needed. Then I filled the extra column with a Space in each row defining a height and filled the extra row with a Space in each col defining a width. For extra flexibility, I imagine these Space sizes could be set in code to provide something similar to weights. I tried to add a screenshot, but I do not have the reputation necessary.

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="9"
android:orientation="horizontal"
android:rowCount="8" >

<Button
    android:layout_columnSpan="2"
    android:layout_gravity="fill"
    android:layout_rowSpan="2"
    android:text="1" />

<Button
    android:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="2" />

<Button
    android:layout_gravity="fill_vertical"
    android:layout_rowSpan="4"
    android:text="3" />

<Button
    android:layout_columnSpan="3"
    android:layout_gravity="fill"
    android:layout_rowSpan="2"
    android:text="4" />

<Button
    android:layout_columnSpan="3"
    android:layout_gravity="fill_horizontal"
    android:text="5" />

<Button
    android:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="6" />

<Space
    android:layout_width="36dp"
    android:layout_column="0"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="1"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="2"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="3"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="4"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="5"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="6"
    android:layout_row="7" />

<Space
    android:layout_width="36dp"
    android:layout_column="7"
    android:layout_row="7" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="0" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="1" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="2" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="3" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="4" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="5" />

<Space
    android:layout_height="36dp"
    android:layout_column="8"
    android:layout_row="6" />

</GridLayout>

screenshot

Comments