Skip to content

Instantly share code, notes, and snippets.

@romannurik
Created March 23, 2011 05:06
Show Gist options
  • Star 74 You must be signed in to star a gist
  • Fork 23 You must be signed in to fork a gist
  • Save romannurik/882650 to your computer and use it in GitHub Desktop.
Save romannurik/882650 to your computer and use it in GitHub Desktop.
A custom Android layout class that arranges children in a grid-like manner, optimizing for even horizontal and vertical whitespace.
/*
* 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;
}
}
}
@davidvavra
Copy link

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?

@wangpeng1
Copy link

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

@davidvavra
Copy link

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.

@ccomeaux
Copy link

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?

@romannurik
Copy link
Author

@ccomeaux
Copy link

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.

@davidvavra
Copy link

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

@davidvavra
Copy link

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

@ccomeaux
Copy link

Yep - that works perfectly for me. Thanks all.

@cricket
Copy link

cricket commented May 27, 2011

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

@SingleShot
Copy link

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

@jsyeo
Copy link

jsyeo commented Jan 18, 2013

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

@intrueder
Copy link

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);

@kamanzi75
Copy link

thanks alot

@kamanzi75
Copy link

thanks alot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment