How to center two views within a relative layout?

Question

The task is simple: there are two buttons and a TextView above them. All the widgets shoud be centered within the relative layout. The only one idea I have is create the third widget View and use it as a center axis for the buttons. Any ideas? A redundant layout isn't a good solution.

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

    <TextView
        android:id="@+id/tv_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/app_name" />

    <View
        android:id="@+id/view_axis"
        android:layout_width="1dp"
        android:layout_height="1dp"
        android:layout_below="@id/tv_progress"
        android:layout_centerInParent="true" />

    <Button
        android:id="@+id/button_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_progress"
        android:layout_toLeftOf="@id/view_axis"
        android:text="@string/start" />

    <Button
        android:id="@+id/button_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_progress"
        android:layout_toRightOf="@id/view_axis"
        android:text="@string/stop" />

</RelativeLayout>

Look here, this answers the question, the ticked answer is not what was initially asked. http://stackoverflow.com/questions/10904864/relativelayout-gravity-center-not-working/13280255#13280255 — joe1806772, Aug 05 '14 at 16:48

score 8 · Accepted Answer · answered Jul 08 '13 at 15:35

If I understand what you want correctly, you can put the Buttons in a LinearLayout and center that

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

<TextView
    android:id="@+id/tv_progress"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:text="@string/app_name" />
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/tv_progress">
<Button
    android:id="@+id/button_start"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/start" />

<Button
    android:id="@+id/button_stop"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/stop" />
 </LinearLayout>

I'm not sure if that's what you meant by a "redundant layout" but doing this is fine if it gives you what you want.

sure, I can. But it's a redundant `LinearLayout`. After I had read [Android layout tricks #3](http://android-developers.blogspot.ru/2009/03/android-layout-tricks-3-optimize-by.html) and [Android layout tricks #1](http://android-developers.blogspot.ru/2009/02/android-layout-tricks-1.html), I began building layouts more carefully. — Maksim Dmitriev, Jul 08 '13 at 15:42
Using it in this way isn't going to hurt you. Maybe if its in a `ListView` but if not this isn't a problem. You don't want too many unnecessary nested `layouts` but in this case it is the easiest way I see to do it. So it isn't unnecessary and there is only one nested `layout` — codeMagic, Jul 08 '13 at 15:46
thanks! I agree, the nested `LinearLayout` is OK in this case. — Maksim Dmitriev, Jul 09 '13 at 09:01

score 7 · Answer 2 · answered Jul 12 '16 at 13:31

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

    <Spinner
        android:id="@+id/sp_rooms"
        android:layout_toLeftOf="@id/space"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Space
        android:id="@+id/space"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/btn_registration"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/space"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

Ken Wolf · Answer 3 · 2013-07-08T15:59:03.597

0

This will vertically and horizontally center the whole block consisting of the textview + buttons

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_centerInParent="true">

        <TextView
            android:id="@+id/tv_progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name" />

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

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

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

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

edited Jul 08 '13 at 15:59

answered Jul 08 '13 at 15:39

Ken Wolf

23,133
6
63
84

1

You are adding an unnecessary `LinearLayout` this way – codeMagic Jul 08 '13 at 15:46
How would you center the whole block? With your way the Textview will be centered and the buttons will appear below them. – Ken Wolf Jul 08 '13 at 15:51
The `Button`s will appear centered below the `TextView` which is centered. I think this is what the OP is going for but could be wrong. I haven't had a chance to compare the two `layout`s yet but they should have the same effect – codeMagic Jul 08 '13 at 15:53
Sure, horizontally. I posted a solution if they want the whole block (textview and buttons) centered horizontally and vertically. With your method the vertical "weighting" will be off if you see what I mean. Visually it will be heavier in the bottom half of the screen than the top as the textview will hit the center vertical spot and the buttons will appear below it. – Ken Wolf Jul 08 '13 at 15:54
1

Touche, my friend :) I guess it depends on exactly what exactly is wanted – codeMagic Jul 08 '13 at 15:56

How to center two views within a relative layout?

3 Answers3