Center two buttons horizontally

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:

<LinearLayout android:orientation="horizontal" android:layout_below="@id/radioGroup"
              android:layout_width="wrap_content" android:layout_height="wrap_content"
              android:layout_gravity="center_horizontal|center">
    <Button
            android:id="@+id/allow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/radioGroup"
            android:layout_gravity="center_horizontal"
            android:drawableLeft="@drawable/accept_btn"
            android:text="Allow"/>
    <Button
            android:id="@+id/deny"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/allow"
            android:layout_below="@id/radioGroup"
            android:layout_gravity="center_horizontal"
            android:drawableLeft="@drawable/block_btn"
            android:text="Deny"/>
</LinearLayout>

Unfortunately they are still aligned to the left side. Any help is appreciated! Yves

Edit:

Unfortunately none of the comments or suggestions work so far. That's why I try to provide a simplified, full layout now with a RelativeLayout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:layout_centerHorizontal="true">
    <TextView android:text="@+id/TextView01" android:id="@+id/TextView01"
          android:layout_width="wrap_content" android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/allow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/TextView01"
        android:text="Allow"/>
    <Button
        android:id="@+id/deny"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/allow"
        android:layout_alignTop="@id/allow"
        android:text="Deny"/>
</RelativeLayout>

I've tried all combinations of attributes in the LinearLayout and on the Button elements without luck. Any other ideas?

This is my solution:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:layout_centerHorizontal="true">

    <TextView
        android:text="@+id/SomeText"
        android:id="@+id/TextView01"
        android:layout_width="wrap_content" android:layout_height="wrap_content" />

    <LinearLayout
        android:orientation="horizontal"
        android:background="@android:drawable/bottom_bar"
        android:paddingLeft="4.0dip"
        android:paddingTop="5.0dip"
        android:paddingRight="4.0dip"
        android:paddingBottom="1.0dip"
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:layout_below="@+id/TextView01">

        <Button
            android:id="@+id/allow"
            android:layout_width="0.0dip" android:layout_height="fill_parent"
            android:text="Allow"
            android:layout_weight="1.0" />

        <Button
            android:id="@+id/deny"
            android:layout_width="0.0dip" android:layout_height="fill_parent"
            android:text="Deny"
            android:layout_weight="1.0" />

    </LinearLayout>
</RelativeLayout>

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:

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>

If you re searching for a fast fully RelativeLayout solution, the following works well. The dummy View element is invisible and centered horizontal. Both buttons are aligned either left or right.

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.be.android.stopwatch"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal">

<View android:id="@+id/dummy"  android:visibility="visible" android:layout_height="0dip" android:layout_width="1dip" android:background="#FFFFFF" android:layout_centerHorizontal="true"/>

<ImageButton android:id="@+id/button1" android:layout_height="25dip" android:layout_alignTop="@+id/dummy" android:layout_toLeftOf="@+id/dummy" android:layout_width="50dip"/>

<ImageButton android:id="@+id/button2" android:layout_height="25dip" android:layout_alignTop="@+id/dummy"  android:layout_toRightOf="@+id/dummy"   android:layout_width="50dip"/>

</RelativeLayout>

Attributes named android:layout_foo are LayoutParams - arguments to the View's parent. Try setting android:gravity="center" on the LinearLayout instead of android:layout_gravity. One affects how the LinearLayout will lay out its children within itself, the other affects how the LinearLayout's parent should treat it. You want the former.

I center two buttons in this way:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/one" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/two" />
    </LinearLayout>
</LinearLayout>

I've wrapped two horizontal LinearLayout's as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="horizontal"
	android:gravity="center"
	android:layout_width="fill_parent"
   	android:layout_height="wrap_content" >

	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
		android:orientation="horizontal"
    	android:layout_width="wrap_content"
   		android:layout_height="wrap_content" >

your UI widgets here

</LinearLayout> </LinearLayout>

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>

Use a Relatie Layout instead of Linear and set gravity as android:gravity="center".

