title: How to understand GridLayout in Android?
body: <p>I am trying <code>GridLayout</code> to create a layout in android with Android Studio 1.5. The initial xml file is as follows: </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;GridLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:useDefaultMargins="true"
      android:alignmentMode="alignBounds"
      android:columnOrderPreserved="false"
      android:columnCount="10"
      android:background="#cccccc"
      &gt;
  
      &lt;TextView
          android:text="Title"
          android:textSize="32dip"
          android:layout_columnSpan="10"
          android:layout_gravity="center_horizontal"
          android:id="@+id/textView1"
          android:layout_row="0"
          android:layout_column="0" /&gt;
  
  
      &lt;TextView
          android:text="@string/new_name"
          android:layout_gravity="right"
          android:layout_row="2"
          android:layout_column="0"
          /&gt;
  
      &lt;EditText
          android:ems="6"
          android:singleLine="true"
          android:inputType="textCapWords"
          android:id="@+id/new_name"
          android:layout_row="2"
          android:layout_column="1" /&gt;
  
      &lt;ImageButton
          android:src="@mipmap/ic_backspace_black_24dp"
          android:id="@+id/clear_line"
          android:layout_row="2"
          android:layout_column="8"
          /&gt;
  
      &lt;Button
          android:text="Search"
          android:id="@+id/new_search"
          android:background="@color/colorPrimaryDark"
          android:layout_column="9"
          android:layout_row="2" /&gt;
  
  
      &lt;TextView
          android:text="@string/new_label"
          android:layout_gravity="right"
          android:layout_row="3"
          android:layout_column="0" /&gt;
  
  
  
      &lt;EditText
          android:ems="6"
          android:singleLine="true"
          android:inputType="textCapWords"
          android:id="@+id/new_label"
          android:layout_row="3"
          android:layout_column="1" /&gt;
  
      ______
  
      &lt;TextView
          android:layout_column="0"
          android:text="Row3"
          android:layout_gravity="right"
          /&gt;
  
      &lt;EditText
          android:ems="7"
          android:singleLine="true"
          android:id="@+id/Row3"
          android:inputType="numberDecimal"
          android:layout_row="4"
          android:layout_column="1" /&gt;
  
      &lt;TextView
          android:layout_column="0"
          android:text="Row4"
          android:layout_gravity="right"
          android:layout_row="5" /&gt;
  
      &lt;EditText
          android:ems="7"
          android:singleLine="true"
          android:id="@+id/Row5"
          android:inputType="number"
          android:layout_row="5"
          android:layout_column="1" /&gt;
  
  
  
      &lt;Space
          android:layout_row="4"
          android:layout_column="0"
          android:layout_columnSpan="3"
          android:layout_gravity="fill"
          /&gt;
  
      &lt;Button
          android:text="Cancel"
          android:id="@+id/new_cancel"
          android:background="@color/colorPrimaryDark"
          android:layout_row="10"
          android:layout_column="0"
          /&gt;
      &lt;Button
          android:text="Ok"
          android:id="@+id/new_ok"
          android:background="@color/colorPrimaryLight"
          android:layout_row="10"
          android:layout_column="9"
          /&gt;
  &lt;/GridLayout&gt;
  </code></pre>
  
  <p>which, in the preview, renders like follows: </p>
  
  <p><a href="https://i.stack.imgur.com/KC8qL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KC8qL.png" alt="enter image description here"></a></p>
  
  <ol>
  <li><p>However, on my phone I see that the backspace overlaps somewhat with the text input box for 'Name'. Is this a problem with my phone or with Android Studio?</p></li>
  <li><p>I change the layout for the first input box as follows:</p></li>
  </ol>
  
  <blockquote>
  <pre><code>&lt;EditText
      android:singleLine="true"
      android:inputType="textCapWords"
      android:id="@+id/new_name"
      android:columnCount="4"
      android:layout_row="2"
      android:layout_column="1"
  /&gt;
  </code></pre>
  </blockquote>
  
  <p>which makes the actual input box very small, although I have specified <code>columnCount="4"</code>. This property does not seem to have any impact here: </p>
  
  <p><a href="https://i.stack.imgur.com/Ihe6h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ihe6h.png" alt="enter image description here"></a></p>
  
  <ol start="3">
  <li>I revert this change and try to adjust the size of the backspace image as follows:</li>
  </ol>
  
  <blockquote>
  <pre><code>&lt;ImageButton
      android:src="@mipmap/ic_backspace_black_24dp"
      android:id="@+id/clear_line"
      android:layout_row="2"
      android:layout_column="8"
      android:minHeight=4
      android:minWidth=4
      android:maxHeight=4
      android:maxWidth=4
      /&gt;
  </code></pre>
  </blockquote>
  
  <p>But it does not change the size of the backspace image. I also can set the numbers into paranthesis, which triggers an error: </p>
  
  <pre><code>`Cannot resolve symbol '4'`
  </code></pre>
  
  <p>Every other number can put in parantheses, but not here? </p>
  
  <p>Is there any logic to that? Or did the people switched off logic while creating the android framework? Can someone explain me the thing with the parantheses? And how to change the size of the backspace image? I looked at the <a href="http://developer.android.com/intl/es/reference/android/widget/ImageButton.html" rel="nofollow noreferrer">ImageButton doc</a> but could not find any logic attribute, like 'size'...!</p>