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

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>

Answer 2

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>

Answer 3

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>

Answer 4

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.

Answer 5

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

Answer 6

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>