Button Alignment Right of Center - Android

Question

I'm having some trouble getting my button text to align correctly in my Android application. Currently, my button text is aligning with the left of the text on the center of the button, as shown:

|Whitespace|Text Here|

I have tried using gravity ="center_horizontal|center_vertical" to no avail. I have tried adding a new button to a completely separate project and this still holds. Also it does this in LinearLayouts and RelativeLayouts.

Thanks in advance for your help.

Here is one of the layout files. However it is doing it in all of them including in other projects. Also, all 3 of the buttons on this layout have the same issue.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
    android:layout_width="wrap_content"
    android:text="@string/history_delete_record"
    android:id="@+id/History_Delete_Record"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_gravity="center_horizontal|center_vertical"></Button>
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/History_Delete_Record"
    android:layout_alignLeft="@+id/History_Delete_Record"
    android:id="@+id/History_Open_Details"
    android:text="@string/history_open_record"></Button>
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/History_Cancel"
    android:text="@string/cancel"
    android:layout_below="@+id/History_Open_Details"
    android:layout_alignLeft="@+id/History_Open_Details"
    android:layout_marginTop="19dp">
</Button>
</RelativeLayout>

I would have included a pic of one of the buttons but SO will not let me post images yet. — cren90, Jan 16 '12 at 19:43

score 0 · Accepted Answer · edited May 23 '17 at 12:29

Here is a simple implementation of a button with centered text:

<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/myBtn" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:gravity="center_horizontal|center_vertical"
    android:text="Button text!" />

The problem with your code is that you are setting the width in pixels, when you should be using the xml attribute android:layout_width="wrap_content", which will wrap the button text to fit the view accordingly.

Also note that you should never set a view's width in pixels as this will not work well across different screen sizes and densities. Instead of using "px", specify the width in "dp", a density-independent unit of value. For more information on this topic, see this post.

EDIT Here is my suggested xml code that you use for your layout:

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

    <Button
        android:id="@+id/History_Delete_Record"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="@string/history_delete_record" >
    </Button>

    <Button
        android:id="@+id/History_Open_Details"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/History_Delete_Record"
        android:layout_alignRight="@+id/History_Delete_Record"
        android:layout_below="@+id/History_Delete_Record"
        android:text="@string/history_open_record" >
    </Button>

    <Button
        android:id="@+id/History_Cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/History_Open_Details"
        android:layout_alignRight="@+id/History_Open_Details"
        android:layout_below="@+id/History_Open_Details"
        android:text="@string/cancel" >
    </Button>

</RelativeLayout>

also note that the line `android:gravity="center_horizontal|center_vertical"` is not necessary here. if we took it out, the text would be drawn in the center of the view by default. — Alex Lockwood, Jan 16 '12 at 21:13
I have removed the width value as you suggest but the problem remains. Also, now the buttons cannot be the same size. — cren90, Jan 16 '12 at 21:16
oops, didn't realize you wanted the button's to be the same size. hold on one sec while I revise the xml code. — Alex Lockwood, Jan 16 '12 at 21:23
to ensure that all three buttons are the size of the largest button (the one with the most text to display), simply add the lines `android:layout_alignRight="@+id/History_Delete_Record"` and `android:layout_alignRight="@+id/History_Open_Details"` to the History_Delete_Record and History_Open_Details buttons respectively. this will cause each button to align its right side with the right side of the button above it. — Alex Lockwood, Jan 16 '12 at 21:28
The buttons are the same size now but the alignment is still right of center — cren90, Jan 16 '12 at 21:31
Ok, I just restarted Eclipse and now the formatting is correct. Thanks for your help — cren90, Jan 16 '12 at 21:33

Button Alignment Right of Center - Android

1 Answers1