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:

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

How big are the buttons? Will they fit side by side like you are wanting them? — prolink007, Nov 15 '10 at 23:32
Yes, this is no problem at all. Currently they appear side by side but they stick to the left side. — Yves, Nov 15 '10 at 23:36
Oh i see what your problem is, i missread the problem. I thought you were saying you could not get them to line up horizontally. — prolink007, Nov 15 '10 at 23:38

score 105 · Accepted Answer · edited Dec 22 '11 at 23:28

105

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>

edited Dec 22 '11 at 23:28

Jacob Marble

28,555
22
67
78

answered Nov 16 '10 at 11:59

printminion

2,988
1
26
30

brilliant answer! looks just like those apps on the market out there. Thanks a mil! – evandrix Jul 14 '11 at 23:26
8

the secret sauce here is the `android:layout_weight="1.0"` Specify this for each button within your horizontal LinearLayout and all the buttons become equally sized. – Someone Somewhere Dec 16 '11 at 08:39
Well that's perfect, can we do it without using the inner linear layout. Since I have similar issue, but 6 to 7 lines with 2 text views each. The activity renders very slowly, someone told me if I can reduce the layout tree, than it might render faster. – Feb 15 '12 at 11:11
1

This creates a `LinearLayout` when it's not necessary. I find @RHughes's solution more elegant. – Benoit Duffez Feb 21 '13 at 14:56
Another ingredient of the secret souce here is to set the width of the buttons to ´0.0dip´. – Moonlit Nov 06 '14 at 12:47
when it has be center why there is a asumption like it has to be spread instead of packed? suppose if we have fixed size like 64dpx64dp and want two views to be center then solution like this doesn't make sence. https://stackoverflow.com/questions/53795157/fixed-size-textview-horizontally-center-works-in-xml-but-not-programatically – kiranking Dec 16 '18 at 21:17

score 31 · Answer 2 · edited Mar 06 '13 at 10:35

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:

screen shot of the result

This one doesn't work for me, for some reason. I am just using a `RelativeLayout` inside a `ScrollView`. — Kostas Andrianos, Apr 11 '17 at 19:04

score 16 · Answer 3 · answered Jan 26 '11 at 17:38

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>

Then how to stuck them on bottom of screen? TableRow wont work for that — Yousha Aleayoub, Sep 24 '16 at 20:12
@YoushaAleayoub use android:layout_alignParentBottom="true" on the tablerow for that — Adam Diament, Nov 24 '21 at 09:20

score 6 · Answer 4 · answered Jan 05 '12 at 11:34

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>

score 5 · Answer 5 · answered Nov 11 '12 at 09:59

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>

score 5 · Answer 6 · answered Nov 16 '10 at 00:56

5

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.

answered Nov 16 '10 at 00:56

adamp

28,862
9
81
69

worked for me... to align TWO Elements in a relative layout... where you want the two elements to be centered around the center line....put in a horizontal linear with gravity = center and then put your controls inside that linear layout – lepert Sep 20 '13 at 01:18

score 3 · Answer 7 · answered Jun 06 '12 at 04:07

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>

score 3 · Answer 8 · edited Jan 28 '20 at 18:27

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>

score 3 · Answer 9 · answered Aug 06 '13 at 08:12

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>

enter image description here

score 3 · Answer 10 · answered Dec 30 '16 at 07:46

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>

score 2 · Answer 11 · answered May 21 '15 at 17:52

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).

This is only for API >= 14. – Toni Gamez Jul 15 '16 at 11:00 — Toni Gamez, Jul 15 '16 at 11:00

score 2 · Answer 12 · edited Jun 09 '11 at 22:36

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>

score 1 · Answer 13 · edited Mar 17 '17 at 08:12

1

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.

edited Mar 17 '17 at 08:12

aleksandrbel

1,422
3
20
38

answered Nov 16 '10 at 06:19

Shaireen

3,703
5
28
40

score 1 · Answer 14 · answered Nov 15 '21 at 10:56

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>

Rmilligan2372 · Answer 15 · 2012-01-06T11:19:56.520

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>

score 1 · Answer 16 · answered Feb 23 '12 at 13:02

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>

score 0 · Answer 17 · answered Jul 21 '16 at 19:24

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>

score 0 · Answer 18 · answered May 26 '17 at 08:20

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>

score 0 · Answer 19 · answered Feb 20 '18 at 11:25

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>

Center two buttons horizontally

19 Answers19

Linked