Heterogeneous GridLayout

Question

I am trying to implement the layout below:

I guess GridLayout is suitable for my needs but after 2 hours of struggle I couldn't create even a similar layout.. The layout is resizing itself wrongly, it exceeds the screen of the phone and it also does not span the specified rows and columns.

Here I selected a button so you can see how it exceeds the boundaries:

and here is the associated xml code: https://gist.github.com/2834492

I have reached a similar layout with nested linearlayouts but it's not possible to properly resize it for different screen sizes.

---

UPDATE - approximate LinearLayout implementation:

The XML code: https://gist.github.com/cdoger/2835887 However, the problem is it does not resize itself properly here some screenshots with different screen configurations:

---

TLDR: Can someone show me a heterogeneous layout implementation with GridLayout like in the first picture?

Answer 1

I read this thread and realised that I wanted a flatter solution than those with linear layout. After some research I ended up making my own layout. It is inspired by a GridLayout but differs a bit.

Please note that if you are going to copy-paste the code you'll need to change package names in some places.

This layout has 4 layout parameters that children use to position themselves.These are layout_left, layout_top, layout_right, layout_bottom. The ICGridLayout itself has two attributes: layout_spacing and columns.

Columns tells the layout how many columns you want it to contain. It will then calculate the size of a cell with the same height as width. Which will be the layouts width/columns.

The spacing is the amount of space you want between each child.

The layout_left|top|right|bottom attributes are the coordinates for each side. The layout does no calculations in order to avoid collision or anything. It just puts the children where they want to be.

If you'd like to have smaller squares you just have to increase the columns attribute.

Keep in mind that this is a quick prototype, I will continue working on it and when I feel that it's ready I'll upload it to Github and put a comment here.

All of my code below should produce the following result:

*****EDIT***** Added the call to measure for the children, forgot that the first time around. END EDIT ICGridLayout.java:

