GridLayout is showing only one column on some DPI - android

So I have a GridLayout - it's using weight to distribute itself properly. The problem is that it doesn't display correctly on some devices - for example on Xperia E3 (480 x 854, 218 DPI) or 3.7" FWVGA slider in the designer.
Here's how it should always look like:
Here's how it looks like on some devices (only first column of GridLayout is visible and it gets stretched even beyond the right side of the screen):
Here's the XML, basically GridLayout contains buttons and the main thing here is that each button has
android:layout_columnWeight="1"
android:layout_rowWeight="1"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.3">
...
</RelativeLayout>
<!--Bottom part (buttons)-->
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_weight="0.7"
android:orientation="vertical">
<!--Scroll bar with all the different functions and constants-->
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:layout_marginBottom="5dp">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarAlwaysDrawHorizontalTrack="false">
...
</GridLayout>
</HorizontalScrollView>
<!--THIS IS THE PROBLEM Main buttons for the calculator THIS IS THE PROBLEM-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.9">
<GridLayout
android:id="#+id/mainBtnGrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rowCount="5"
android:columnCount="5"
android:orientation="vertical">
<Button
android:id="#+id/btnClear"
android:background="#drawable/button_main"
style="#style/button_main_calculator"
android:text="C"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnSeven"
android:background="#drawable/button_main"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="7"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnFour"
android:background="#drawable/button_main"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="4"
android:layout_columnWeight="1"
android:layout_rowWeight="1"/>
<Button
android:id="#+id/btnOne"
android:background="#drawable/button_main"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnSign"
android:background="#drawable/button_main"
style="#style/button_main_calculator"
android:text="±"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnBack"
android:background="#drawable/button_main"
style="#style/button_main_calculator"
android:text="B"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnEight"
android:background="#drawable/button_main"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="8"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnFive"
android:background="#drawable/button_main"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="5"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnTwo"
android:background="#drawable/button_main"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnZero"
android:background="#drawable/button_main"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnTypingPositionSwitch"
android:background="#drawable/button_main"
style="#style/button_main_calculator"
android:text="M"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnNine"
android:background="#drawable/button_main"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="9"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnSix"
android:background="#drawable/button_main"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="6"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnThree"
android:background="#drawable/button_main"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnDecimal"
android:background="#drawable/button_main"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="."
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Space
android:layout_width="5dp" />
<Space
android:layout_width="5dp" />
<Space
android:layout_width="5dp" />
<Space
android:layout_width="5dp" />
<Space
android:layout_width="5dp" />
<Button
android:id="#+id/btnDivide"
android:background="#drawable/button_operator"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="/"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnMultiply"
android:background="#drawable/button_operator"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="x"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnSubtract"
android:background="#drawable/button_operator"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="-"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnAdd"
android:background="#drawable/button_operator"
android:onClick="Button_OnClick"
style="#style/button_main_calculator"
android:text="+"
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
<Button
android:id="#+id/btnEquals"
android:background="#drawable/button_operator"
style="#style/button_main_calculator"
android:text="="
android:layout_columnWeight="1"
android:layout_rowWeight="1" />
</GridLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I have no idea what to do with this, I mean, it's not happening constantly! Thank you for reading this, I will greatly appreciate any suggestions.


I've finally found a solution to this problem.
Turns out that you just need to specify
:layout_width="0dp"
for each button. Then it looks as it's supposed to on all the different screen resolutions and sizes.
I suspect this happens because on smaller screens the grid layout was overflowing even before I've specified
android:layout_columnWeight="1"
android:layout_rowWeight="1"
*Note: for GridLayout v7+ you should use app instead of android as follows:
app:layout_columnWeight="1"
app:layout_rowWeight="1"
so it "didn't know how far it should stretch".
However, now when the width is set to 0dp, it's no longer overflowing anywhere and that's why adding weights now works flawlessly.
I hope this helps some of you - this was a really frustrating problem to have!

Related

GridLayout look strange on a real Device and perfect on emulator

