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

So here is the solution I promised after one year =) It basically uses the ViewTreeObserver to get the dimensions of the parent layout and create custom views accordingly. Since this code is one year old ViewTreeObserver might not be the best way to get the dimensions dynamically.

You can find the full source code here: https://github.com/cdoger/Android_layout

I divided the screen into 8 equal widths and 6 equal heights. Here is a snapshot of how I laid out the views:

final RelativeLayout mainLayout = (RelativeLayout) findViewById(R.id.main_layout);
ViewTreeObserver vto = mainLayout.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        final int oneUnitWidth = mainLayout.getMeasuredWidth() / 8;
        final int oneUnitHeight = mainLayout.getMeasuredHeight() / 6;
        /**
         * 1
         ***************************************************************/
        final RelativeLayout.LayoutParams otelParams = new RelativeLayout.LayoutParams(
                oneUnitWidth * 4, oneUnitHeight);
        otelParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        otelParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
        // otelParams.setMargins(0, 0, 2, 0);
        View1.setLayoutParams(otelParams);
        /***************************************************************/

        /**
         * 2
         ***************************************************************/
        final RelativeLayout.LayoutParams otherParams = new RelativeLayout.LayoutParams(
                oneUnitWidth * 4, oneUnitHeight);
        otherParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        otherParams.addRule(RelativeLayout.RIGHT_OF, View1.getId());
        otherParams.setMargins(2, 0, 0, 0);
        View2.setLayoutParams(otherParams);
        /***************************************************************/
//... goes on like this

Here is the final screenshot: