title: Heterogeneous GridLayout
body: <p>I am trying to implement the layout below:</p>
  <p><img src="https://i.stack.imgur.com/K9WPT.jpg" alt="Target Layout" /></p>
  <p>I guess <a href="http://developer.android.com/reference/android/widget/GridLayout.html" rel="nofollow noreferrer">GridLayout</a> is suitable for my needs but after 2 hours of struggle I couldn't create even a similar layout.. The layout is <strong>resizing itself wrongly</strong>, it <strong>exceeds the screen</strong> of the phone and it also <strong>does not span</strong> the specified rows and columns.</p>
  <p>Here I selected a button so you can see how it exceeds the boundaries:</p>
  <p><img src="https://i.stack.imgur.com/Lsyrk.jpg" alt="Fail" /></p>
  <p>and here is the associated xml code: <a href="https://gist.github.com/2834492" rel="nofollow noreferrer">https://gist.github.com/2834492</a></p>
  <p>I have reached a similar layout with nested linearlayouts but it's not possible to <strong>properly resize</strong> it for different screen sizes.</p>
  <hr />
  <p><strong>UPDATE - approximate LinearLayout implementation:</strong></p>
  <p>The XML code: <a href="https://gist.github.com/cdoger/2835887" rel="nofollow noreferrer">https://gist.github.com/cdoger/2835887</a>
  However, the problem is it does not resize itself properly here some screenshots with different screen configurations:</p>
  <p><a href="https://i.stack.imgur.com/F7Oix.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F7Oix.jpg" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/XBAVr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XBAVr.jpg" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/nKJOm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nKJOm.jpg" alt="enter image description here" /></a></p>
  <hr />
  <p><strong>TLDR:</strong> <em>Can someone show me a heterogeneous layout implementation with GridLayout like in the first picture?</em></p>