Relative layouts give better performance and scale better if you run your application of devices of different sizes.

Following as an example XML and resulting UI:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@Color/custom1"
        android:gravity="center" >

        <TextView
            android:id="@+id/tv1"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:background="@color/Red"
            android:gravity="center"
            android:layout_marginRight="80dp"
            android:text="Text11111" />

        <TextView
            android:id="@+id/tv2"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_toRightOf="@id/tv1"
            android:background="@color/Yellow"
            android:gravity="center"
            android:text="Text22222" />
    </RelativeLayout>

This is my solution using relativeLayout:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <Button
            android:id="@+id/reject_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/reject"/>

        <Button
            android:id="@+id/accept_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/accept"
            android:layout_toRightOf="@id/reject_btn"/>
    </RelativeLayout>

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>

The most elegant way to go about this without introducing redundant components or view groups is to use spacing. You can use space elements with layout_weight within a linear layout to get the effect you want:

<LinearLayout android:orientation="horizontal" android:layout_below="@id/radioGroup"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|center">
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
        <Button
            android:id="@+id/allow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/radioGroup"
            android:drawableLeft="@drawable/accept_btn"
            android:text="Allow"/>
        <Button
            android:id="@+id/deny"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/allow"
            android:layout_below="@id/radioGroup"
            android:drawableLeft="@drawable/block_btn"
            android:text="Deny"/>
        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

Giving both space elements an equal layout_weight (doesn’t matter what the weights are, it just takes them as a ratio out of the totals of all weights) causes the space elements to take up the extra space that’s available. So it forces the buttons to the middle, which don’t have any layout_weight assigned to them, so they don’t take any extra space, just what they are explicitly given (the size of the images).

Use RelativeLayout instead of LinearLayout and set its android_layout:gravity="center_horizontal" or a very non optimal way is to set the android_padding of LinearLayout with pixel values aligning it in center.

I feel your pain, I had to adjust things a bit and got this one to work.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
 
 <Button 
     android:id="@+id/Button01"
     android:layout_alignParentLeft="true"
     android:layout_width="75dp"
     android:layout_height="40dp"
     android:layout_marginTop="15dp"
     android:layout_marginLeft="60dp"
     android:text="No" />
 
 <Button 
     android:id="@+id/Button02"
     android:layout_alignParentRight="true"
     android:layout_width="75dp"
     android:layout_height="40dp"
     android:layout_marginTop="15dp"
     android:layout_marginRight="60dp"
     android:text="Yes" />
 
 <TextView
    android:id="@+id/centerPoint"
    android:layout_toRightOf="@id/Button01"
    android:layout_toLeftOf="@id/Button02"
    android:text=""
    android:layout_width="0dip"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
	/>
 
</RelativeLayout>

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>

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>

this work for me. simple and easy.

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    >
                        <RelativeLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content">
                                <Button
                                    android:id="@+id/btn_one"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="Button One"
                                    />
                                <Button
                                    android:id="@+id/btn_two"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="Button Two"
                                    android:layout_toRightOf="@id/btn_one"
                                    />
                        </RelativeLayout>
                </LinearLayout>
        </RelativeLayout>

Try having a view in the middle with zero height and width and positioning it at center and positioning the two buttons to its right and left.

Have a look, this is part of an app i built:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

<View
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_centerInParent="true"
    android:id="@+id/view_in_middle">
</View>

<Button

    android:layout_width="120dp"
    android:layout_height="wrap_content"
    android:id="@+id/yes_button"
    android:layout_marginRight="24dp"
    android:layout_toLeftOf="@id/view_in_middle"
    android:text="Yes" />

<Button

    android:layout_width="120dp"
    android:layout_height="wrap_content"
    android:id="@+id/no_button"
    android:text="No"
    android:layout_marginLeft="24dp"
    android:layout_toRightOf="@id/view_in_middle"
  />

</RelativeLayout>

Try this, copy and paste and modify the code.

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

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="40dp"   />

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

</LinearLayout>