Center two buttons horizontally

Question

I try to arrange two buttons (with images on them which work fine) next to each other and to center them horizontally. That\'s what I have so far:

Answer 1

This seems like a very old question, but I had the same problem too. I had to place two buttons next to each other in the middle of the screen (horizontally). I ended up placing the two buttons inside a linear layout and placing the linear layout in a relative layout with its gravity set to center.

---

[UPDATE] I found an even simpler solution:

<LinearLayout android:layout_height="wrap_content"
              android:layout_width="wrap_content"
              android:layout_centerHorizontal="true">

    <Button android:text="status"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"/>

    <Button android:text="fly"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"/>

</LinearLayout>

---

This is what I had before:

<RelativeLayout android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:id="@+id/actionButtons"
                android:layout_below="@id/tripInfo"
                android:gravity="center">

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

        <Button android:text="status"
                android:layout_height="wrap_content" 
                android:layout_width="wrap_content" />

        <Button android:text="fly"
                android:layout_height="wrap_content" 
                android:layout_width="wrap_content" />
    </LinearLayout>

</RelativeLayout>

Answer 2

Below Code will align two buttons in centre Horizontal, no dp is given. So this will work in all orientation and all screens.

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Change password"
        android:id="@+id/change_pwd_button"
        android:layout_gravity="center_horizontal"
        android:background="@android:color/holo_blue_dark"
        android:textColor="@android:color/white"


        android:padding="25px"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Close"
        android:id="@+id/change_pwd_close_btn"
        android:layout_gravity="center_horizontal"
        android:background="@android:color/holo_blue_dark"
        android:textColor="@android:color/white"
        android:layout_marginLeft="20dp"
        />
</LinearLayout>

Answer 3

I know you've already found a solution, but you might also find this useful. The empty TextView used as the center reference can double as padding between the buttons by increasing the dip setting. It also handles screen orientation changes well.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:text="Left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/centerPoint" />

    <TextView
        android:id="@+id/centerPoint"
        android:text=""
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" />

    <Button
        android:id="@+id/button2"
        android:text="Right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/centerPoint" />

</RelativeLayout>

Screenshot of the result:

Answer 4

This worked pretty well for me:

<RadioGroup
    android:id="@+id/ratingRadioGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center_horizontal">
    <RadioButton
        android:id="@+id/likeButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="@string/like"
        android:paddingRight="20pt"/>
    <RadioButton
        android:id="@+id/dislikeButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/dislike" />
</RadioGroup>

Answer 5

I dont know if you actually found a good answer to this question ever but I achieved it by making a TableRow, setting the width to fill_parent and setting the gravity to center then placing the two buttons inside of it.

    <TableRow android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:gravity="center">
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test" android:width="100dip"></Button>
    <Button android:layout_width="wrap_content" 
        android:text="Test" android:layout_height="wrap_content"
        android:width="100dip"></Button>
</TableRow>

Answer 6

This is what I did, I wrapped a linear layout with a linear layout that has it's gravity set to center_horizontal. Then I set the wrapped linear layout width to the pixel width of the buttons combined. In this example the buttons are 100px wide, so I set the wrapped linear layout to 200px.

Example xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal">
    <TextView android:layout_width="fill_parent"
        android:layout_height="200px"
        android:text="This is some text!"
        android:background="#ff333333" />
    <LinearLayout android:layout_height="wrap_content"
        android:id="@+id/linearLayout1"
        android:layout_width="200px">
        <Button android:id="@+id/button1"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:layout_width="100px">
        </Button>
        <Button android:id="@+id/button2"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_width="100px">
        </Button>
    </LinearLayout>
</LinearLayout>