So I am doing a simple game app, that has colorful buttons with answers in them. Everything works fine but I have some problems with the sizes of buttons in GridLayout. I tried searching the answer in other posts but couldn't make the buttons sized evenly. It looks fine on the emulator, but not on my device (API 21). Yes, I tried changing button width to "wrap_content".
Real device: https://i.sstatic.net/mtC25.jpg
Emulator: https://i.sstatic.net/sXTAG.png
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:visibility="visible"
tools:context="com.example.adam.braintrainer.MainActivity">
<Button
android:id="@+id/goButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_alignParentTop="false"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="@android:color/holo_blue_dark"
android:onClick="goButton"
android:padding="30dp"
android:text="START!"
android:textSize="36sp"
android:visibility="visible"
tools:gravity="center_vertical|center_horizontal|center" />
<RelativeLayout
android:id="@+id/allStuff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:visibility="invisible">
<TextView
android:id="@+id/answer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:text="Correct"
android:textSize="20sp"
android:visibility="invisible" />
<Button
android:id="@+id/again"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="65dp"
android:onClick="playAgain"
android:padding="10dp"
android:text="PLAY AGAIN"
android:visibility="invisible" />
<TextView
android:id="@+id/timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_margin="15dp"
android:background="@android:color/holo_orange_light"
android:padding="15dp"
android:text="30s"
android:textSize="24sp" />
<TextView
android:id="@+id/score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_margin="15dp"
android:background="@color/colorAccent"
android:padding="15dp"
android:text="0/0"
android:textSize="24sp" />
<TextView
android:id="@+id/suma"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/timer"
android:layout_alignBottom="@+id/timer"
android:layout_centerHorizontal="true"
android:text="10+13"
android:textSize="30dp" />
<GridLayout
android:id="@+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignBottom="@+id/again"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:columnCount="2"
android:rowCount="2">
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="@color/colorPrimary"
android:onClick="pressed"
android:tag="0"
android:text="Button"
android:textSize="20sp" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="@android:color/holo_blue_dark"
android:onClick="pressed"
android:tag="1"
android:text="Button"
android:textSize="20sp" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="@android:color/holo_green_light"
android:onClick="pressed"
android:tag="2"
android:text="Button"
android:textSize="20sp" />
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:background="@android:color/holo_red_light"
android:onClick="pressed"
android:tag="3"
android:text="Button"
android:textSize="20sp" />
</GridLayout>
</RelativeLayout>
Looking at your layout, I don't see any problem. I don't have your exact device, but I couldn't reproduce the issue.
However, one way to solve it would be to use ConstraintLayout instead of GridLayout. This has the added benefit of allowing you to get evenly sized buttons without weight (which GridLayout only supports on API 21+).
Here's a ConstraintLayout that does the same thing as your grid:
<android.support.constraint.ConstraintLayout
android:id="@+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignBottom="@+id/again">
<Button
android:id="@+id/button4"
android:tag="0"
android:layout_width="0dp"
android:layout_height="0dp"
android:textSize="20sp"
android:text="Button"
android:background="@color/colorPrimary"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button3"
app:layout_constraintBottom_toTopOf="@+id/button2"/>
<Button
android:id="@+id/button3"
android:tag="1"
android:layout_width="0dp"
android:layout_height="0dp"
android:textSize="20sp"
android:text="Button"
android:background="@android:color/holo_blue_dark"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/button4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/button"/>
<Button
android:id="@+id/button2"
android:tag="2"
android:layout_width="0dp"
android:layout_height="0dp"
android:textSize="20sp"
android:text="Button"
android:background="@android:color/holo_green_light"
app:layout_constraintTop_toBottomOf="@+id/button4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button"
app:layout_constraintBottom_toBottomOf="parent"/>
<Button
android:id="@+id/button"
android:tag="3"
android:layout_width="0dp"
android:layout_height="0dp"
android:textSize="20sp"
android:text="Button"
android:background="@android:color/holo_red_light"
app:layout_constraintTop_toBottomOf="@+id/button3"
app:layout_constraintLeft_toRightOf="@+id/button2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
If you wanted to get really into it, you could probably replace your entire layout with a single top-level ConstraintLayout and avoid all view nesting. But you can start with just this.