RelativeLayout: centering of two FrameLayout elements

Question

In my activity_main.xml I have a number of elements, which out of all I want to make two FrameLayout elements center. If I have only the two FrameLayout elements, they are correctly centered. Here are the code and screenshot that show that:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="com.abcd.testlayout.MainActivity">

    <FrameLayout
        android:id="@+id/vertical_line"
        android:background="@color/colorPrimary"
        android:layout_width="50dp"
        android:layout_height="280dp">
        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:srcCompat="@android:drawable/presence_audio_away" />
    </FrameLayout>

    <FrameLayout
        android:id="@+id/vertical_line2"
        android:background="@color/colorAccent"
        android:layout_width="280dp"
        android:layout_height="50dp"
        android:layout_below="@+id/vertical_line">
        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:srcCompat="@android:drawable/ic_lock_idle_alarm" />
    </FrameLayout>

</RelativeLayout>

As you can see I have two lines, a vertical blue line, and a horizontal pink line. The pink line is centered horizontally and the blue line is centered vertically. This is exactly what I want.

Now if I add all other elements to the layout here are the code and the screenshot:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="com.abcd.testlayout.MainActivity">

    <FrameLayout
        android:id="@+id/vertical_line"
        android:background="@color/colorPrimary"
        android:layout_width="50dp"
        android:layout_height="280dp">
        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:srcCompat="@android:drawable/presence_audio_away" />
    </FrameLayout>

    <FrameLayout
        android:id="@+id/vertical_line2"
        android:background="@color/colorAccent"
        android:layout_width="280dp"
        android:layout_height="50dp"
        android:layout_below="@+id/vertical_line">
        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:srcCompat="@android:drawable/ic_lock_idle_alarm" />
    </FrameLayout>

    <ImageView
        android:id="@+id/img1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter" />

    <RelativeLayout
        android:gravity="center"
        android:id="@+id/rel"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:antialias="true"
            android:scaleType="matrix" />
    </RelativeLayout>

    <ImageButton
        android:id="@+id/img3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        app:srcCompat="@android:drawable/btn_default_small"/>

    <ImageButton
        android:id="@+id/imageButton4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignTop="@+id/imageButton"
        android:layout_marginStart="42dp"
        android:layout_marginLeft="42dp"
        app:srcCompat="@android:drawable/arrow_up_float"/>

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginEnd="30dp"
        android:layout_marginRight="30dp"
        android:layout_above="@+id/seekBar"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        app:srcCompat="@android:drawable/arrow_down_float"/>

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="40dp"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:max="100"
        android:progress="0"
        android:visibility="visible"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true" />

</RelativeLayout>

As you can see the blue and red lines are moved to top left corner, but I like the location of these two elements to stay at the exact position as in the previous screenshot.

Is there a way to do that, meaning moving the blue and red lines to the exact same location as the previous screenshot and keep the location of other elements untouched without trying to add left or button margin to those elements? Something that works on all phone size and even tablets, just using gravity:center or something like that?

Answer 1

Wrap those two views in another RelativeLayout as follows:

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        tools:context=".MainActivity">

        <FrameLayout
            android:id="@+id/vertical_line"
            android:layout_width="50dp"
            android:layout_height="280dp"
            android:background="@color/colorPrimary">

            <ImageButton
                android:id="@+id/imageButton1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                app:srcCompat="@android:drawable/presence_audio_away" />
        </FrameLayout>

        <FrameLayout
            android:id="@+id/vertical_line2"
            android:layout_width="280dp"
            android:layout_height="50dp"
            android:layout_below="@+id/vertical_line"
            android:background="@color/colorAccent">

            <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                app:srcCompat="@android:drawable/ic_lock_idle_alarm" />
        </FrameLayout>
    </RelativeLayout>

    <!-- Your other views -->

</RelativeLayout>