15

Here's a picture so you can understand what I want:

enter image description here

I have this green element already set up in my relative layout, and what I want is to put another element (the black one in the pic) above it so it gets centered exactly in the middle of the green element.

Keep in mind that the black element doesn't have a constant width, and it's bigger in width than the green one.

There are stuff like android:layout_alignLeft and android:layout_alignRight which would be helpful if I wanted it aligned left or right, but as far as I know there is no android:layout_alignCenter so I don't know how to do this thing...

Onik
  • 19,396
  • 14
  • 68
  • 91
David Simka
  • 556
  • 1
  • 5
  • 14
  • possible duplicate of [Android Relative Layout alignCenter from another view](http://stackoverflow.com/questions/5487864/android-relative-layout-aligncenter-from-another-view) – tir38 Mar 10 '15 at 18:26

1 Answers1

23

As you said yourself, put both elements inside a RelativeLayout.

Then, set the "center_horizontal" property of both elements to true, and then set the "below" property of the green element to the id of the black element.

Here is the complete example:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:background="@color/Black"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />

    <View
        android:id="@+id/view2"
        android:layout_height="100dp"
        android:layout_below="@+id/view1"
        android:background="@color/Green"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

("center_vertical" is kinda optional)

Or here, regardless of the other Views position:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:background="@color/Black"
        android:layout_centerVertical="true" />

    <View
        android:id="@+id/view2"
        android:layout_width="40dp"
        android:layout_height="100dp"
        android:layout_below="@+id/view1"
        android:layout_alignLeft="@+id/view1"
        android:layout_alignRight="@+id/view1"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:background="@color/Green" />

</RelativeLayout>

(In this case, the margins will define the second Views width)

This is the end result:

enter image description here

Philipp Jahoda
  • 50,880
  • 24
  • 180
  • 187
  • 2
    The thing is that center_horizontal centers the elements relative to their parent. And I don't want them to be in the center of the parent, I just want to align the black element to be in center of the green element regardless of their position in the parent. – David Simka Aug 26 '13 at 20:35
  • Align at a moment to right and left of smthng is really great, thanks – OFFmind May 15 '14 at 09:53
  • 1
    Is there any way without hardcoding? I want so the green is centre-aligned with black regardless of their change in size or absolute position. – Noobification Jul 26 '15 at 07:25
  • @Remian8985 You can simply put the two elements into a own RelativeLayout. Use layout_centerHorizontal on the two elements and position the second RelativeLayout wherever you want to have the group. – AustrianDude Apr 15 '20 at 19:10