Skip to content

@romannurik /DashboardLayout.java
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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;
}
}
}
@destil

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?

@wangpeng1

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

@destil

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

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?

@ccomeaux

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.

@destil

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

@destil

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

Yep - that works perfectly for me. Thanks all.

@cricket

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

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

@jsyeo

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

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

thanks alot

@kamanzi75

thanks alot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.