I've designed a basic calculator in android.
As i designed it, i tested it on Emulator Pixel XL Device (API 28, Screen Resolution 1440x2560 560dpi) and worked fine.
"Emulator Layout"
But when I installed the app in Huawei Honor 4C (Android 6.0) It look hilarious.
"Huawei Honor 4c"
minimumSdkVersion: 21
targetSdkVersion: 28
My Design Code:
<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"
android:background="#ffeeeeee"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffffff">
<TextView
android:id="#+id/display"
android:layout_width="match_parent"
android:layout_height="100dp"
android:ems="10"
android:textSize="30sp"
android:gravity="end|bottom"
/>
</LinearLayout>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:columnCount="4"
android:rowCount="5">
<Button
android:id="#+id/btnClear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:text="C" />
<Button
android:id="#+id/btnDivid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:text="/" />
<Button
android:id="#+id/btnMultiplication"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:text="X" />
<Button
android:id="#+id/btnDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_column="3"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:text="Delete" />
<Button
android:id="#+id/btn7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:tag="7"
android:text="7" />
<Button
android:id="#+id/btn8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:tag="8"
android:text="8" />
<Button
android:id="#+id/btn9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:tag="9"
android:text="9" />
<Button
android:id="#+id/btnMinus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_column="3"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:text="-" />
<Button
android:id="#+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:tag="4"
android:text="4" />
<Button
android:id="#+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:tag="5"
android:text="5" />
<Button
android:id="#+id/btn6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_rowWeight="1"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:tag="6"
android:text="6" />
<Button
android:id="#+id/btnPlus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_rowWeight="1"
android:layout_column="3"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:text="+" />
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:tag="1"
android:text="1" />
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_rowWeight="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:tag="2"
android:text="2" />
<Button
android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_rowWeight="1"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:tag="3"
android:text="3" />
<Button
android:id="#+id/btnEqual"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_rowSpan="2"
android:layout_rowWeight="1"
android:layout_column="3"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#color/colorPrimaryDark"
android:onClick="numberClicked"
android:text="=" />
<Button
android:id="#+id/btn0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_rowWeight="1"
android:layout_column="0"
android:layout_columnSpan="2"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:tag="0"
android:text="0" />
<Button
android:id="#+id/btnDot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_rowWeight="1"
android:layout_column="2"
android:layout_columnWeight="2"
android:layout_gravity="fill"
android:onClick="numberClicked"
android:tag="."
android:text="." />
</GridLayout>
</LinearLayout>
What are the possible reasons?

I think that this apparent problem is related to the attribute android:supportsRtl="true" and the different API levels of your device/emualtor.
Add in manifest in application tag
<application
android:name=".Application"
android:supportsRtl="true">
If set to true and targetSdkVersion is set to 17 or higher else false
Uninstall app in device and clear project then install to real device again.
If it works give me a thumbs up ..Keep coding :)

Android Studio: Buttons in Grid Layout change size in emulator

enter image description here
I don't know how to make all button sizes the same... I tried making grid to wrap content, it worked, but button sizes were a bit different depending on the number of characters. Does anyone know how to format this stuff?
I tried adding number of rows and columns, gravity, etc, but it didn't change a thing.
Here is my XML code:
<GridLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<Button
android:text="Hello"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_column="0"
android:layout_row="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/hello"
android:onClick="buttonTapped"
android:gravity="center"
android:layout_gravity="fill" />
<Button
android:text="Do you speak
English?"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_column="1"
android:layout_row="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/english"
android:onClick="buttonTapped"
android:gravity="center"
android:layout_gravity="fill" />
<Button
android:text="Good Evening"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_column="0"
android:layout_row="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/goodEvening"
android:onClick="buttonTapped"
android:gravity="center"
android:layout_gravity="fill" />
<Button
android:text="Please"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_column="1"
android:layout_row="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/please"
android:onClick="buttonTapped"
android:gravity="center"
android:layout_gravity="fill" />
<Button
android:text="My name is"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_column="0"
android:layout_row="2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/name"
android:onClick="buttonTapped"
android:gravity="center"
android:layout_gravity="fill" />
<Button
android:text="Welcome"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_column="1"
android:layout_row="2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/welcome"
android:onClick="buttonTapped"
android:gravity="center"
android:layout_gravity="fill" />
<Button
android:text="How are you?"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_column="0"
android:layout_row="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/howAreYou"
android:onClick="buttonTapped"
android:gravity="center"
android:layout_gravity="fill" />
<Button
android:text="I live in"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_column="1"
android:layout_row="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/iLiveIn"
android:onClick="buttonTapped"
android:gravity="center"
android:layout_gravity="fill" />
</GridLayout>

As you can see in this document . android:layout_gravity="fill" will
Grow the horizontal and vertical size of the object if needed so it
completely fills its container
and here your container size is match_parent.So it is filling your layout . Now make your container(GridLayout) wrap_content , otherwise use gravity attribute properly

Change from match_parent to wrap_content if you plan on using GridLayout:
<GridLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content">
</GridLayout>
If not, then use constrain guidelines or linearlayout

Grid layout not getting aligned properly

I am trying to make an app which contains a grid layout. I have to insert 4 buttons in the layout but I am facing problems regarding the alignment of these buttons.
Here is a screenshot and the xml file:
XML file:
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/sumTextView"
android:columnCount="2"
android:rowCount="2">
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="0"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowWeight="0"
android:onClick="chooseAnswer"
android:tag="0"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="0"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowWeight="0"
android:onClick="chooseAnswer"
android:tag="1"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="0"
android:layout_gravity="fill"
android:layout_row="1"
android:layout_rowWeight="0"
android:onClick="chooseAnswer"
android:tag="2"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="0"
android:layout_gravity="fill"
android:layout_row="1"
android:layout_rowWeight="0"
android:onClick="chooseAnswer"
android:tag="3"
android:text="3"
android:textSize="80sp" />
</GridLayout>
Can someone tell me what the error is?

Add android:layout_columnWeight="1" and android:layout_rowWeight="1" to all cells.
Like this:
<GridLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/sumTextView"
android:columnCount="2"
android:rowCount="2"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:onClick="chooseAnswer"
android:tag="0"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:onClick="chooseAnswer"
android:tag="1"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_gravity="fill"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:onClick="chooseAnswer"
android:tag="2"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="fill"
android:layout_row="1"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:onClick="chooseAnswer"
android:tag="3"
android:text="3"
android:textSize="80sp" />
</GridLayout>

