How to horizontally center a button in a RelativeLayout?

Question

Having searched for a solution first (for example here) I came upon the following solution:

android:layout_centerHorizontal="true"

which does not work for me (see third button). Below is the full example code of three buttons in a RelativeLayout, in which the middle button should be centered (horizontally and vertically, which the button is), and the two other buttons are supposed to be symmetrical placed on the screen, horizontally centered. However, they are not, using the suggested solution I found many times.

So what do I miss?

Full code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/checkscreen"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.impyiablue.checkpoint.CheckScreen">

    <RelativeLayout
        android:id="@+id/content"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginTop="20dp"
        android:layout_weight="1"
        android:orientation="vertical">


        <Button
            android:id="@+id/check_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/check_next"
            android:textSize="20sp"
            android:padding="25dip"
            android:layout_alignParentTop="true"
            android:layout_alignLeft="@+id/check_now"
            android:layout_alignStart="@+id/check_now"
            android:layout_marginTop="50dp" />

        <Button
            android:id="@+id/check_now"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/check_now"
            android:padding="70dip"
            android:textSize="20sp" />

        <Button
            android:id="@+id/check_redo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="@string/check_redo"
            android:textSize="20sp"
            android:padding="25dip"
            android:layout_alignParentBottom="true"
            android:layout_alignLeft="@+id/check_now"
            android:layout_alignStart="@+id/check_now"
            android:layout_marginBottom="50dp" />

    </RelativeLayout>


</LinearLayout>

May be `android:layout_alignLeft` conflict with `android:layout_centerHorizontal`. If you want it center horizontal why still use layout alignment? — nhoxbypass, Oct 15 '17 at 07:30

himel · Accepted Answer · 2017-10-15T07:31:16.837

4

`

<Button
            android:id="@+id/check_redo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="@string/check_redo"
            android:textSize="20sp"
            android:padding="25dip"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="50dp" />

` you can try to use RelativeLayout as your root layout ,this will make things easier to manage.

edited Oct 15 '17 at 07:31

answered Oct 15 '17 at 07:25

himel

500
5
14

that's because you defined some attributes to other buttons ,i.e you used Relative positioning, remove them it will work, – himel Oct 15 '17 at 07:29
– himel Oct 15 '17 at 07:30
Ah I had the 'alignLeft' attributes to have them align to the left. Ok that makes sense. Thank you – Alex Oct 15 '17 at 07:32

score 0 · Answer 2 · answered Oct 15 '17 at 07:31

I would recommend you to use weightSum and layout_weight property to create 3 buttons horizontally and only display the middle one by applying INVISIBLE visibility on the other 2 (first and last)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/checkscreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" android:weightSum="9">
<Button android:layout_width="wrap_content"
android:layout_height="match_parent" android:layout_weight="3" android:visibility="invisible"></Button>
<Button android:layout_width="wrap_content"
android:layout_height="match_parent" android:layout_weight="3" android:visibility="visible"></Button>
<Button android:layout_width="wrap_content"
android:layout_height="match_parent" android:layout_weight="3" android:visibility="invisible"></Button>
</LinearLayout>

Please add any necessary parameters this code is just to demonstrate the idea.

score 0 · Answer 3 · answered Oct 15 '17 at 07:40

Use android:layout_gravity=center on that button . Example -

<Button
            android:id="@+id/check_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/check_next"
            android:textSize="20sp"
            android:padding="25dip"
            android:layout_gravity=center
            android:layout_marginTop="50dp" />

Or to center alignment of all subviews of a parentview or layout, just use android:gravity=center on parent view or layout

hhj8i · Answer 4 · 2017-10-15T07:50:41.310

Layouts like this should be made using LinearLayout because it supports weight while RelativeLayout doesn't! Fully working and tested layout file in Android Studio:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/checkscreen"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="layout_centerHorizontal"
    android:gravity="center"
    android:orientation="vertical">


    <Button
        android:id="@+id/check_cancel"
        android:layout_width="wrap_content"
        android:layout_height="0sp"
        android:layout_marginTop="50dp"
        android:layout_weight="1"
        android:padding="25dip"
        android:text="check_next"
        android:textSize="20sp" />

    <Button
        android:id="@+id/check_now"
        android:layout_width="wrap_content"
        android:layout_height="0sp"
        android:layout_weight="1"
        android:padding="70dip"
        android:text="check_now"
        android:textSize="20sp" />

    <Button
        android:id="@+id/check_redo"
        android:layout_width="wrap_content"
        android:layout_height="0sp"
        android:layout_marginBottom="50dp"
        android:layout_weight="1"
        android:padding="25dip"
        android:text="check_redo"
        android:textSize="20sp" />


</LinearLayout>

How to horizontally center a button in a RelativeLayout?

4 Answers4