package com.risch.evertsson.iclib.layout;  import android.content.Context; import android.content.res.TypedArray; import android.util.AttributeSet; import android.view.View; import android.view.ViewGroup;  import com.risch.evertsson.iclib.R;  /**  * Created by johanrisch on 6/13/13.  */ public class ICGridLayout extends ViewGroup {     private int mColumns = 4;     private float mSpacing;      public ICGridLayout(Context context) {         super(context);     }      public ICGridLayout(Context context, AttributeSet attrs) {         super(context, attrs);         init(attrs);     }      public ICGridLayout(Context context, AttributeSet attrs, int defStyle) {         super(context, attrs, defStyle);         init(attrs);     }      private void init(AttributeSet attrs) {         TypedArray a = getContext().obtainStyledAttributes(                 attrs,                 R.styleable.ICGridLayout_Layout);         this.mColumns = a.getInt(R.styleable.ICGridLayout_Layout_columns, 3);         this.mSpacing = a.getDimension(R.styleable.ICGridLayout_Layout_layout_spacing, 0);         a.recycle();     }      @Override     protected void onLayout(boolean changed, int l, int t, int r, int b) {         if (changed) {             int width = (int) (r - l);             int side = width / mColumns;             int children = getChildCount();             View child = null;             for (int i = 0; i < children; i++) {                 child = getChildAt(i);                 LayoutParams lp = (LayoutParams) child.getLayoutParams();                 int left = (int) (lp.left * side + mSpacing / 2);                 int right = (int) (lp.right * side - mSpacing / 2);                 int top = (int) (lp.top * side + mSpacing / 2);                 int bottom = (int) (lp.bottom * side - mSpacing / 2);                 child.layout(left, top, right, bottom);             }         }     }      @Override     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {         measureVertical(widthMeasureSpec, heightMeasureSpec);      }      private void measureVertical(int widthMeasureSpec, int heightMeasureSpec) {         int widthMode = MeasureSpec.getMode(widthMeasureSpec);         int heightMode = MeasureSpec.getMode(heightMeasureSpec);         int width = 0;         int height = 0;           if (widthMode == MeasureSpec.AT_MOST || widthMode == MeasureSpec.EXACTLY) {             width = MeasureSpec.getSize(widthMeasureSpec);         } else {             throw new RuntimeException("widthMeasureSpec must be AT_MOST or " +                     "EXACTLY not UNSPECIFIED when orientation == VERTICAL");         }           View child = null;         int row = 0;         int side = width / mColumns;         int childCount = getChildCount();         for (int i = 0; i < childCount; i++) {             child = getChildAt(i);              LayoutParams lp = (LayoutParams) child.getLayoutParams();              if (lp.bottom > row) {                 row = lp.bottom;             }                int childHeight = (lp.bottom - lp.top)*side;             int childWidth = (lp.right-lp.left)*side;             int heightSpec = MeasureSpec.makeMeasureSpec(childHeight, LayoutParams.MATCH_PARENT);             int widthSpec = MeasureSpec.makeMeasureSpec(childWidth, LayoutParams.MATCH_PARENT);              child.measure(widthSpec, heightSpec);         }         height = row * side;         // TODO: Figure out a good way to use the heightMeasureSpec...          setMeasuredDimension(width, height);     }      @Override     public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {         return new ICGridLayout.LayoutParams(getContext(), attrs);     }      @Override     protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {         return p instanceof ICGridLayout.LayoutParams;     }      @Override     protected ViewGroup.LayoutParams             generateLayoutParams(ViewGroup.LayoutParams p) {         return new ICGridLayout.LayoutParams(p);     }      @Override     protected ViewGroup.LayoutParams generateDefaultLayoutParams() {         return new LayoutParams();     }      public static class LayoutParams extends ViewGroup.MarginLayoutParams {         int right = 1;         int bottom = 1;         int top = 0;         int left = 0;         int width = -1;         int height = -1;          public LayoutParams() {             super(MATCH_PARENT, MATCH_PARENT);             top = 0;             left = 1;         }          public LayoutParams(int width, int height) {             super(width, height);             top = 0;             left = 1;         }          public LayoutParams(Context context, AttributeSet attrs) {             super(context, attrs);             TypedArray a = context.obtainStyledAttributes(                     attrs,                     R.styleable.ICGridLayout_Layout);             left = a.getInt(R.styleable.ICGridLayout_Layout_layout_left, 0);             top = a.getInt(R.styleable.ICGridLayout_Layout_layout_top, 0);             right = a.getInt(R.styleable.ICGridLayout_Layout_layout_right, left + 1);             bottom = a.getInt(R.styleable.ICGridLayout_Layout_layout_bottom, top + 1);             height = a.getInt(R.styleable.ICGridLayout_Layout_layout_row_span, -1);             width = a.getInt(R.styleable.ICGridLayout_Layout_layout_col_span, -1);             if (height != -1) {                 bottom = top + height;             }             if (width != -1) {                 right = left + width;             }              a.recycle();         }          public LayoutParams(ViewGroup.LayoutParams params) {             super(params);         }      }  } 

ICGridLayout.java is pretty straight forward. It takes the values provided by the children and lays them out. attrs.xml:

<?xml version="1.0" encoding="utf-8"?> <resources>     <declare-styleable name="ICGridLayout_Layout">         <attr name="columns" format="integer"/>         <attr name="layout_left" format="integer"/>         <attr name="layout_top" format="integer"/>         <attr name="layout_right" format="integer"/>         <attr name="layout_bottom" format="integer"/>         <attr name="layout_col_span" format="integer"/>         <attr name="layout_row_span" format="integer"/>         <attr name="layout_spacing" format="dimension"/>     </declare-styleable>  </resources> 

example_layout.xml:

<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res/com.rischit.projectlogger"     android:id="@+id/scroller"     android:layout_width="match_parent"     android:layout_height="match_parent" >      <com.risch.evertsson.iclib.layout.ICGridLayout         android:id="@+id/ICGridLayout1"         android:layout_width="match_parent"         android:layout_height="match_parent"         app:layout_spacing="4dp"         app:columns="4" >           <TextView             android:id="@+id/textView1"             android:layout_width="match_parent"             android:layout_height="match_parent"             app:layout_bottom="1"             app:layout_left="0"             app:layout_right="4"             app:layout_top="0"             android:background="#ff0000"             android:text="TextView" />          <TextView             android:id="@+id/textView1"             android:layout_width="match_parent"             android:layout_height="match_parent"             app:layout_bottom="3"             app:layout_left="3"             app:layout_right="4"             app:layout_top="1"             android:background="#00ff00"             android:text="TextView" />          <TextView             android:id="@+id/textView1"             android:layout_width="match_parent"             android:layout_height="match_parent"             app:layout_bottom="4"             app:layout_left="0"             app:layout_right="3"             app:layout_top="1"             android:background="#0000ff"             android:text="TextView" />          <TextView             android:id="@+id/textView1"             android:layout_width="match_parent"             android:layout_height="match_parent"             app:layout_bottom="4"             app:layout_left="3"             app:layout_right="4"             app:layout_top="3"             android:background="#ffff00"             android:text="TextView" />          <TextView             android:id="@+id/textView1"             android:layout_width="match_parent"             android:layout_height="match_parent"             app:layout_bottom="6"             app:layout_left="0"             app:layout_right="1"             app:layout_top="4"             android:background="#ff00ff"             android:text="TextView" />          <TextView             android:id="@+id/textView1"             android:layout_width="match_parent"             android:layout_height="match_parent"             app:layout_bottom="6"             app:layout_left="1"             app:layout_right="4"             app:layout_top="4"             android:background="#ffffff"             android:text="TextView" />     </com.risch.evertsson.iclib.layout.ICGridLayout>  </ScrollView> 

-- Johan Risch

P.S This is my first long answer, I've tried to do it in a correct way. If I've failed please tell me without flaming :) D.S

Answer 2

The issue you are facing is due to inappropriate use of the GridLayout. The GridLayout is made to show its children in a grid and you are trying to override that without extending the GridLayout. While what you want may be accomplished in code (utilizing numcolumns and columnsize), it will not be useful for multiple screen sizes without a heck of a lot of code.

The only adequate solution that won't require a ton of hacking is judicious use of both LinearLayout and RelativeLayout. LinearLayout should not be used exclusively as it is made to drop items in a line (horizontally or vertically only). This becomes especially apparent when you try and do the bottom four buttons. While the buttons above may be done with LinearLayout with very little effort, RelativeLayout is what you need for the bottom four buttons.

Note: RelativeLayout can be a little bit tricksy for those with little experience using them. Some pitfalls include: children overlapping, children moving off the screen, height and width rendering improperly applied. If you would like an example, let me know and I will edit my answer.

Final Note: I'm all for utilizing the current framework objects in unique ways, and genuinely prefer to provide the requested solution. The solution, however, is not viable given the constraints of the question.

(Revision) Solution 1

After some careful thought last night, this may be accomplished with a pure LinearLayout. While I do not like this solution, it should be multi-screen friendly and requires no tooling around from me. Caution should be used with too many LinearLayouts, as according to Google's developers, it can result in slow loading UIs due to the layout_weight property. A second solution utilizing RelativeLayout will be provided when I return home. Now Tested This provides the desired layout parameters on all screen-sizes and orientations.

<?xml version="1.0" encoding="utf-8"?>  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:orientation="vertical" >      <LinearLayout         android:layout_width="match_parent"         android:layout_height="0dp"         android:layout_weight="1"         android:orientation="vertical">         <LinearLayout              android:layout_width="match_parent"              android:layout_height="0dp"              android:layout_weight="1"              android:orientation="horizontal">              <Button                  android:id="@+id/Button01"                  android:layout_width="0"                  android:layout_height="match_parent"                  android:layout_weight="1"                  android:text="Button" />                  <Button                  android:id="@+id/Button02"                  android:layout_width="0"                  android:layout_height="match_parent"                  android:layout_weight="1"                  android:text="Button" />              </LinearLayout>          <Button              android:id="@+id/button3"              android:layout_width="match_parent"              android:layout_height="0dp"             android:layout_weight="1"              android:text="Button" />            <LinearLayout              android:layout_width="match_parent"              android:layout_height="0dp"              android:layout_weight="1.00"             android:orientation="horizontal">               <Button                  android:id="@+id/button1"                  android:layout_width="0dp"                  android:layout_height="match_parent"                  android:layout_weight="1"                  android:text="Button" />                <Button                  android:id="@+id/button2"                  android:layout_width="0dp"                  android:layout_height="match_parent"                  android:layout_weight="1"                  android:text="Button" />              </LinearLayout>     </LinearLayout>         <LinearLayout          android:layout_width="match_parent"          android:layout_height="0dp"          android:layout_weight="1"          android:orientation="horizontal">              <LinearLayout              android:layout_width="0dp"              android:layout_height="match_parent"              android:layout_weight="1"              android:orientation="vertical" >                 <Button                  android:id="@+id/button4"                  android:layout_width="match_parent"                  android:layout_height="0dp"                 android:layout_weight="1"                  android:text="Button" />                  <Button                  android:id="@+id/button5"                  android:layout_width="match_parent"                  android:layout_height="0dp"                  android:layout_weight="2"                  android:text="Button" />              </LinearLayout>              <LinearLayout              android:layout_width="0dp"              android:layout_height="match_parent"              android:layout_weight="1"              android:orientation="vertical" >              <Button                  android:id="@+id/button6"                  android:layout_width="match_parent"                  android:layout_height="0dp"                  android:layout_weight="2"                  android:text="Button" />              <Button                  android:id="@+id/button7"                  android:layout_width="match_parent"                  android:layout_height="0dp"                  android:layout_weight="1"                  android:text="Button" />          </LinearLayout>      </LinearLayout>  </LinearLayout>  

Solution 1 Explanation

The key to LinearLayouts is to define your imperatives as separate Layouts and nest the others in them. As you apply constraints to more dimensions, more LinearLayouts must be added to encapsulate the others. For yours, it was crucial to have two more parents in order to maintain the proportion. A great indicator of when you should add another level is when you have to utilize layout_weight using anything other than an integer value. It simply becomes to hard to calculate properly. From there it was relatively simple to break it into columns.

Solution 2 (Failed)

While I was able to achieve desirable results utilizing RelativeLayout and "struts", I could only do so with layouts that were multiples of 2 buttons in height. Such a trick would be awesome as the levels of layout are greatly reduced, so I will work on a pure XML solution and post the answer here if and when I achieve it. In the meantime, the LinearLayout above should suit your needs perfectly.