Question

I have a linear layout with several buttons in it. The button images are all the same size and have the same attributes… except for one button. This one button has a smaller font size. All the buttons except for this one are in a perfect line exactly the way I want. For some reason, the button with the smaller font appears a little lower on the screen than the other buttons. I’m having a hard time wrapping my head around the idea of a button that requires less space taking up additional space.

Might someone give me a hint on what to read up on?

EDIT

Here’s main.xml (seems like SO filters some of it, all the important stuff is here…)

<ScrollView android:id="@+id/scroll"
            android:layout_width="match_parent"
            android:layout_height="300px">

    <TextView
            android:id="@+id/the_text_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:typeface="monospace"
            android:textSize="9pt"
            android:background="@color/paper"
            android:paddingLeft="20dp"
            android:paddingBottom="20dp"
            android:textColor="@color/type"
            />
</ScrollView>

<LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <Button style="@style/ASR33_button"
            android:tag="Y"
            android:text="Y"
            />

    <Button style="@style/ASR33_button"
            android:tag="N"
            android:text="N"
            />

    <Button style="@style/ASR33_button"
            android:tag="E"
            android:text="E"
            />

    <Button style="@style/ASR33_button"
            android:tag="W"
            android:text="W"
            />

    <Button style="@style/ASR33_button"
            android:tag="S"
            android:text="S"
            />

    <Button style="@style/ASR33_button"
            android:tag="F"
            android:text="F"
            />

    <Button style="@style/ASR33_button"
            android:tag="R"
            android:text="R"
            />

    <Button style="@style/ASR33_button"
            android:tag="M"
            android:text="M"
            />

    <Button style="@style/ASR33_button"
            android:tag="T"
            android:text="T"
            />

    <Button style="@style/ASR33_button"
            android:onClick="onEnterButtonClicked"
            android:textSize="6pt"
            android:text="RE-\nTURN"
            />

    <Button style="@style/ASR33_button"
            android:tag="U"
            android:text="U"
            />
</LinearLayout>

<LinearLayout
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <TextView
            android:id="@+id/instructions"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="9pt"
            android:paddingLeft="10dp"
            android:typeface="normal"
            android:text="Commands: (Y)es, (N)o, (N)orth, (E)ast, (W)est, (S)outh, (M)ap, (ST)atus, (Fight), (R)un, (SU)icide.  All commands must be followed by RETURN."
            />

</LinearLayout>

The one that’s wonky is the 2nd from the bottom, with the different onclick event. The style has 11pt for the character size. If I use it (and a 1 letter button name, like the others) it behaves. But that’s not what the ASR33 ‘enter’ key has on it. So if I reduce the font size to say 6 pt, the weirdness happens.

The style can be seen here.

Again, just reading references or ideas please, I can figure it out if I have a word or two to search on. It’s hard to know what you don’t know…

RESOLUTION

Anurag has it right, see his answer below. Here’s an excerpt of the updated LinearLayout:

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:baselineAligned="false">

Answer 1

maybe the re sizing has happened due to the wrap_content property of your button. so what you should do is have a fixed height to the linear layout holding all the buttons while its with is set to fill parents.

and inside the linear layout let individual buttons have height set to wrap content which will give all the buttons the same height as that of the linear layout and also set the attribute android:adjustViewBounds="true" for the small button. this attribute will resize your image button to maintain the aspect ratio. i hope this helps.

EDIT:
So here is the solution to your problem, something that was caused due to the base alignment property of the linear layout. 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. set android:baselineAligned=”false” on the LinearLayout. This worked perfectly on my HTC.