How to understand GridLayout in Android?

Question

I am trying GridLayout to create a layout in android with Android Studio 1.5. The initial xml file is as follows:

<?xml version="1.0" encoding="utf-8"?>
<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"
    >

    <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" />


    <TextView
        android:text="@string/new_name"
        android:layout_gravity="right"
        android:layout_row="2"
        android:layout_column="0"
        />

    <EditText
        android:ems="6"
        android:singleLine="true"
        android:inputType="textCapWords"
        android:id="@+id/new_name"
        android:layout_row="2"
        android:layout_column="1" />

    <ImageButton
        android:src="@mipmap/ic_backspace_black_24dp"
        android:id="@+id/clear_line"
        android:layout_row="2"
        android:layout_column="8"
        />

    <Button
        android:text="Search"
        android:id="@+id/new_search"
        android:background="@color/colorPrimaryDark"
        android:layout_column="9"
        android:layout_row="2" />


    <TextView
        android:text="@string/new_label"
        android:layout_gravity="right"
        android:layout_row="3"
        android:layout_column="0" />



    <EditText
        android:ems="6"
        android:singleLine="true"
        android:inputType="textCapWords"
        android:id="@+id/new_label"
        android:layout_row="3"
        android:layout_column="1" />

    ______

    <TextView
        android:layout_column="0"
        android:text="Row3"
        android:layout_gravity="right"
        />

    <EditText
        android:ems="7"
        android:singleLine="true"
        android:id="@+id/Row3"
        android:inputType="numberDecimal"
        android:layout_row="4"
        android:layout_column="1" />

    <TextView
        android:layout_column="0"
        android:text="Row4"
        android:layout_gravity="right"
        android:layout_row="5" />

    <EditText
        android:ems="7"
        android:singleLine="true"
        android:id="@+id/Row5"
        android:inputType="number"
        android:layout_row="5"
        android:layout_column="1" />



    <Space
        android:layout_row="4"
        android:layout_column="0"
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        />

    <Button
        android:text="Cancel"
        android:id="@+id/new_cancel"
        android:background="@color/colorPrimaryDark"
        android:layout_row="10"
        android:layout_column="0"
        />
    <Button
        android:text="Ok"
        android:id="@+id/new_ok"
        android:background="@color/colorPrimaryLight"
        android:layout_row="10"
        android:layout_column="9"
        />
</GridLayout>

which, in the preview, renders like follows:

1. 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?

2. I change the layout for the first input box as follows:

<EditText
    android:singleLine="true"
    android:inputType="textCapWords"
    android:id="@+id/new_name"
    android:columnCount="4"
    android:layout_row="2"
    android:layout_column="1"
/>

which makes the actual input box very small, although I have specified columnCount="4". This property does not seem to have any impact here:

3. I revert this change and try to adjust the size of the backspace image as follows:

<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
    />

But it does not change the size of the backspace image. I also can set the numbers into paranthesis, which triggers an error:

`Cannot resolve symbol '4'`

Every other number can put in parantheses, but not here?

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 ImageButton doc but could not find any logic attribute, like 'size'...!

Answer 1

In your case, i can't see a reason for using a GridLayout, anyway here are the answers to your questions:

1# - In your phone, you see that the backspace overlaps with the 'Name' EditText, because there isn't enough width to draw the 4 Views one beside the other.

---

2# - There is no need for android:columnCount attribute:

The maxmimum number of columns to create when automatically positioning children.

This is why it did nothing.

---

3# - When you've tried this code:

<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/>

You get Cannot resolve symbol '4' error because:

• 1) 4 must be between two ".
• 2) You must specify the unit ( dp, px, sp...).

This is how it should be:

<ImageButton
        android:src="@mipmap/ic_backspace_black_24dp"
        android:id="@+id/clear_line"
        android:layout_row="2"
        android:layout_column="8"
        android:minHeight="15dp"
        android:minWidth="15dp"
        android:maxHeight="15dp"
        android:maxWidth="15dp"/> <!-- i used 15dp instead of 4dp because 4dp is too small -->

---

4# - To change the size of a View ( Button in your case ) you can use android:layout_width and android:layout_height attributes:

<ImageButton
    android:layout_width="12dp"
    android:layout_height="12dp"
    android:src="@mipmap/ic_backspace_black_24dp"
    android:id="@+id/clear_line"
    android:layout_row="2"
    android:layout_column="8"/>