0

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.stack.imgur.com/mtC25.jpg

Emulator: https://i.stack.imgur.com/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>

Zoe
  • 27,060
  • 21
  • 118
  • 148
Adomas
  • 21
  • 1
  • 8
  • Try reading the documentation on [GridLayout](https://developer.android.com/reference/android/widget/GridLayout.html). It looks like in the 'Excess Space Distribution' section, it discusses the flexibility and inflexibility, notably 'To prevent a column from stretching, ensure that one of the components in the column does not define a weight or a gravity.' – AChez9 Oct 10 '17 at 19:13

3 Answers3

0

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.

Ben P.
  • 52,661
  • 6
  • 95
  • 123
  • Probably the other answers are correct too, but this is the first one I used and it solved my problem. Thanks :) – Adomas Oct 10 '17 at 20:39
0

From the images that you have posted, it seems like the four buttons display some static data.

Remove the unnecessary attributes to the views.

You can simply use a table layout to display the buttons and stretch the buttons in the layout. Below is the modified code for the buttons:

 <TableLayout
        android:id="@+id/gridLayout"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_alignBottom="@+id/again"
        android:columnCount="2"
        android:rowCount="2"
        android:stretchColumns="*"
        >

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            >

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary"
            android:onClick="pressed"
            android:tag="0"
            android:text="Button"
            android:textSize="20sp" />

        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_blue_dark"
            android:onClick="pressed"
            android:tag="1"
            android:text="Button"
            android:textSize="20sp" />
        </TableRow>

        <TableRow

            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">
        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            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="match_parent"
            android:layout_height="match_parent"
             android:background="@android:color/holo_red_light"
           android:onClick="pressed"
            android:tag="3"
            android:text="Button"
            android:textSize="20sp" />
        </TableRow>
    </TableLayout>

And also do not hardcode the height for better UI experience when launched on different phones.

Ravi
  • 881
  • 1
  • 9
  • 23
0

You are trying to use GridLayout weights which were introduced in API 21, but they don't seem to work on you API 21 device or my API 21 emulator. They do work on my API 24 device and emulator.

The support library seems to have a better implementation of GridLayout - at least one the uses weights as expected, but you will have to make some slight changes to your code. Here is what I have come up with:

First, add the support library for GridLayout to you gradle file:

    compile 'com.android.support:gridlayout-v7:25.4.0'

You may need a different version depending upon other requirements.

Here is a working XML file that I have simplified from yours. You will notice the v7 support GridLayout:

<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/gridLayout"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    app:columnCount="2"
    app:rowCount="2">

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:tag="0"
        android:text="Button"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_dark"
        android:tag="1"
        android:text="Button"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_light"
        android:tag="2"
        android:text="Button"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_light"
        android:tag="3"
        android:text="Button"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_gravity="fill"
        app:layout_rowWeight="1" />
</android.support.v7.widget.GridLayout>

Here is what it looks like:

enter image description here

As you can see, the support library implementation of GridLayout works for your layout. I think you may be well-served, however, by looking at a different way to do this as the OPs mention.

Cheticamp
  • 61,413
  • 10
  • 78
  • 131