remove extra space between grid components

I am trying to make a calculator app and i used grid for the buttons but when i do that by default there are some margins around the buttons even though i didn't specify one.
yellow part is the grid layout.
Now i tried this method given here. This doesn't seem to work, anyone?
P.s: i am new to android.
Code
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
android:columnCount="3"
android:rowCount="5"
android:layout_weight="1"
android:useDefaultMargins="false"
android:alignmentMode="alignMargins"
android:rowOrderPreserved="false"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="0"
android:layout_rowWeight="1"
android:text="Button"
tools:layout_editor_absoluteX="136dp"
tools:layout_editor_absoluteY="100dp" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="0"
android:layout_rowWeight="1"
android:text="Button"
tools:layout_editor_absoluteX="116dp"
tools:layout_editor_absoluteY="289dp" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="0"
android:layout_rowWeight="1"
android:text="Button"
tools:layout_editor_absoluteX="129dp"
tools:layout_editor_absoluteY="255dp" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="1"
android:layout_rowWeight="1"
android:text="Button"
tools:layout_editor_absoluteX="64dp"
tools:layout_editor_absoluteY="259dp" />
<Button
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="1"
android:layout_rowWeight="1"
android:text="Button" />
<Button
android:id="#+id/button10"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="1"
android:layout_rowWeight="1"
android:text="Button"
tools:layout_editor_absoluteX="129dp"
tools:layout_editor_absoluteY="217dp" />
<Button
android:id="#+id/button12"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="2"
android:layout_rowWeight="1"
android:text="Button" />
<Button
android:id="#+id/button13"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="2"
android:layout_rowWeight="1"
android:text="Button" />
<Button
android:id="#+id/button14"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="2"
android:layout_rowWeight="1"
android:text="Button" />
<Button
android:id="#+id/button16"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="3"
android:layout_rowWeight="1"
android:text="Button" />
<Button
android:id="#+id/button17"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="3"
android:layout_rowWeight="1"
android:text="Button" />
<Button
android:id="#+id/button18"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="3"
android:layout_rowWeight="1"
android:text="Button" />
<Button
android:id="#+id/button20"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="4"
android:layout_rowWeight="1"
android:text="Button" />
<Button
android:id="#+id/button21"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="4"
android:layout_rowWeight="1"
android:text="Button" />
<Button
android:id="#+id/button22"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="4"
android:layout_rowWeight="1"
android:text="Button" />
</GridLayout>

Android Studio : the buttons go outside the screen when shrinking the screen size

I am trying to develop a calculator app and use GridLayout to organize the buttons. When the screen size is larger than 5.5 inches it works perfectly but when I shrink it to less than 5.5 inches all the button goes outside and become very weird. I have attached the xml file of main_activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:background="#android:color/black"
tools:context="com.example.songwei.calculator.MainActivity">
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/GridLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:background="#android:color/black"
android:columnCount="4"
android:orientation="horizontal"
android:rowCount="6"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/display"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:layout_columnWeight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_rowWeight="1"
android:text="0"
android:textAlignment="viewEnd"
android:textColor="#android:color/white"
android:textSize="50sp" />
<Button
android:id="#+id/btn_clear"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#android:color/darker_gray"
android:text="AC"
android:textSize="30sp" />
<Button
android:id="#+id/btn_root"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#android:color/darker_gray"
android:text="√"
android:textSize="30sp" />
<Button
android:id="#+id/btn_delete"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#android:color/darker_gray"
android:text="del"
android:textSize="30sp" />
<Button
android:id="#+id/btn_division"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#android:color/holo_orange_light"
android:text="÷"
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_7"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#696969"
android:text="7"
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_8"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#696969"
android:text="8"
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_9"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#696969"
android:text="9"
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_multiply"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#android:color/holo_orange_light"
android:text="×"
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_4"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#696969"
android:text="4"
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_5"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#696969"
android:text="5"
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_6"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#696969"
android:text="6"
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_subtraction"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#android:color/holo_orange_light"
android:text="-"
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#696969"
android:text="3"
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#696969"
android:text="2"
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#696969"
android:text="1"
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_add"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#android:color/holo_orange_light"
android:text="+"
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_0"
android:layout_columnSpan="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#696969"
android:text="0"
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_dot"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#696969"
android:text="."
android:textColor="#android:color/white"
android:textSize="30sp" />
<Button
android:id="#+id/btn_equal"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:backgroundTint="#android:color/holo_orange_light"
android:text="="
android:textColor="#android:color/white"
android:textSize="30sp" />
</GridLayout>
</android.support.constraint.ConstraintLayout>
And what is the mini size of the button and does that affect?

try to make each number of buttons in one viewGroup (Like LinearLayout Horizontal or vertical) this depend on what your calculate looks like.
also use (layout_weight) to make size of view change depend on height and width.
sorry for not writing code.

Categories

Resources