I am trying to stretch the keyboard of my calculator (which is a GridLayout with buttons inside of it). It is a 5*4(columns*rows).
I give GridLayout android:layout_height="match_parent" and android:layout_width="match_parent" to make its dimensions fill the available space. then
I assign the column and row indices to the cells with android:layout_column an android:layout_row accordingly.
I get the following result:
1080x1920
The cells take an uniform width and height, but do not stretch enough to fill the whole grid. So I searched online and saw that I could assign an equal weight to each cell and the layout figures out a uniform width and height value that fills the whole grid.
(Side question: how does android determine the size of these cells in this case? why did it not make them larger/smaller than what it is here?)
So I add:
android:layout_weight="1" and android:layout_height="1" to each of the buttons
I get this result:
1080x1920
Awesome. Looks like it is working as intended.. until I change the resolution to something else:
480x800
Or if I keep the same 1080x1920 resolution but force the min height of the top section to something like 280dp (279dp works fine)
How can I fix this? I am intending API Level 21 and I want to force the GridLayout to fill the available space no matter. I prefer the buttons to be squeezed (even have their content clipped/ invisible) rather than to shoot off the screen. To finish here is the XML:
main.axml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/root">
<!--Top section (screen + few keys)-->
<LinearLayout
android:style="#style/CalculatorScreenStyle"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/top">
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="280dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="40sp"
android:hint="Enter a number here"/>
</LinearLayout>
<!-- Keyboard layout -->
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/keyboard"
android:columnCount="4"
android:rowCount="5">
<Button
android:style="#style/CalculatorButtonStyle"
android:text="C"
android:id="#+id/clearButton"
android:layout_column="0"
android:layout_row="0" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="Button"
android:id="#+id/button15"
android:layout_column="1"
android:layout_row="0" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="%"
android:layout_column="2"
android:layout_row="0"
android:id="#+id/percentButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:id="#+id/divideButton"
android:layout_column="3"
android:layout_row="0"
android:text="÷" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="7"
android:layout_column="0"
android:layout_row="1"
android:id="#+id/sevenNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="8"
android:layout_column="1"
android:layout_row="1"
android:id="#+id/eightNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="9"
android:layout_column="2"
android:layout_row="1"
android:id="#+id/nineNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="+"
android:layout_column="3"
android:layout_row="1"
android:id="#+id/plusButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="4"
android:layout_column="0"
android:layout_row="2"
android:id="#+id/fourNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="5"
android:layout_column="1"
android:layout_row="2"
android:id="#+id/fiveNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="6"
android:layout_column="2"
android:layout_row="2"
android:id="#+id/sixNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="x"
android:layout_column="3"
android:layout_row="2"
android:id="#+id/multiplyButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="1"
android:layout_column="0"
android:layout_row="3"
android:id="#+id/oneNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="2"
android:layout_column="1"
android:layout_row="3"
android:id="#+id/twoNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="3"
android:layout_column="2"
android:layout_row="3"
android:id="#+id/threeNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="-"
android:layout_column="3"
android:layout_row="3"
android:id="#+id/minusButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="+/-"
android:layout_column="0"
android:layout_row="4"
android:id="#+id/signButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="0"
android:layout_column="1"
android:layout_row="4"
android:id="#+id/zeroNumButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="."
android:layout_column="2"
android:layout_row="4"
android:id="#+id/periodButton" />
<Button
android:style="#style/CalculatorButtonStyle"
android:text="="
android:layout_column="3"
android:layout_row="4"
android:id="#+id/equalsButton" />
</GridLayout>
</LinearLayout>
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CalculatorButtonStyle" >
<item name="android:textSize">22sp</item>
<item name="android:layout_columnWeight">1</item>
<item name="android:layout_rowWeight">1</item>
<item name="android:background">#9E5EC2</item>
</style>
<style name="CalculatorScreenStyle">
<item name="android:background">#ED59E8</item>
</style>
</resources>
EDIT: As a temporary solution, I am using a vertical LinearLayout of horizontals LinearLayouts and I assing an equal weights to all the Buttons. It works fine but then I wonder what is the use of GridLayout if I have to emulate how it works myself..
When android API level < 21, it doesn't work well.
So we can add dependency in app gradle file:
implementation 'androidx.gridlayout:gridlayout:1.0.0'
If you've still not migrated to androidx (which you ought to), then use:
implementation 'com.android.support:gridlayout-v7:28.0.0'
Then change your code.
Use androidx.gridlayout.widget.GridLayout (or android.support.v7.widget.GridLayout, if not androidx) in your XML code.
<androidx.gridlayout.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/keyboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:columnCount="4"
app:rowCount="5">
<Button
android:id="#+id/clearButton"
style="#style/CalculatorButtonStyle"
android:text="C"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/button15"
style="#style/CalculatorButtonStyle"
android:text="Button"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/percentButton"
style="#style/CalculatorButtonStyle"
android:text="%"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/divideButton"
style="#style/CalculatorButtonStyle"
android:text="÷"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/sevenNumButton"
style="#style/CalculatorButtonStyle"
android:text="7"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/eightNumButton"
style="#style/CalculatorButtonStyle"
android:text="8"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/nineNumButton"
style="#style/CalculatorButtonStyle"
android:text="9"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/plusButton"
style="#style/CalculatorButtonStyle"
android:text="+"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="1"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/fourNumButton"
style="#style/CalculatorButtonStyle"
android:text="4"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/fiveNumButton"
style="#style/CalculatorButtonStyle"
android:text="5"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/sixNumButton"
style="#style/CalculatorButtonStyle"
android:text="6"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/multiplyButton"
style="#style/CalculatorButtonStyle"
android:text="x"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/oneNumButton"
style="#style/CalculatorButtonStyle"
android:text="1"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/twoNumButton"
style="#style/CalculatorButtonStyle"
android:text="2"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/threeNumButton"
style="#style/CalculatorButtonStyle"
android:text="3"
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/minusButton"
style="#style/CalculatorButtonStyle"
android:text="-"
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="3"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/signButton"
style="#style/CalculatorButtonStyle"
android:text="+/-"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="4"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/zeroNumButton"
style="#style/CalculatorButtonStyle"
android:text="0"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_row="4"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/periodButton"
style="#style/CalculatorButtonStyle"
android:text="."
app:layout_column="2"
app:layout_columnWeight="1"
app:layout_row="4"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/equalsButton"
style="#style/CalculatorButtonStyle"
android:text="="
app:layout_column="3"
app:layout_columnWeight="1"
app:layout_row="4"
app:layout_rowWeight="1"/>
</androidx.gridlayout.v7.widget.GridLayout>
Note
The new attributes are:
app:layout_columnWeight
app:layout_rowWeight
app:layout_rowSpan
app:layout_columnSpan
Related
I've created a simple GridLayout with a bunch of buttons. Every button has layout_columnWeight and layout_rowWeight set to "1" to cause the gridlayout to expand to fill the space.
If I delete any of the weights, e.g. layout_columnWeight from the upper-left button, all of the other buttons in that column disappear.
Can anybody explain what's going on here?
My complete layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.gridlayout.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/colorAccent">
<Button
android:id="#+id/button24"
android:text="7"
app:layout_column="0"
app:layout_row="1"
app:layout_columnWeight=".01"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button25"
android:text="8"
app:layout_column="1"
app:layout_row="1"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button26"
android:text="9"
app:layout_column="2"
app:layout_row="1"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button28"
android:text="4"
app:layout_column="0"
app:layout_row="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button29"
android:text="5"
app:layout_column="1"
app:layout_row="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button30"
android:text="6"
app:layout_column="2"
app:layout_row="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button34"
android:text="1"
app:layout_column="0"
app:layout_row="3"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button35"
android:text="2"
app:layout_column="1"
app:layout_row="3"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<Button
android:id="#+id/button36"
android:text="3"
app:layout_column="2"
app:layout_row="3"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
</androidx.gridlayout.widget.GridLayout>
</LinearLayout>
I've tried enough, searched the internet and I do not know what I can do to fix this.
I have in my code this:
<GridLayout
android:id="#+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2"
android:background="#f11"
>
<Button
android:id="#+id/button1"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="0"
android:layout_column="0"
android:text="Button"/>
<Button
android:id="#+id/button2"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="0"
android:layout_column="1"
android:text="Button"/>
<Button
android:id="#+id/button3"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="1"
android:layout_column="0"
android:text="Button"/>
<Button
android:id="#+id/button4"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="1"
android:layout_column="1"
android:text="Button"/>
</GridLayout>
In my IDE (ANDROID STUDIO 3.0) appear this: (Which is what I want.)
But in devices appear like this:
How fix this?
Thanks!
When android api <21 ,it didn't work well.
So we can add compile.
compile 'com.android.support:gridlayout-v7:25.3.1'
And change your xml code to this.
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f11"
app:columnCount="2"
app:rowCount="2">
<Button
android:id="#+id/button1"
android:text="Button"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="0"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/button2"
android:text="Button"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="0"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/button3"
android:text="Button"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="1"
app:layout_rowWeight="1"/>
<Button
android:id="#+id/button4"
android:text="Button"
app:layout_column="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="1"
app:layout_rowWeight="1"/>
</android.support.v7.widget.GridLayout>
Note
In the com.android.support:gridlayout-v7:25.3.1
It had new attribute.
app:layout_columnWeight
app:layout_rowWeight
app:layout_rowSpan
app:layout_columnSpan
You can use in your code.
Instead, you can use table format and assign the buttons in there easily which will cause no problem in various screens when compiled.
I have an activity:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
app:rowCount="4"
app:columncount="4">
<Button
android:text="1"
android:id="#+id/button1"
app:layout_gravity="fill"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_column="0""/>
<Button
android:text="2"
android:id="#+id/button2"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="0"
app:layout_column="1"/>
<Button
android:text="3"
android:id="#+id/button3"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="0"
app:layout_column="2"/>
<Button
android:text="4"
android:id="#+id/button5"
app:layout_gravity="fill"
app:layout_row="1"
app:layout_column="0"/>
<Button
android:text="5"
android:id="#+id/button6"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="1"
app:layout_column="1"/>
<Button
android:text="6"
android:id="#+id/button7"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="1"
app:layout_column="2"/>
<Button
android:text="7"
android:id="#+id/button8"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="2"
app:layout_column="0"/>
<Button
android:text="8"
android:id="#+id/button9"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_row="2"
app:layout_column="1"/>
<Button
android:text="9"
android:id="#+id/button4"
app:layout_gravity="fill"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
app:layout_row="2"
app:layout_column="2"
/>
which looks like this:
I would like to change the button 1, so that it would be stratched vertically and 4 and 7 must be minimized to wrap_contnet (made in photoshop)
What is the best way to do this?
More specifically, I need to make this:
I made this by using custom width, but I don't know how to make this using layouts:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:grid="http://schemas.android.com/apk/res-auto"
tools:context="com.example.win72.myapplication.MainActivity"
grid:columnCount="3"
grid:rowCount="3">
<TextView
grid:layout_gravity="fill"
grid:layout_columnWeight="1"
grid:layout_rowWeight="10"
grid:layout_row="0"
grid:layout_column="0"
grid:layout_rowSpan="2"
android:textSize="60sp"
android:background="#a49595"
android:text="90"
android:id="#+id/textView"
android:clickable="true"
android:layout_height="457dp"/>
<TextView
grid:layout_gravity="fill"
grid:layout_columnWeight="1"
grid:layout_rowWeight="10"
grid:layout_row="0"
grid:layout_column="2"
grid:layout_rowSpan="2"
android:textSize="60sp"
android:background="#a49595"
android:text="90"
android:id="#+id/textView2"/>
<TextView
grid:layout_row="2"
grid:layout_column="0"
grid:layout_gravity="fill_horizontal"
grid:layout_columnWeight="1"
android:gravity="center"
android:textSize="30sp"
android:text="4"
android:id="#+id/textView3"/>
<TextView
grid:layout_row="2"
grid:layout_column="2"
grid:layout_gravity="fill_horizontal"
android:text="6"
android:id="#+id/textView4"
android:gravity="center"
android:textSize="30sp"
/>
<Button
grid:layout_row="0"
grid:layout_column="1"
grid:layout_columnWeight="1"
grid:layout_gravity="fill_horizontal"
android:text="Reset"
android:id="#+id/button"/>
<Button
grid:layout_row="1"
grid:layout_column="1"
grid:columnweight="1"
grid:layout_gravity="fill_horizontal"
android:text="Next"
android:id="#+id/button2"
/>
Using staggeredgridlayout you can achieve that.
I found that making dynamic count of rows/columns and using rowspan can make this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:grid="http://schemas.android.com/apk/res-auto"
tools:context="com.example.win72.myapplication.MainActivity">
<TextView
grid:layout_gravity="fill"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_row="0"
grid:layout_column="0"
grid:layout_rowSpan="3"
android:textSize="60sp"
android:background="#a49595"
android:text="90"
android:id="#+id/textView"
android:clickable="true"
/>
<TextView
grid:layout_gravity="fill"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_row="0"
grid:layout_column="2"
grid:layout_rowSpan="3"
android:textSize="60sp"
android:background="#a49595"
android:text="90"
android:id="#+id/textView2"/>
<TextView
grid:layout_row="3"
grid:layout_column="0"
grid:layout_gravity="fill_horizontal"
grid:layout_columnWeight="1"
android:gravity="center"
android:textSize="30sp"
android:text="4"
android:id="#+id/textView3"/>
<TextView
grid:layout_row="3"
grid:layout_column="2"
grid:layout_gravity="fill_horizontal"
android:text="6"
android:id="#+id/textView4"
android:gravity="center"
android:textSize="30sp"
/>
<Button
grid:layout_row="0"
grid:layout_column="1"
grid:layout_columnWeight="1"
grid:layout_gravity="fill_horizontal"
android:text="Reset"
android:id="#+id/button"/>
<Button
grid:layout_row="1"
grid:layout_column="1"
grid:layout_columnWeight="1"
grid:layout_gravity="fill_horizontal"
android:text="Next"
android:id="#+id/button2"
/>
Thanks a let for help!
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?
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>
I need to create smth like calculator keyboard. GridLayout is ideal for it (and only for it :) ). So, I use the one from Support Library (compile 'com.android.support:gridlayout-v7:22.2.0'. Here is my xml:
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:columnCount="4"
app:rowCount="4"
android:layout_gravity="bottom"
android:layout_weight="4"
app:alignmentMode="alignBounds"
app:rowOrderPreserved="false"
app:orientation="horizontal">
<Button android:text="7"
android:id="#+id/button7"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="8"
android:id="#+id/button8"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="9"
android:id="#+id/button9"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="←"
android:id="#+id/button_backspace"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="4"
android:id="#+id/button4"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="5"
android:id="#+id/button5"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="6"
android:id="#+id/button6"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="#string/clean"
android:id="#+id/button_clear"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="1"
android:id="#+id/button1"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="2"
android:id="#+id/button2"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="3"
android:id="#+id/button3"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button
android:id="#+id/button_clear_all"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_gravity="fill_vertical"
android:text="#string/clean_all"
app:layout_rowSpan="2"
android:background="#color/calculator_button_separator_color"
android:textColor="#drawable/light_button_text_color"
style="#style/CalculatorButton"/>
<Button
android:id="#+id/button0"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_gravity="fill_horizontal"
android:text="0"
app:layout_columnSpan="2"
style="#style/CalculatorButton"/>
<Button android:text="."
android:id="#+id/button_dot"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
</android.support.v7.widget.GridLayout>
On Android 4.3-4.4 all is okay:
But there are troubles on Android 4.1-4.2:
So, I cannot understand where is my bad.
Well, it was really bug in the support library. I replaced compile 'com.android.support:gridlayout-v7:22.2.0' with compile 'com.android.support:gridlayout-v7:22.0.+', made some magic with code, checked on 4.1 and 4.3 and now it's working!
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:columnCount="4"
app:rowCount="4"
android:layout_gravity="bottom"
android:layout_weight="4"
app:alignmentMode="alignBounds"
app:orientation="horizontal">
<Button android:text="7"
android:id="#+id/button7"
app:layout_gravity="fill"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="8"
android:id="#+id/button8"
app:layout_gravity="fill"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="9"
android:id="#+id/button9"
app:layout_gravity="fill"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="←"
android:id="#+id/button_backspace"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="4"
android:id="#+id/button4"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="5"
android:id="#+id/button5"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="6"
android:id="#+id/button6"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="#string/clean"
app:layout_gravity="fill"
android:id="#+id/button_clear"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="1"
android:id="#+id/button1"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="2"
android:id="#+id/button2"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
<Button android:text="3"
android:id="#+id/button3"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_gravity="fill"
style="#style/CalculatorButton"/>
<Button
android:id="#+id/button_clear_all"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_gravity="fill"
android:text="#string/clean_all"
app:layout_rowSpan="2"
android:background="#color/calculator_button_separator_color"
android:textColor="#drawable/light_button_text_color"
style="#style/CalculatorButton"/>
<Button
android:id="#+id/button0"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_gravity="fill"
android:text="0"
app:layout_columnSpan="2"
style="#style/CalculatorButton"/>
<Button android:text="."
android:id="#+id/button_dot"
app:layout_gravity="fill"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
style="#style/CalculatorButton"/>
</android.support.v7.widget.GridLayout>
Do you get any error on LogCat?
If you are not getting nothing on it try to import gridlayout-v7
compile 'com.android.support:gridlayout-v7:19.0.0'
Also get sure that you've got a 8+ minSdkVersion
<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="18" />
Do you have tried to replace the android.support.v7.widget.GridLayout to GridLayout?
compile 'com.android.support:design:22.2.0'
or try to create a Adapter and add the datas to the GridView by that
I've just fixed this bug in my project. Adding android:layout_width="0dp" and android:layout_height="0dp" for all buttons solves the problem. Here are parts from my layout:
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:padding="16dp"
app:columnCount="4"
app:rowCount="5"
app:orientation="horizontal">
<Button
android:text="Test"
app:layout_gravity="fill"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_columnWeight="1"
app:layout_rowWeight="1"/>
...
</android.support.v7.widget.GridLayout>