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:

Alignment issues with two-line button

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"> <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>

-------------Problems Reply------------

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

Category:android Views:0 Time:2011-08-02

Related post

  • Alignment issue with button and select form elements inside the paragraph? 2011-07-08

    My markup looks like so: <p> <select></select> <input type="submit" id="submit" value="submit" name="submit" /> </p> Here's the CSS: //No specific styles for the select element nor inherited ones. #submit { background: u

  • CSS line-height alignment issues 2012-04-08

    I am designing a website, with a quote on every page. I am applying CSS to this quote to make it look the best it can and stand out. However I am having a couple of issues. CSS .quote { font-size:18pt; padding-top:50px; padding-bottom:15px; text-alig

  • IE7 CSS alignment issue 2011-03-25

    The following code is working perfect on firefox and IE8 . But on IE 7 the middle "search input text field" is not aligning properly with other two feilds , It is coming down bit .. Here is the code and thanks your help <!DOCTYPE html PUBLIC "-//W

  • Text alignment issue found in the body of Email sent with attachment using outlook.com account 2013-04-26

    Dear Professional, I would like to bring to your kind notice about a typical text alignment issue found in the body of email sent with file (any file format) attachment using www.outlook.com account. Example: Hi xyz, As per your request, please go th

  • horizontal alignment issue 2009-11-03

    On my web site, located at the top right corner I have a radio form field for bathrooms (1+, 2+, 3+, 4+). In Firefox/Chrome - these all are horizontally aligned on a single line. However, with IE6+, the bedrooms are split over 2 lines. Any ideas why

  • overflow: hidden ; causing alignment issues in firefox 2010-09-24

    I have a layout which renders perfectly fine in Webkit based browsers but in internet explorer and firefox the vertical alignment is off. The simplest example of the code is: <html> <head> <style> body { padding: 20px; background-co

  • Can Anyone Figure Out this CSS Alignment Issue? 2011-01-24

    I have a search textbox and two image buttons on a page I created with ASP.NET. When I look at the page with either IE8, Google Chrome or Opera, the textbox does not align with the two image buttons. The buttons appear higher than the textbox and I c

  • CSS Div Alignment Issue 2011-02-02

    I've got a contact form setup, with DIV's. The issue I have is when the text within the DIV overlaps, it doesnt sit in line. My HTML and CSS are as follows (HTML First) <div class="form_label"><span class="number">7.</span> ¿tienen

  • Alignment issue with css 2011-04-06

    I want the header to look alike coreLogic. But there is some alignment issues with mine. Here is the link http://dragonfly.zymichost.com/internetbrands.html. How to solve this issue?? --------------Solutions------------- Change your i-brands.css file

  • CSS/HTML: Alignment issue in IE9 + jsFiddle 2012-01-21

    I have an odd alignment issue where an extra space is being added. Here is the code: http://jsfiddle.net/aVdGE/1/ I'm using IE9 with both my project and jsFiddle. Here is a picture of the jsFiddle result and here is the result viewed not in jsFiddle

  • JQUERY Galleria css position alignment issue in Firefox. Works fine in Chrome 2012-03-06

    I just started using jquery Galleria for my website. I'm having an alignment issue with the div element gallery-container. In Chrome, it lines up fine, but in firefox, it is shifted to the right. See website: www.jasonaiconnie.com/GalleryTest.php. I

  • Empty div causing alignment issues in FF 2012-04-26

    I am facing a similar issue as following post Empty Div Causing Very Strange Behavior Answer dint help me much. &nbsp fixes alignment issue, but my html code is generated by spring, so I have to find a way to fix it via CSS. I have uploaded sampl

  • MS Publisher 2010: Alignment issue 2012-08-30

    MS Publisher 2010: Alignment issue. Why is it different when I email previewed my doc than my actual sent email? --------------Solutions------------- Because every email client will render your message a bit different. You can either simplify your me

  • In Internet Explorer 10 right-aligned numeric boxes, the "X" button hides the first character of text when typing 2014-12-17

    In Internet Explorer 10 right-aligned numeric boxes, the "X" button hides the first character of text when typing... Any help please? --------------Solutions------------- Hi Shripal, Thank you for choosing Windows 8 and thanks for providing us an opp

  • WPF Grid pixel alignment issues 2009-10-19

    I'm using the WPF Grid to align objects, and ran into a rather glaring issue regarding pixel alignment of columns. I tried to remove as many variables as possible, and managed to show the issue in this code: <Window x:Class="Test.Window1" xmlns="h

  • Muli-line button in IE 2009-11-24

    I'm currently in a horrible situation that requires me to style an input of type "button" over two lines. Having a fixed width on the button causes the text within the button to wrap onto two lines in all other browsers except IE. My question is ther

  • How to align my submit and cancel buttons(in tr) to the bottom of the table 2010-08-10

    How to align my submit and cancel buttons(in tr) to the bottom of the table? Please help me out! Thanks guys! . . . . <tr align ="center" valign="bottom"> <td align="center" valign="bottom"> <asp:ImageButton ID="btnDisable" runat="serv

  • Flex Spark: How to right align an icon on a button or tabbar button? 2010-08-18

    I would like to right align an icon on a button or tabbarbutton and keep the text left aligned in Flex 4.0 Spark. So far, I've come up with something like the following in my custom skin: <s:HGroup> <s:HGroup horizontalAlign="left"> <s

  • Multi-Line Button text in SWT/WindowBuilder? 2010-12-28

    Is there any way to force the SWT button text to span two lines, either manually in the SWT code or using the WindowBuilder GUI? I have this: I want something like this (digitally altered image to achieve this): Is it possible? How? --------------Sol

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.099 (s). 11 q(s)