Alignment issues with two-line button

I'm trying to figure out why a two-line button in my application is being shifted a couple of pixels lower than the other buttons:

This does not happen if I shorten the text on the third button until it fits on one line, which tells me it has something to do with the line break. Adding android:layout_gravity="top" to the button's layout doesn't seem to help. Any ideas what might be causing this one?

Edit: Here's the layout XML file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              android:gravity="center_horizontal"
              android:padding="10dip"
              android:layout_width="wrap_content">

开发者_JAVA百科  <TextView android:id="@+id/error_text"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dip"
            android:text="Place holder"
            android:layout_width="wrap_content"
            android:textSize="17dip"/>

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center_horizontal"
                android:padding="10dip"
                android:layout_width="wrap_content">
    <Button android:id="@+id/ok_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ok"
            android:textColor="@color/black"
            android:textStyle="bold"/>

    <Button android:id="@+id/cancel_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dip"
            android:text="@string/cancel_login"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:visibility="gone"/>

    <Button android:id="@+id/third_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dip"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:visibility="gone"/>
  </LinearLayout>
</LinearLayout>

A horizontal LinearLayout aligns the baselines of all its child controls by default. So the first line of text in your multi-line button is vertically aligned with the single line of text in the other buttons.

To disable this behaviour, set android:baselineAligned="false" on the LinearLayout.

Having had a look at your layout (on a device), I am not sure why it exhibits this strange behaviour. When debugging layouts I like to put background colours on Views so you can see more clearly the space they are taking up. If we remove all the padding, we see that the buttons simply don't sit on the same top line. If we apply android:gravity="center_vertical" to the containing LinearLayout we see that the first two buttons are centered but the last one sits snugly with the top edge.

One solution to this is just to rewrite the inner container using a RelativeLayout:

<RelativeLayout
            android:layout_height="wrap_content"
            android:padding="10dip"
            android:layout_width="wrap_content">

<Button android:id="@+id/ok_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ok"
        android:textColor="@color/black"
        android:textStyle="bold"/>

<Button android:id="@+id/cancel_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dip"
        android:layout_toRightOf="@id/ok_button"
        android:text="@string/cancel_login"
        android:textColor="@color/black"
        android:textStyle="bold"
        android:visibility="gone"/>

<Button android:id="@+id/third_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dip"
        android:layout_toRightOf="@id/cancel_button"
        android:textColor="@color/black"
        android:textStyle="bold"
        android:visibility="gone"/>
</RelativeLayout>

From my testing, by using a RelativeLayout you can get all of the buttons to sit on the same top edge.

I ran your code with the following change and it worked fine: Change the android:gravity in the horizontal linear layout from "center_horizontal" to "center".

I have add the following lines to your third button in XML and make it's height to "fill_parent" :

android:paddingTop="4dp"
android:layout_height="fill_parent"

For me, 4dp worked fine you can check if you need more or less.

Make these changes and your button will be fine, like its fellows :-)

write android:layout_height="fill_parent" for all three buttons