Enhanced Sectioned Grid with Varying Columns

We’ve been pleased to see that the Sectioned Grid adapter we open-sourced last year has been useful for other Android developers. It’s a modular component that fulfills a commonly encountered desire for nicely formatted grids of data, which seem to be increasingly in demand as Android tablets become more popular.

One suggestion made at our GitHub project was to keep grid items at a fixed size. The original implementation let you specify the number of columns, and then automatically resized your grid items based on the available space. However, there are some cases where you would prefer for the grid items to keep a consistent size, and vary the number of columns. This is particularly useful for cases like presenting a gallery of image thumbnails, where aspect ratio is important.

For example, the previous implementation running on a handset might look like the following.

Sectioned grid with 2 columns specified.

When using the new mode, it’s possible to specify that every item should be 190dp by 190dp large. This will keep every item as a perfect square, regardless of the screen size or device orientation. The following four screens show the same layout rendering on a Nexus 4 and a Nexus 7 in both horizontal and vertical orientations.

As a bonus, when using this mode you can use a single layout for all screen sizes without needing to use configuration qualifiers. Depending on your app needs, you still might want to provide an alternative layout; for example, you might specify a larger item size in layout-w720dp if you would like to show larger thumbnails on tablets.

Our updated version of the Sectioned Grid Adapter is now available for pulling. By default it maintains the previous behavior of varying column widths. To switch to the new method of varying the number of columns, pass the argument SectionableAdapter.MODE_VARY_COUNT to the SectionableAdapter constructor.

You will need to slightly tweak your layouts as well. When using the default behavior (now called MODE_VARY_WIDTHS), the number of columns is determined from the number of child item elements in a row.

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/bookRow_itemHolder"
    >
    <include layout="@layout/book_item"/>
    <include layout="@layout/book_item"/>
</LinearLayout>

When using MODE_VARY_COUNT, the adapter will automatically determine how many columns will fit in your rows. Just supply enough items to support your expected maximum count. The adapter will hide any unused items.

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/bookRow_itemHolder"
    >
    <include layout="@layout/book_item_vary_columns"/>
    <include layout="@layout/book_item_vary_columns"/>
    <include layout="@layout/book_item_vary_columns"/>
    <include layout="@layout/book_item_vary_columns"/>
    <include layout="@layout/book_item_vary_columns"/>
    <include layout="@layout/book_item_vary_columns"/>
    <include layout="@layout/book_item_vary_columns"/>
    <include layout="@layout/book_item_vary_columns"/>
    <include layout="@layout/book_item_vary_columns"/>
    <include layout="@layout/book_item_vary_columns"/>
</LinearLayout>

Finally, you’ll want to omit layout_weight for your grid items, since this would cause Android to stretch them out. Just provide specific values for your layout_width and layout_height.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="190dp"
    android:layout_height="190dp"
    android:orientation="vertical" 
    android:padding="8dp"
    >
    <TextView
        android:id="@+id/bookItem_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="#ffffff"
        android:padding="8dp"
      android:background="@drawable/gradients"
        />
</LinearLayout>

If you choose to specify the widths of your columns, try to pick values that fit well into a variety of screen sizes. This should help avoid showing too much empty space on the end of your rows. Of course, you could also use other approaches like horizontally aligning your grid to make it look balanced.

Feel free to check out the project. Hopefully it will serve you as well as it has served us!

Download on GitHub