GridLayout collapses on small display

I guess it is a bug of the support version of GridLayout.

Take a look at this (that is currently Assigned): I think it is related to your question about the Nexus 5X font size behavior. In general, I found a lot of related bugs here (related to GridLayout width measurement).

I will try to give you a workaround.

I'm using com.android.support:gridlayout-v7:25.1.1.

I think you can solve your layout problems (both the alignment in older phones and the font size in Nexus 5X) doing in this way:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--Display row-->
    <TextView
        android:id="@+id/assignment"
        android:text="50 + 40 = 90"
        style="@style/Formula"
        android:focusable="false"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        tools:ignore="HardcodedText" />

    <android.support.v7.widget.GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:columnCount="4"
        app:rowCount="4">

        <!-- row with 7-9,+ -->

        <LinearLayout
            app:layout_gravity="fill_horizontal"
            app:layout_columnSpan="4"
            android:orientation="horizontal"
            app:layout_rowWeight="1">
        <Button
            android:id="@+id/digit7"
            android:text="7"
            style="@style/KeypadLeftButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText"  />

        <Button
            android:id="@+id/digit8"
            android:text="8"
            style="@style/KeypadButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText"  />

        <Button
            android:id="@+id/digit9"
            android:text="9"
            style="@style/KeypadButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText" />

        <Button
            android:id="@+id/buttonPlus"
            android:text="+"
            style="@style/KeypadRightButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            app:layout_rowWeight="0.5"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText" />

        </LinearLayout>

        <!--row with 4-6, - -->
        <LinearLayout
            app:layout_gravity="fill_horizontal"
            app:layout_columnSpan="4"
            android:orientation="horizontal"
            app:layout_rowWeight="1">
        <Button
            android:id="@+id/digit4"
            android:text="4"
            style="@style/KeypadLeftButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText" />

        <Button
            android:id="@+id/digit5"
            android:text="5"
            style="@style/KeypadButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText" />

        <Button
            android:id="@+id/digit6"
            android:text="6"
            style="@style/KeypadButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText"  />

        <Button
            android:id="@+id/buttonMinus"
            android:text="-"
            style="@style/KeypadRightButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            app:layout_rowWeight="0.5"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText" />

        </LinearLayout>
        <!--row with 1-3, * -->

        <LinearLayout
            app:layout_gravity="fill_horizontal"
            app:layout_columnSpan="4"
            android:orientation="horizontal"
            app:layout_rowWeight="1">
        <Button
            android:id="@+id/digit1"
            android:text="1"
            style="@style/KeypadLeftButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText"  />

        <Button
            android:id="@+id/digit2"
            android:text="2"
            style="@style/KeypadButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText"  />

        <Button
            android:id="@+id/digit3"
            android:text="3"
            style="@style/KeypadButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText" />

        <Button
            android:id="@+id/buttonMultiply"
            android:text="\u22C5"
            style="@style/KeypadRightButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            app:layout_rowWeight="0.5"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText" />

        </LinearLayout>
        <!--row with 0, backspace and / -->

        <LinearLayout
            app:layout_gravity="fill_horizontal"
            app:layout_columnSpan="4"
            android:orientation="horizontal"
            app:layout_rowWeight="1"
            android:weightSum="4">
        <Button
            android:id="@+id/digit0"
            android:text="0"
            style="@style/KeypadLeftButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_columnWeight="1"
            app:layout_gravity="fill_horizontal"
            app:layout_rowWeight="1"
            tools:ignore="HardcodedText"
            android:layout_weight="1"/>

        <Button
            android:id="@+id/buttonBackspace"
            android:text="←"
            style="@style/KeypadButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_gravity="fill_vertical"
            app:layout_columnSpan="2"
            app:layout_rowWeight="0.5"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText"
            android:layout_weight="2"/>

        <Button
            android:id="@+id/buttonDivide"
            android:text=":"
            style="@style/KeypadRightButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_rowWeight="0.5"
            app:layout_columnWeight="1"
            tools:ignore="HardcodedText"
            android:layout_weight="1"/>
        </LinearLayout>
    </android.support.v7.widget.GridLayout>

    <!--row with button submit -->

    <Button
        android:id="@+id/buttonSubmit"
        android:text="NEXT"
        style="@style/KeypadNextButton"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        app:layout_gravity="fill_horizontal"/>
</LinearLayout>

Basically, what I did is to wrap each group of buttons (four buttons except the last row) in a LinearLayout.

Here you can see how it looks in two phones:

Nexus 5 Nexus 5 screenshot

Samsung galaxy core plus (older) Galaxy core plus screenshot

As you can see, there is a problem in the alignment of the last row. I think you can try to solve the alignment of these buttons playing around with the properties and attributes. Let me know if you want further improvement in this last topic.

Hope this helps.


There are few limitations and Restrictions when using the GridLayout. Here is the Link to DOCUMENTATION

"GridLayout does not provide support for the principle of weight, as defined in weight. In general, it is not therefore possible to configure a GridLayout to distribute excess space in non-trivial proportions between multiple rows or columns ... For complete control over excess space distribution in a row or column; use a LinearLayout subview to hold the components in the associated cell group."

If i was you, i would used Linear layout or Table layout.

Hope this helps!