A custom Android layout class that arranges children in a grid-like manner, optimizing for even horizontal and vertical whitespace.

DashboardLayout.java

/*
 * ATTENTION:
 *
 * This layout is now maintained in the `iosched' code.google.com project:
 *
 * http://code.google.com/p/iosched/source/browse/android/src/com/google/android/apps/iosched/ui/widget/DashboardLayout.java
 *
 */

/*
 * Copyright 2011 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.google.android.apps.iosched.ui.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

/**
 * Custom layout that arranges children in a grid-like manner, optimizing for even horizontal and
 * vertical whitespace.
 */
public class DashboardLayout extends ViewGroup {

    private static final int UNEVEN_GRID_PENALTY_MULTIPLIER = 10;

    private int mMaxChildWidth = 0;
    private int mMaxChildHeight = 0;

    public DashboardLayout(Context context) {
        super(context, null);
    }

    public DashboardLayout(Context context, AttributeSet attrs) {
        super(context, attrs, 0);
    }

    public DashboardLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        mMaxChildWidth = 0;
        mMaxChildHeight = 0;

        final int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(
                MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.AT_MOST);
        final int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(
                MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.AT_MOST);

        final int count = getChildCount();
        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }

            child.measure(childWidthMeasureSpec, childHeightMeasureSpec);

            mMaxChildWidth = Math.max(mMaxChildWidth, child.getMeasuredWidth());
            mMaxChildHeight = Math.max(mMaxChildHeight, child.getMeasuredHeight());
        }

        setMeasuredDimension(
                resolveSize(mMaxChildWidth, widthMeasureSpec),
                resolveSize(mMaxChildHeight, heightMeasureSpec));
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int width = r - l;
        int height = b - t;

        final int count = getChildCount();

        // Calculate the number of visible children.
        int visibleCount = 0;
        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }
            ++visibleCount;
        }

        if (visibleCount == 0) {
            return;
        }

        // Calculate what number of rows and columns will optimize for even horizontal and
        // vertical whitespace between items. Start with a 1 x N grid, then try 2 x N, and so on.
        int bestSpaceDifference = Integer.MAX_VALUE;
        int spaceDifference;

        // Horizontal and vertical space between items
        int hSpace = 0;
        int vSpace = 0;

        int cols = 1;
        int rows;

        while (true) {
            rows = (visibleCount - 1) / cols + 1;

            hSpace = ((width - mMaxChildWidth * cols) / (cols + 1));
            vSpace = ((height - mMaxChildHeight * rows) / (rows + 1));

            spaceDifference = Math.abs(vSpace - hSpace);
            if (rows * cols != visibleCount) {
                spaceDifference *= UNEVEN_GRID_PENALTY_MULTIPLIER;
            }

            if (spaceDifference < bestSpaceDifference) {
                // Found a better whitespace squareness/ratio
                bestSpaceDifference = spaceDifference;

                // If we found a better whitespace squareness and there's only 1 row, this is
                // the best we can do.
                if (rows == 1) {
                    break;
                }
            } else {
                // This is a worse whitespace ratio, use the previous value of cols and exit.
                --cols;
                rows = (visibleCount - 1) / cols + 1;
                hSpace = ((width - mMaxChildWidth * cols) / (cols + 1));
                vSpace = ((height - mMaxChildHeight * rows) / (rows + 1));
                break;
            }

            ++cols;
        }

        // Lay out children based on calculated best-fit number of rows and cols.

        // If we chose a layout that has negative horizontal or vertical space, force it to zero.
        hSpace = Math.max(0, hSpace);
        vSpace = Math.max(0, vSpace);

        // Re-use width/height variables to be child width/height.
        width = (width - hSpace * (cols + 1)) / cols;
        height = (height - vSpace * (rows + 1)) / rows;

        int left, top;
        int col, row;
        int visibleIndex = 0;
        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }

            row = visibleIndex / cols;
            col = visibleIndex % cols;

            left = l + hSpace * (col + 1) + width * col;
            top = t + vSpace * (row + 1) + height * row;

            child.layout(left, top,
                    (hSpace == 0 && col == cols - 1) ? r : (left + width),
                    (vSpace == 0 && row == rows - 1) ? b : (top + height));
            ++visibleIndex;
        }
    }
}

Hi,
I have tried this layout and it doesn't render as expected.
Here is what I see: http://twitpic.com/4cv38x Here is how it should look like: https://market.android.com/details?id=com.bondaii

