Buttons With Texts Evenly Distributed in Gridlayout

Question

I want to put my 6 buttons in a 2*3 gridlayout while all of them occupy the gridlayout cells evenly. I set the buttons weight to 1, everything is fine till I add a little long text to some of the buttons. Here is my XML code:

<GridLayout
android:layout_width="match_parent"
android:layout_height="165dp"
android:columnCount="3"
android:rowCount="2">

<Button
    android:id="@+id/arithmeticMeanButton"
    android:layout_columnWeight="1"
    android:layout_rowWeight="1"
    android:text="Arithmetic\nMean"
    android:textSize="18sp" />

<Button
    android:id="@+id/modeButton"
    android:layout_columnWeight="1"
    android:layout_rowWeight="1"
    android:text="Mode"
    android:textSize="18sp" />

<Button
    android:id="@+id/rangeButton"
    android:layout_columnWeight="1"
    android:layout_rowWeight="1"
    android:text="Range"
    android:textSize="18sp" />

<Button
    android:id="@+id/medianButton"
    android:layout_columnWeight="1"
    android:layout_rowWeight="1"
    android:text="Median"
    android:textSize="18sp" />

<Button
    android:id="@+id/varianceButton"
    android:layout_columnWeight="1"
    android:layout_rowWeight="1"
    android:text="Variance"
    android:textSize="18sp" />

<Button
    android:id="@+id/standardDeviationButton"
    android:layout_columnWeight="1"
    android:layout_rowWeight="1"
    android:text="Standard\nDeviation"
    android:textSize="18sp" />
</GridLayout>

As you see buttons like Arithmetic Mean or Standard Deviation occupy more space than the other buttons. What should I do so that all the buttons appear evenly in the layout?

Answer 1

Short answer

Add these attributes to all six buttons:

android:layout_width="0dp"
android:layout_height="0dp"

Longer answer

The concept of weight relates to the distribution of excess space within the parent view. In your example, the buttons that have the longest text are wider because the system is first giving each button enough width to fit its text and then giving each button an equal portion of the remaining width. Setting each button to have no intrinsic width at all will cause the system to give each of them one third of the screen width.

However, note that support for weight in GridLayout was only added in API 21, so if your app must run on older API versions, this solution will wind up just giving you a bunch of 0-size buttons.

Given that you know you want a 2x3 grid, you could implement your layout using ConstraintLayout instead. Create two vertical guidelines at 33% and 67% and one horizontal guideline at 50% and then position your buttons relative to those guidelines and the parent.

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="165dp">

    <android.support.constraint.Guideline
        android:id="@+id/guidelineColumn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.33"/>

    <android.support.constraint.Guideline
        android:id="@+id/guidelineColumn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.67"/>

    <android.support.constraint.Guideline
        android:id="@+id/guidelineRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

    <Button
        android:id="@+id/arithmeticMeanButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:textSize="18sp"
        android:text="Arithmetic\nMean"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/guidelineColumn1"
        app:layout_constraintBottom_toTopOf="@id/guidelineRow1"/>

    <Button
        android:id="@+id/modeButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:textSize="18sp"
        android:text="Mode"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/guidelineColumn1"
        app:layout_constraintRight_toLeftOf="@id/guidelineColumn2"
        app:layout_constraintBottom_toTopOf="@id/guidelineRow1"/>

    <Button
        android:id="@+id/rangeButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:textSize="18sp"
        android:text="Range"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/guidelineColumn2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@id/guidelineRow1"/>

    <Button
        android:id="@+id/medianButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:textSize="18sp"
        android:text="Median"
        app:layout_constraintTop_toBottomOf="@id/guidelineRow1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/guidelineColumn1"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <Button
        android:id="@+id/varianceButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:textSize="18sp"
        android:text="Variance"
        app:layout_constraintTop_toBottomOf="@id/guidelineRow1"
        app:layout_constraintLeft_toRightOf="@id/guidelineColumn1"
        app:layout_constraintRight_toLeftOf="@id/guidelineColumn2"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <Button
        android:id="@+id/standardDeviationButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:textSize="18sp"
        android:text="Standard\nDeviation"
        app:layout_constraintTop_toBottomOf="@id/guidelineRow1"
        app:layout_constraintLeft_toRightOf="@id/guidelineColumn2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>