Android RelativeLayout alignCenter from another View

Question

I have a RelativeLayout with two children that are also both RelativeLayouts containing a few buttons and things. These children layouts are not centered in my main layout, and the main layout does contain some other things off the the sides of these two. I want the first one to be on top of the second one. That is easy enough, just use android:layout_below="@+id/firstLayout" in the second one. But I also want the second one to be aligned on the center of the first one. By that I mean I want the second layout to find the center of the first one, and align itself so that its center is in the same x position. I see alignLeft, alignRight, alignTop, and alignBaseline, but no center. Is this possible to do without having to hard code a margin to scoot the second layout over some?

Here is a rough example of what I am trying to end up with, the blue bar would be the first layout, and the red box would be the second layout. I know that I could wrap them both in another RelativeLayout that has sizes equal to "wrap_content" and then use centerHorizontal="true" for the second one. But I would really rather leave both as children of my main layout (I would have to make some changes to the way certain parts of my app work if I make them children of a separate layout. Which I am trying to avoid.)

Solution 1

If you can set width of parent layout to "wrap_content" you could then put both children layouts to center

Solution 2

Sometimes you can set alignLeft and alignRight to the desired view and then use gravity on the element you want centered.

For example:

android:layout_below="@+id/firstLayout"
android:layout_alignLeft="@+id/firstLayout"
android:layout_aligntRight="@+id/firstLayout"
android:gravity="center"

If the component is not a TextView (or a view where you don't need the background) you could then wrap it in a FrameLayout with the above properties.

<MyView id="@+id/firstLayout" .. other props/>

<FrameLayout 
    ... other props
    android:layout_below="@+id/firstLayout"
    android:layout_alignLeft="@+id/firstLayout"
    android:layout_aligntRight="@+id/firstLayout"
    android:gravity="center" >

    <MyView id="@+id/myAlignedView" ..other props />

</FrameLayout>

This way, the bottom view will be a Frame with the same width as the upper one, but inside it there will be a view that is centered to the width.

Of course this only works when you know which is the larger view. If not, as Laranjeiro answered, wrap both contents in another layout with centered gravity.

Solution 3

For texts I have been using this f.e for a vertical-center alignment:

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_alignTop="@id/theBigOne"
android:layout_alignBottom="@id/theBigOne"
android:layout_toRightOf="@id/theBigOne"

Solution 4

The only solution that worked to me was wrap both components in a FrameLayout with the dimension of the bigger component and set the second component in the center of the FrameLayout using the property

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/red_component"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

    <View
        android:id="@+id/blue_component"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center" />

</FrameLayout>

View more solutions