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?

Margetts

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.

Margetts

I have to admit that this is not completely right solution, because of the margin is still there, only thing changed is the margin is centered now and so it's not visible. – Pejorative

The gravity actually worked for me. Don't get why it works though. – Skolnik

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.

Underplay