Why multiline buttons in gridlayout have strange top margin?

Question

I have this layout:

<LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FF2c3e50">

    <FrameLayout
            android:layout_width="300px"
            android:layout_height="5px"
            android:background="#FF4a80c2"
            >
    </FrameLayout>


    <HorizontalScrollView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:overScrollMode="never">

        <GridLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:rowCount="2"
                android:orientation="vertical"
                android:padding="50px">

            <Button
                    android:layout_marginBottom="20px"
                    android:layout_marginRight="20px"
                    android:lines="2"
                    android:textColor="#fff3f3f3"
                    android:layout_width="165px"
                    android:layout_height="165px"
                    android:text="zrušit bez zápisu"
                    android:gravity="center"
                    android:textStyle="bold"
                    android:padding="10px"
                    android:textSize="24px"
                    android:background="@drawable/cancel_button"/>

            <Button
                    android:layout_marginBottom="20px"
                    android:layout_marginRight="20px"
                    android:lines="2"
                    android:textColor="#fff3f3f3"
                    android:layout_width="165px"
                    android:layout_height="165px"
                    android:text="odchod"
                    android:gravity="center"
                    android:textStyle="bold"
                    android:textSize="24px"
                    android:padding="10px"
                    android:background="@drawable/type_button_default"/>

            <Button
                    android:layout_marginBottom="20px"
                    android:lines="2"
                    android:layout_marginRight="20px"
                    android:textColor="#fff3f3f3"
                    android:layout_width="165px"
                    android:layout_height="165px"
                    android:text="nemoc"
                    android:padding="10px"
                    android:gravity="center"
                    android:textStyle="bold"
                    android:textSize="24px"
                    android:background="@drawable/type_button"/>

            <Button
                    android:layout_marginBottom="20px"
                    android:layout_marginRight="20px"
                    android:lines="2"
                    android:textColor="#fff3f3f3"
                    android:layout_width="165px"
                    android:layout_height="165px"
                    android:text="lékař"
                    android:padding="10px"
                    android:gravity="center"
                    android:textStyle="bold"
                    android:textSize="24px"
                    android:background="@drawable/type_button"/>

            <Button
                    android:layout_marginBottom="20px"
                    android:layout_marginRight="20px"
                    android:lines="2"
                    android:textColor="#fff3f3f3"
                    android:layout_width="165px"
                    android:layout_height="165px"
                    android:padding="10px"
                    android:text="pracovní cesta"
                    android:gravity="center"
                    android:textStyle="bold"
                    android:textSize="24px"
                    android:background="@drawable/type_button"/>

            <Button
                    android:layout_marginBottom="20px"
                    android:lines="2"
                    android:layout_marginRight="20px"
                    android:textColor="#fff3f3f3"
                    android:layout_width="165px"
                    android:layout_height="165px"
                    android:padding="10px"
                    android:text="školení"
                    android:gravity="center"
                    android:textStyle="bold"
                    android:textSize="24px"
                    android:background="@drawable/type_button"/>

            <Button
                    android:layout_marginBottom="20px"
                    android:lines="2"
                    android:layout_marginRight="20px"
                    android:textColor="#fff3f3f3"
                    android:layout_width="165px"
                    android:layout_height="165px"
                    android:padding="10px"
                    android:text="neplacené volno"
                    android:gravity="center"
                    android:textStyle="bold"
                    android:textSize="24px"
                    android:background="@drawable/type_button"/>

            <Button
                    android:layout_marginBottom="20px"
                    android:lines="2"
                    android:layout_marginRight="20px"
                    android:textColor="#fff3f3f3"
                    android:layout_width="165px"
                    android:layout_height="165px"
                    android:text="volno"
                    android:padding="10px"
                    android:gravity="center"
                    android:textStyle="bold"
                    android:textSize="24px"
                    android:background="@drawable/type_button"/>

            <Button
                    android:layout_marginBottom="20px"
                    android:lines="2"
                    android:layout_marginRight="20px"
                    android:textColor="#fff3f3f3"
                    android:layout_width="165px"
                    android:layout_height="165px"
                    android:padding="10px"
                    android:text="náhradní volno"
                    android:gravity="center"
                    android:textStyle="bold"
                    android:textSize="24px"
                    android:background="@drawable/type_button"/>

        </GridLayout>

    </HorizontalScrollView>


</LinearLayout>

When I have multiline buttons in grid layout, they are strangely positioned. Look at the attached image.

Can anyone tell what happens here?

Answer 1

I found where is the problem. All buttons must have layout_gravity as well. All what is needed is to add android:layout_gravity="center" to all buttons.

Answer 2

I had the same issue inside a LinearLayout. A colleague of mine pointed out that this is Android trying to align the baseline of the text. To disable this behavior, use android:baselineAligned="false" on the parent layout.