CODEWITHSUNDEEP
androidxmlbuttonlayout
MotoRidingMelon
MotoRidingMelon

Reputation: 2537

Button Margin Changes with Button text content

Let's start with the fun part, here's the graphic of the trouble. Horizontally, everything is beautiful.

Sunk button The middle button, I'd like to to be aligned with the other three. Here are the basics:

  1. overall, it's a relativelayout
  2. inside this relativelayout, it's a horizontal linear layout, containing the three buttons
  3. the "sinking" of the middle button is 100% correlated with it being a dual line of text, if I change it to a single line, it aligns properly
  4. the specified height of the buttons has nothing to do with the sinking, even at more than double their current size (from current 70 to 170) the exact same behavior (and size of behavior) is displayed
  5. The "custom_button" background has no effect, if I change them all to no background, stock looking buttons, the same positioning occurs

And here's the XML (of just the linearlayout within the relativelayout):

<LinearLayout 
android:id="@+id/wideButtons"
android:layout_below="@+id/buttonClockFinish"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:orientation="horizontal">

    <Button
    android:id="@+id/buttonLog"
    android:layout_weight="1"
    android:layout_height="70dp"
    android:padding="0dp"
    android:layout_marginRight="3dp"
    android:layout_width="fill_parent"
    android:background="@drawable/custom_button"
    android:text="View Log" />

    <Button
    android:id="@+id/buttonLocation"
    android:layout_weight="1"
    android:layout_height="70dp"
    android:padding="0dp"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:layout_width="fill_parent"
    android:background="@drawable/custom_button"
    android:text="Location\nD1-RS" />

    <Button
    android:id="@+id/buttonHelp"
    android:layout_weight="1"
    android:layout_height="70dp"
    android:padding="0dp"
    android:layout_marginLeft="3dp"
    android:layout_width="fill_parent"
    android:background="@drawable/custom_button"
    android:text="Help" />

</LinearLayout>

So why on earth is it not aligning?

Upvotes: 3

Views: 968

Answers (1)

MotoRidingMelon
MotoRidingMelon

Reputation: 2537

I was just about to post this question, and did one final experiment. I added a THIRD line of text to the button. This pushed it down even further. But what I realized it had in common was that the text of the top line of the middle button remained perfectly aligned with the text of the two buttons to either side of it.

So it wasn't that it was having trouble with an interior margin, unable to squish the text against the top border. The alignment was of the TEXT, not the button graphic. All along I had thought that there was some mystery :padding that I was not nulling out, but with three lines of button text it was quite happy to have just about 1dp or so of padding.

The solution was to add

android:layout_gravity="center_vertical"

to that button. I added it to the rest of them too, just for consistency.

Lesson: When you think things aren't aligning, perhaps they actually are, but maybe you're looking at the wrong thing.

Upvotes: 8

Related Questions