Aligning the vertical center of a view to the top of another view

Question

It seems fairly simple, but I can seem to figure out to produce xml that achieves the following result: (lots of interesting content on SO, but surprisingly, I found nothing that answers that one)

The black view is the outer-frame, the blue view is aligned to the bottom and the red view's vertical center is aligned to the top of the blue view.

Constraints:

don't assume red view has a fixed size (to compute the half of it for an offset margin),
don't do it programmatically, xml rulez

edit: fixed the messed-up description and added the constraints

What do you mean by the horizontal center? Both Views seem to cover the whole width of the root View. Can you put a marker on the image showing the alignment. — tasomaniac, Dec 30 '15 at 13:53
@tasomaniac Sorry i fixed the messed up description and the picture — Gurg Hackpof, Dec 30 '15 at 14:01
I will think about how to do this in xml. It can be done quite easily programmatically. Put the view on top of the other and give a negative bottom margin with the half of the height. — tasomaniac, Dec 30 '15 at 14:38
Doed one of them have fixed size ?Or can I do it in Activity? — tiny sunlight, Dec 30 '15 at 14:42
indeed, hardcoding a size in xml or doing it programmatically would work but I rule it out. (just added constraints in the description) — Gurg Hackpof, Dec 30 '15 at 15:05
@tinysunlight I'm ready to accept this as an answer if you substantiate this a bit — Gurg Hackpof, Dec 30 '15 at 15:37

score 1 · Answer 1 · edited May 23 '17 at 12:30

If you cannot count on having a fixed height, then the margin will need to be determined at runtime, when the height is determined. Otherwise you hard code a bottom margin that is a negative value of half the layout height (of the blue layout). I have provided two nested layouts to use within your main activity layout.

I've used a button in this particular case to test the app, you can implement it in any way you choose. The order with which you add the layouts to the xml will affect the visibility of them. It's important to place the one you want to be on top last.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout ../..
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/black"
            tools:showIn="@layout/activity_main">

    <RelativeLayout android:id="@+id/l1"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/holo_blue_light"/>

    <RelativeLayout android:id="@+id/l2"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_above="@+id/l1"
        android:background="@android:color/holo_red_light"/>
</RelativeLayout>

I borrowed a method from this answer here:

public void setMargin(View view) {
    if (relativeLayout
            .getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
        ViewGroup.MarginLayoutParams marginLayoutParams =
                (ViewGroup.MarginLayoutParams) relativeLayout
                        .getLayoutParams();
        int margin = relativeLayout.getHeight() / 2;
        marginLayoutParams.setMargins(20, 0, 0, -margin);
        relativeLayout.requestLayout();
    }
}

For the purposes of demonstration I've pushed margins on either side of the two layouts, so you can see where they're overlapping.

score 0 · Answer 2 · answered Dec 30 '15 at 14:44

If the float view has fixed size.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/a"
        android:layout_alignParentBottom="true"
        android:background="#44bb11"
        android:layout_width="match_parent"
        android:layout_height="100dp" />
    <ImageView
        android:layout_marginBottom="-40dp"
        android:layout_above="@+id/a"
        android:id="@+id/c"
        android:background="#45000000"
        android:layout_width="match_parent"
        android:layout_height="80dp" />
</RelativeLayout>

indeed, hardcoding a size in xml would work but I rule it out. (just added constraints in the description) — Gurg Hackpof, Dec 30 '15 at 15:05

Aligning the vertical center of a view to the top of another view

2 Answers2