Button moved down when I put a long text on it

Question

I could explain it but I think an image explains my issue better than words could ever do:

And here's my layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<include
    android:id="@+id/include1"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    layout="@layout/action_bar" />


<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="top"
    android:padding="8dip" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center" >

            <Button
                android:id="@+id/button1"
                android:layout_width="150dip"
                android:layout_height="150dip"
                android:text="This is a short text" />

            <Button
                android:id="@+id/button2"
                android:layout_width="150dip"
                android:layout_height="150dip"
                android:text="This is a long text to show how the button is moved when it has a long text on it" />
        </TableRow>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button3"
                android:layout_width="150dip"
                android:layout_height="150dip"
                android:text="Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="150dip"
                android:layout_height="150dip"
                android:text="Button" />
        </LinearLayout>
    </LinearLayout>
</ScrollView>

Answer 1

I had the same issue. The reason for that is, that the default value of baselineAligned is true, so the button is moved down to have the text on the same base line. Setting the value on the LinearLayout to false sloves the problem.

android:baselineAligned="false"

Answer 2

What is your ideal situation to happen if the text is too long?

Try adding:

android:maxLines:"1"

To the buttons.

EDIT: I don't know exactly what was causing the issue that you saw, but here is a simpler way to build your layout that seems to fix the problem you were having when run on my device.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >




<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="top"
    android:padding="8dip" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >



            <Button
                android:id="@+id/button1"
                android:layout_width="150dip"
                android:layout_height="150dip"
                android:text="This is a short text" />

            <Button
                android:id="@+id/button2"
                android:layout_width="150dip"
                android:layout_height="150dip"
                android:text="This is a long text to show how the button is moved when it has a long text on it" 
                android:layout_toRightOf="@id/button1"/>




            <Button
                android:id="@+id/button3"
                android:layout_width="150dip"
                android:layout_height="150dip"
                android:text="Button" 
                android:layout_below="@id/button1"/>

            <Button
                android:id="@+id/button4"
                android:layout_width="150dip"
                android:layout_height="150dip"
                android:text="Button" 
                android:layout_below="@id/button1"
                android:layout_toRightOf="@id/button1"/>

    </RelativeLayout>
</ScrollView>

</LinearLayout>