GridLayout collapses on small display

Question

I have LinearLayout with TextView, GridLayout and another TextView. It is displayed correctly on many modern phones and tablets but it utterly fails on small display like Nexus S. See following pictures.

I tried to decrease font size, remove 9-patch background and even remove all margins. I could see just digit7 when there were some margins. Then I minimized them and I can see four lines with their first button that is rendered twice as big as display. I do not understand why, it shall have wrap_content width.

I tried to minimize the code and reduced it to GridLayout with single row and it still does not fit the width of the screen.

What's going on there?

Update:

• 420x800 mdpi works
• 420x800 hdpi is broken
• 540x920 hdpi works
• 720x1280 hdpi works

Update 2:

Nexus 5x has same issues when font is 38sp or bigger. It is interesting that Studio's designer shows correct layout but both device/emulator shows corrupted view and following error:

D/android.support.v7.widget.GridLayout: vertical constraints: y1-y0>=197, y2-y1>=197, y3-y2>=197, y4-y3>=197, y4-y0<=785 are inconsistent; permanently removing: y4-y0<=785. 

calc.xml:

<LinearLayout
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,+ -->

    <Button
        android:id="@+id/digit7"
        android:text="7"
        style="@style/KeypadLeftButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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="wrap_content"
        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="wrap_content"
        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="wrap_content"
        app:layout_rowWeight="0.5"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText" />

    <!--row with 4-6, - -->

    <Button
        android:id="@+id/digit4"
        android:text="4"
        style="@style/KeypadLeftButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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="wrap_content"
        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="wrap_content"
        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="wrap_content"
        app:layout_rowWeight="0.5"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText" />

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

    <Button
        android:id="@+id/digit1"
        android:text="1"
        style="@style/KeypadLeftButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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="wrap_content"
        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="wrap_content"
        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="wrap_content"
        app:layout_rowWeight="0.5"
        app:layout_columnWeight="1"
        tools:ignore="HardcodedText" />

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

    <Button
        android:id="@+id/digit0"
        android:text="0"
        style="@style/KeypadLeftButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_columnWeight="1"
        app:layout_gravity="fill_horizontal"
        app:layout_rowWeight="1"
        tools:ignore="HardcodedText"  />

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

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

<!--row with button submit -->

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

styles:

<style name="Formula">
    <item name="android:textSize">@dimen/calc_button_text</item>
    <item name="android:textColor">@color/gray_35</item>
    <item name="android:gravity">center</item>
    <item name="android:background">@drawable/lcd</item>
    <item name="android:layout_marginTop">@dimen/calc_big_margin</item>
    <item name="android:layout_marginBottom">@dimen/calc_superbig_margin</item>
    <item name="android:layout_marginLeft">@dimen/calc_big_margin</item>
    <item name="android:layout_marginRight">@dimen/calc_big_margin</item>
</style>

<style name="KeypadButton" parent="@style/Widget.AppCompat.Button">
    <item name="android:textSize">@dimen/calc_button_text</item>
    <item name="android:textColor">@color/white</item>
    <!--<item name="android:background">@drawable/tl_2</item>-->
    <item name="android:layout_marginLeft">@dimen/calc_small_margin</item>
    <item name="android:layout_marginBottom">@dimen/calc_small_margin</item>
</style>

<style name="KeypadLeftButton" parent="@style/KeypadButton">
    <item name="android:layout_marginLeft">@dimen/calc_big_margin</item>
</style>

<style name="KeypadRightButton" parent="@style/KeypadButton">
    <item name="android:layout_marginRight">@dimen/calc_big_margin</item>
</style>

<style name="KeypadNextButton" parent="@style/Widget.AppCompat.Button.Colored">
    <item name="android:background">@drawable/tl_next</item>
    <item name="android:textSize">@dimen/calc_button_text</item>
    <item name="android:layout_marginTop">@dimen/calc_big_margin</item>
    <item name="android:layout_marginBottom">@dimen/calc_big_margin</item>
    <item name="android:layout_marginLeft">@dimen/calc_big_margin</item>
    <item name="android:layout_marginRight">@dimen/calc_big_margin</item>
</style>

dimens:

<dimen name="calc_button_text">14sp</dimen>
<dimen name="calc_superbig_margin">2dp</dimen>
<dimen name="calc_big_margin">1dp</dimen>
<dimen name="calc_small_margin">0dp</dimen>

Update 16th feb

Manjunath Prabhakar said that the trouble may be related to weights. So I tried to remove all weight attributes and the layout makes more sense now. I have not fixed it yet though. I would consider rewriting the layout to nested LinearLayouts as a step back therefore I make bounty open for other suggestions.

Answer 1

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

Samsung galaxy core plus (older)

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.

Answer 2

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!