This is xml of this screen:

<com.markupartist.android.widget.ActionBar
android:id="@+id/actionbar" style="@style/ActionBar" />







<com.google.android.apps.iosched.ui.widget.DashboardLayout
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="@drawable/gradient_box" android:layout_weight="1">




</com.google.android.apps.iosched.ui.widget.DashboardLayout>

Am I doing anything wrong?

use instead of your com.google.android.apps.iosched.ui.widget.DashboardLayout,i meet your the same question

Hi,
I tried solution you suggest and it doesn't work. When I use:

<View class="com.google.android.apps.iosched.ui.widget.DashboardLayout"
android:layout_width="fill_parent" android:layout_height="fill_parent">

it gives me ClassCastException. When I use:

 <ViewGroup class="com.google.android.apps.iosched.ui.widget.DashboardLayout"
 android:layout_width="fill_parent" android:layout_height="fill_parent">

it gives me InstantiationException.

Using com.google.android.apps.iosched.ui.widget.DashboardLayout directly works only when layout occupies whole screen. I need to display ActionBar on top and then it breaks the layout.

It appears that it should not be passing the top and left position (t and l) that is passed to the onLayout method as part of the child.layout calculation. Removing those fixed a problem I had with excessive whitespace above the buttons. Another problem that I haven't resolved is why the Button's don't have their text centered below them. I'm assuming that the DashboardLayout should be responsible for determining the gravity of each child and drawing it accordingly?

Latest version of DashboardLayout will be maintained here:
http://code.google.com/p/iosched/source/browse/android/src/com/google/android/apps/iosched/ui/widget/DashboardLayout.java

Actually, the iosched project is where I got my code. I see that issue #7 (http://code.google.com/p/iosched/issues/detail?id=7) addresses the problem I knew how to fix. I'm still uncertain about the centering problem. Note that the twitpic from comment #1 has the same issue as seen on the top right button.

I have tried the latest version and whitespace bug is indeed fixed. Good work.

But I'm facing same issue as ccomeaux - text of buttons is not centered even when I specify gravity. I'm using this code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.markupartist.android.widget.ActionBar
    android:id="@+id/actionbar" style="@style/ActionBar" />
<com.google.android.apps.iosched.ui.widget.DashboardLayout
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/somebody_paid"
        android:id="@+id/somebody_paid"
        android:onClick="somebodyPaidClicked" android:gravity="center" />
    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/who_should_pay"
        android:id="@+id/who_should_pay"
        android:onClick="whoShouldPayClicked" android:gravity="center"/>
    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/payments_log"
        android:id="@+id/payments_log"
        android:onClick="paymentsLogClicked" android:gravity="center"/>
    <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/settle_debts"
        android:id="@+id/settle_debts"
        android:onClick="settleDebtsClicked" android:gravity="center"/>
</com.google.android.apps.iosched.ui.widget.DashboardLayout>
</LinearLayout>

And this is how it looks like:

http://twitpic.com/4yl9kd

I have also created an issue on Google Code:

http://code.google.com/p/iosched/issues/detail?id=8

It has been fixed, great. Now I can finally use DashboardLayout properly in my app. See working code here: http://code.google.com/p/iosched/source/browse/android/src/com/google/android/apps/iosched/ui/widget/DashboardLayout.java

Yep - that works perfectly for me. Thanks all.

Hey, how to make the white space left for content items smaller, other words, make the content items as large as they can. The same question raised on stackoverflow but seems still not find a solution. http://stackoverflow.com/questions/5690144/how-can-i-force-a-gridview-to-use-the-whole-screen-regardless-of-display-size

After scanning through many resources, this got me through the learning curve of building a custom layout. Thanks!

New web address of the layout:

http://code.google.com/p/iosched/source/browse/android/src/com/google/android/apps/iosched/ui/widget/DashboardLayout.java?r=27a82ff10b436da5914a3961df245ff8f66b6252

Or if you prefer, I have forked and updated the code according to the one in the google repo in this gist:

https://gist.github.com/4564146

this line of code contains a little typo
final int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.AT_MOST);
and should be changed to:
final int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec), MeasureSpec.AT_MOST);

thanks alot

thanks alot

Original link is dead, you can still find it here:
https://github.com/google/iosched/blob/27a82ff10b436da5914a3961df245ff8f66b6252/android/src/com/google/android/apps/iosched/ui/widget/DashboardLayout.java