CODEWITHSUNDEEP
androidgrid-layout
user3207874
user3207874

Reputation: 3647

Android: Adding column in GridLayout breaks the grid, makes the first column overflow

I am trying to use gridlayout to have a 5x5 grid of evenly spaced buttons. The first four columns of the row turned out nicely and exactly how I wanted it (and the new row seemed to also start off nicely when I tested it).

Here is the relevant xml:

    <androidx.gridlayout.widget.GridLayout
        android:id="@+id/gridLayoutBoard"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:columnCount="5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:rowCount="5">

        <Button
            android:id="@+id/buttonBoardCell00"
            android:onClick="buttonBoardCellOnClick"
            app:layout_column="0"
            app:layout_columnWeight="1"
            app:layout_row="0"
            app:layout_rowWeight="1" />
        <Button
            android:id="@+id/buttonBoardCell01"
            android:onClick="buttonBoardCellOnClick"
            app:layout_column="1"
            app:layout_columnWeight="1"
            app:layout_row="0"
            app:layout_rowWeight="1" />
        <Button
            android:id="@+id/buttonBoardCell02"
            android:onClick="buttonBoardCellOnClick"
            app:layout_column="2"
            app:layout_columnWeight="1"
            app:layout_row="0"
            app:layout_rowWeight="1" />
        <Button
            android:id="@+id/buttonBoardCell03"
            android:onClick="buttonBoardCellOnClick"
            app:layout_column="3"
            app:layout_columnWeight="1"
            app:layout_row="0"
            app:layout_rowWeight="1" />



    </androidx.gridlayout.widget.GridLayout>

And here is how it looks like:
enter image description here
So far so good. The reason it's so tall is because it takes up all the vertical space. But when I started a new row, then the new row took half the vertical space. So that's not a problem.

Now, let's add another button below the 03 button:

<Button
                android:id="@+id/buttonBoardCell04"
                android:onClick="buttonBoardCellOnClick"
                app:layout_column="4"
                app:layout_columnWeight="1"
                app:layout_row="0"
                app:layout_rowWeight="1" />

After the change, the first cell overflows and this is how it looks like in the emulator:
enter image description here
and in Android Studio:
enter image description here

What am I doing wrong? How can I solve the problem?

Upvotes: 1

Views: 284

Answers (1)

Md. Asaduzzaman
Md. Asaduzzaman

Reputation: 15423

Add layout_width and layout_height to 0dp in your Button

<Button
    ...
    android:layout_width="0dp"
    android:layout_height="0dp"
    .../>

Upvotes: 2

Related Questions