public
Last active

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

  • Download Gist
DashboardLayout.java
Java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180
/*
* 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:

<?xml version="1.0" encoding="utf-8"?>
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:gravity="center_horizontal" android:orientation="vertical">
android:id="@+id/actionbar" style="@style/ActionBar" />
android:layout_height="wrap_content" android:orientation="horizontal"
android:background="@drawable/gradient_box" android:paddingLeft="10dp"
android:paddingRight="10dp" android:paddingTop="1dp"
android:paddingBottom="1dp" android:gravity="center_vertical"
android:id="@+id/MyDetailsBar">
android:layout_marginRight="15dp" android:id="@+id/UserImage"
android:layout_width="50dp" android:layout_height="50dp"
android:scaleType="centerInside" />
android:layout_height="wrap_content" android:gravity="center_vertical"
android:orientation="vertical">
android:id="@+id/Name" android:textAppearance="?android:attr/textAppearanceSmall"
android:textStyle="bold" android:singleLine="true" />
android:textAppearance="?android:attr/textAppearanceSmall"
android:singleLine="true" />


android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="@drawable/gradient_box" android:layout_weight="1">
android:text="@string/bond" android:drawableTop="@drawable/bond_button" />
android:text="@string/invite" android:drawableTop="@drawable/invite_button" />
android:text="@string/live_contacts" android:drawableTop="@drawable/livecontacts_button"
android:textStyle="bold" />
android:text="@string/my_details" android:drawableTop="@drawable/mydetails_button"
android:textStyle="bold" />

android:layout_height="@dimen/actionbar_height" android:gravity="center"
android:orientation="horizontal" android:background="@drawable/darkgradient_box"
android:padding="10dp" android:id="@+id/FeedBar">

android:visibility="gone" android:gravity="center"
android:layout_marginLeft="10dp">


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?

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!

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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.