Aligning 2 layouts after setting rotationX in Android

Question

I'm having trouble with aligning two RelativeLayouts after I set a rotation on both of them. I want to create a 3D-like feel (a gas stove with an oven) like this: . Basically I have 2 rounded square shapes with circular progress bars in them. I use

android:rotationX="20" //top square layout

android:rotationX="-20" //bottom square layout

I'm having difficulty with 2 things:

1. Ensuring the top and bottom squares remain attached to each other after setting the rotation.
2. Ensuring the top and bottom always have the same width (this has to work on multiple devices too)

I currently have achieved the following, as you can see the alignment is far from perfect:

I tried setting a layout margin on the layouts, this works on my own device, but it doesn't have the same effect on all devices. I currently set the width of the bottom square layout based on the width of the top-layout using

android:layout_alignLeft="@+id/topLayout"
android:layout_alignRight="@+id/topLayout"

..however, after rotation there seems to be no way to align the layouts properly. Is there a way to achieve the desired effect in XML or else programmatically?

Here's the layout xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:animateLayoutChanges="true">

    <RelativeLayout
        android:id="@+id/topLayout"
        android:rotationX="20"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_corners"
        android:layout_centerHorizontal="true">

        <include layout="@layout/single_kookplaat"
            android:id="@+id/kookplaat1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"/>

        <include layout="@layout/single_kookplaat"
            android:id="@+id/kookplaat2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/kookplaat1"/>

        <include layout="@layout/single_kookplaat"
            android:id="@+id/kookplaat3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_below="@+id/kookplaat2"/>

        <include layout="@layout/single_kookplaat"
            android:id="@+id/kookplaat4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/kookplaat3"
            android:layout_alignLeft="@+id/kookplaat2"/>

    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/bottomLayout"
        android:rotationX="-20"
        android:layout_alignLeft="@+id/topLayout"
        android:layout_alignRight="@+id/topLayout"


        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_corners"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/topLayout">

        <include layout="@layout/single_kookplaat"
            android:id="@+id/kookplaat5"
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </RelativeLayout>

</RelativeLayout>

Answer 1

The problem is that you're not specifying the pivot location of the rotation, so the rotation occurs by default according to the view's center.

Since you'd like the bottom of the top view to be aligned with the top of the bottom view, you'd want to make these the anchors for each view respectively.

Make sure to set the pivot point for each view before rotating them. You'll need to know the height of each view in order to do this. It can be achieved via XML if you know the height of the top view, and if not, you'll need to do it via the code after a measurement has occurred. Here's an example:

topView.setPivotX(topView.getMeasuredWidth() / 2);
topView.setPivotY(topView.getMeasuredHeight());
topView.setRotationX(20);

bottomView.setPivotX(bottomView.getMeasuredWidth() / 2);
bottomView.setPivotY(0);
bottomView.setRotationX(-20);