GridLayout going out of bounds

Question

I am trying to reproduce this calculator layout with the GridLayout

but this is what I get with the code I tried.

In fact on the device it gets even worse, it cuts even more the last equal button that must span across two rows.

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#000000"
    android:columnCount="5"
    android:rowCount="2"
    android:orientation="horizontal"
    android:padding="5dp">

    <Button
        android:layout_columnSpan="1"
        android:layout_rowSpan="1"
        android:text="1" />

    <Button
        android:layout_columnSpan="1"
        android:layout_rowSpan="1"
        android:text="2" />

    <Button
        android:layout_columnSpan="1"
        android:layout_rowSpan="1"
        android:text="3" />

    <Button
        android:layout_columnSpan="1"
        android:layout_rowSpan="1"
        android:text="-" />

    <Button
        android:layout_columnSpan="1"
        android:layout_rowSpan="2"
        android:layout_gravity="fill_vertical"
        android:text="=" />


    <Button
        android:layout_columnSpan="2"
        android:layout_rowSpan="1"
        android:layout_gravity="fill_horizontal"
        android:text="0" />

    <Button
        android:layout_columnSpan="1"
        android:layout_rowSpan="1"
        android:text="." />

    <Button
        android:layout_columnSpan="1"
        android:layout_rowSpan="1"
        android:text="+" />

    <Space
        android:layout_columnSpan="1"
        android:layout_rowSpan="1"
        android:text="-" />

    <Space
        android:layout_columnSpan="1"
        android:layout_rowSpan="1"
        android:text="=" />

</GridLayout>

yet, it keeps going out of bounds. I tried to change to "android.support.v7.widget.GridLayout" according to this thread:

GridLayout column is going beyond its bounds

but did not help much.

Any clues how to make it match the phone size precisely?

Answer 1

Change the view to android.support.v7.widget.GridLayout. And also add app:layout_columnWeight to each view and set the layout_width to 0dp. The Space view is not needed.

(Tested with Genymotion/VM Nexus Android 5.0 and Nexus 9 with Android 6.0.1)

This is the end result:

<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#fff"
    app:columnCount="5"
    app:rowCount="2"
    app:orientation="horizontal"
    android:padding="5dp">

    <Button
        app:layout_columnWeight="1"
        android:layout_width="0dp"
        app:layout_columnSpan="1"
        app:layout_rowSpan="1"
        android:text="1" />

    <Button
        app:layout_columnWeight="1"
        android:layout_width="0dp"
        app:layout_columnSpan="1"
        app:layout_rowSpan="1"
        android:text="2" />

    <Button
        app:layout_columnWeight="1"
        android:layout_width="0dp"
        app:layout_columnSpan="1"
        app:layout_rowSpan="1"
        android:text="3" />

    <Button
        app:layout_columnWeight="1"
        android:layout_width="0dp"
        app:layout_columnSpan="1"
        app:layout_rowSpan="1"
        android:text="-" />

    <Button
        app:layout_columnWeight="1"
        android:layout_width="0dp"
        app:layout_columnSpan="1"
        app:layout_rowSpan="2"
        app:layout_gravity="fill_vertical"
        android:text="=" />


    <Button
        app:layout_columnWeight="1"
        android:layout_width="0dp"
        app:layout_columnSpan="2"
        app:layout_rowSpan="1"
        app:layout_gravity="fill_horizontal"
        android:text="0" />

    <Button
        app:layout_columnWeight="1"
        android:layout_width="0dp"
        app:layout_columnSpan="1"
        app:layout_rowSpan="1"
        android:text="." />

    <Button
        app:layout_columnWeight="1"
        android:layout_width="0dp"
        app:layout_columnSpan="1"
        app:layout_rowSpan="1"
        android:text="+" />

</android.support.v7.widget.GridLayout>