Menu
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:
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.
854
GridLayout is also not deprecated.
GridView simply gives us a two-dimensional view to display the items on the screen, under ViewGroup. On the other hand, GridLayout is a layout manager that arranges the views in a grid.
When you add item to grid layout, depend on Column count Grid layout will start to scroll.
android.widget.GridLayout. A layout that places its children in a rectangular grid. The grid is composed of a set of infinitely thin lines that separate the viewing area into cells. Throughout the API, grid lines are referenced by grid indices.
The GridLayout is used to arrange the components in rectangular grid. One component is displayed in each rectangle. GridLayout (): creates a grid layout with one column per component in a row.
This example demonstrates how How to make a GridLayout fit screen size in Android. Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main.xml. Step 3 − Add the following code to src/MainActivity.java
A grid layout consists of a parent element, with one or more child elements. An HTML element becomes a grid container when its display property is set to grid or inline-grid. All direct children of the grid container automatically become grid items.
One component is displayed in each rectangle. GridLayout (): creates a grid layout with one column per component in a row. GridLayout (int rows, int columns): creates a grid layout with the given rows and columns but no gaps between the components.
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.
103
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!
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
