wmoskal
Reputation: 295
Why is my grid layout screwed up in android studio?
I am just starting with android development. I have a grid view but two buttons on the bottom row of the grid layout have a very fine margin on top of them, which I am trying to eliminate. Even if I use the design tool and try to drag the buttons up a slim amount, they reset and go right back to having a thin layout on top.
The XML code for my layout is
<androidx.constraintlayout.widget.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"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:background="#FD5F00"
tools:context="com.example.test.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:id="@+id/tvDisplay"
android:layout_row="0"
android:layout_column="0"
android:layout_columnSpan="4"
android:gravity="bottom|right"
android:textSize="50sp"
android:text="0" />
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="false"
android:layout_alignParentEnd="false"
android:columnCount="4"
android:rowCount="5"
android:layout_below="@+id/tvDisplay"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true">
<Button
android:id="@+id/btnclear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="0"
android:background="#FFFFFF"
android:text="AC"
android:textAlignment="gravity"
android:textAllCaps="false"
android:textColor="#111111"
android:textDirection="firstStrongLtr"
android:textSize="28sp" />
<Button
android:id="@+id/btnnegative"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="1"
android:background="#FFFFFF"
android:text="+/-"
android:textAlignment="gravity"
android:textColor="#111111"
android:textIsSelectable="true"
android:textSize="28sp" />
<Button
android:id="@+id/btnpercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="2"
android:background="#FFFFFF"
android:text="%"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btndivide"
android:layout_width="68dp"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="3"
android:background="#FFFFFF"
android:text="÷"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="0"
android:background="#FFFFFF"
android:text="7"
android:textAlignment="gravity"
android:textColor="#111111"
android:textDirection="inherit"
android:textSize="28sp" />
<Button
android:id="@+id/btn8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="1"
android:background="#FFFFFF"
android:text="8"
android:textAlignment="gravity"
android:textColor="#111111"
android:textDirection="rtl"
android:textSize="28sp" />
<Button
android:id="@+id/btn9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="2"
android:background="#FFFFFF"
android:text="9"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btnMultiply"
android:layout_width="68dp"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="3"
android:background="#FFFFFF"
android:text="x"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="0"
android:background="#FFFFFF"
android:text="4"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="1"
android:background="#FFFFFF"
android:text="5"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="2"
android:background="#FFFFFF"
android:text="6"
android:textAlignment="gravity"
android:textColor="#111111"
android:textIsSelectable="true"
android:textSize="28sp" />
<Button
android:id="@+id/btnsubtract"
android:layout_width="68dp"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="3"
android:background="#FFFFFF"
android:text="-"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="0"
android:background="#FFFFFF"
android:text="1"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="1"
android:background="#FFFFFF"
android:text="2"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="2"
android:background="#FFFFFF"
android:text="3"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn0"
android:layout_width="175dp"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_column="0"
android:layout_columnSpan="2"
android:background="#FFFFFF"
android:text="0"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btnadd"
android:layout_width="68dp"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="3"
android:background="#FFFFFF"
android:text="+"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btnpoint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_column="2"
android:background="#FFFFFF"
android:text="."
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="35sp" />
<Button
android:id="@+id/btnEquals"
android:layout_width="68dp"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_column="3"
android:background="#FFFFFF"
android:text="="
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
</GridLayout>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am new to android, and would appreciate any help that you could give for why the 0 and the = are not snapping to their proper grid location.
Thanks
Upvotes: 1
Views: 104
Answers (2)
Bö macht Blau
Reputation: 13009
TL;DR: make sure all Buttons have the same value for android:layout_height.
The Button between the "0" and the "=" has a different text size: 35sp versus 28sp. Since all the Buttons have set their height to wrap_content, the neighbouring Buttons don't fill the available space. So you see the background color above the smaller Buttons.
Upvotes: 1
Md. Asaduzzaman
Reputation: 15423
You can achieve this using only ConstraintLayout with GridLayout. Check below:
<androidx.constraintlayout.widget.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="#FD5F00"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:id="@+id/tvDisplay"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:gravity="bottom|right"
android:padding="10dp"
android:textSize="50sp"
android:text="0" />
<GridLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:columnCount="4"
android:rowCount="5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tvDisplay">
<Button
android:id="@+id/btnclear"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="0"
android:layout_column="0"
android:background="#FFFFFF"
android:text="AC"
android:textAlignment="gravity"
android:textAllCaps="false"
android:textColor="#111111"
android:textDirection="firstStrongLtr"
android:textSize="28sp" />
<Button
android:id="@+id/btnnegative"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="0"
android:layout_column="1"
android:background="#FFFFFF"
android:text="+/-"
android:textAlignment="gravity"
android:textColor="#111111"
android:textIsSelectable="true"
android:textSize="28sp" />
<Button
android:id="@+id/btnpercent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="0"
android:layout_column="2"
android:background="#FFFFFF"
android:text="%"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btndivide"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="0"
android:layout_column="3"
android:background="#FFFFFF"
android:text="÷"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="1"
android:layout_column="0"
android:background="#FFFFFF"
android:text="7"
android:textAlignment="gravity"
android:textColor="#111111"
android:textDirection="inherit"
android:textSize="28sp" />
<Button
android:id="@+id/btn8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="1"
android:layout_column="1"
android:background="#FFFFFF"
android:text="8"
android:textAlignment="gravity"
android:textColor="#111111"
android:textDirection="rtl"
android:textSize="28sp" />
<Button
android:id="@+id/btn9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="1"
android:layout_column="2"
android:background="#FFFFFF"
android:text="9"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btnMultiply"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="1"
android:layout_column="3"
android:background="#FFFFFF"
android:text="x"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="2"
android:layout_column="0"
android:background="#FFFFFF"
android:text="4"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="2"
android:layout_column="1"
android:background="#FFFFFF"
android:text="5"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="2"
android:layout_column="2"
android:background="#FFFFFF"
android:text="6"
android:textAlignment="gravity"
android:textColor="#111111"
android:textIsSelectable="true"
android:textSize="28sp" />
<Button
android:id="@+id/btnsubtract"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="2"
android:layout_column="3"
android:background="#FFFFFF"
android:text="-"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="3"
android:layout_column="0"
android:background="#FFFFFF"
android:text="1"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="3"
android:layout_column="1"
android:background="#FFFFFF"
android:text="2"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="3"
android:layout_column="2"
android:background="#FFFFFF"
android:text="3"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btn0"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="4"
android:layout_column="0"
android:layout_columnSpan="2"
android:background="#FFFFFF"
android:text="0"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btnadd"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="3"
android:layout_column="3"
android:background="#FFFFFF"
android:text="+"
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btnpoint"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="4"
android:layout_column="2"
android:background="#FFFFFF"
android:text="."
android:textColor="#111111"
android:textSize="28sp" />
<Button
android:id="@+id/btnEquals"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_row="4"
android:layout_column="3"
android:background="#FFFFFF"
android:text="="
android:textAlignment="gravity"
android:textColor="#111111"
android:textSize="28sp" />
</GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Output:
Upvotes: 1
Related Questions
- Grid layout not getting aligned properly
- Why does this layout work in preview but not on my device?
- Grid layout display is not correct
- XML Error "Grid Layout is Useless" (Android Studio)
- Android: GridLayout rows are all bunched together
- Gridview layout issue in android
- Grid Layout Spacing Issue
- GridLayout weird behaviour
- GridView isn't being displayed correctly
- Android layout not showing properly