How to align view relative to multiple views in RelativeLayout?

Question

I have a parent RelativeLayout and 3 child views. View one and View two are align parent bottom. I want my view three to be aligned above view one if view one is visible, otherwise align above view two if view one is not visible.

Here's my layout:

<?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"
    xmlns:tools="http://schemas.android.com/tools">

    <View
        android:id="@+id/one"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:background="@color/green"
        tools:visibility="visible"/>

    <View
        android:id="@+id/two"
        android:layout_width="250dp"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="@color/red"/>

    <View
        android:id="@+id/three"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@id/one"
        android:layout_marginBottom="10dp"
        android:background="@color/yellow"/>

</RelativeLayout>

I know if I put view one and view two into another layer and align view three above the other layer it will work, but as of current architecture i am not allowed to do that. Is there any other way to achieve this? Would ConstraintLayout be able to solve this issue?

Answer 1

Try this:

<?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"
    xmlns:tools="http://schemas.android.com/tools">

    <View
        android:id="@+id/one"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_above="@+id/two"
        android:background="@android:color/holo_green_dark"
        tools:visibility="visible"/>

    <View
        android:id="@+id/two"
        android:layout_width="250dp"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/holo_red_dark"/>

    <View
        android:id="@+id/three"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@+id/one"
        android:layout_marginBottom="10dp"
        android:background="@android:color/holo_blue_bright"/>

</RelativeLayout>

The thing is you just add

android:layout_above="@+id/two"

to view one which will make it stay above view two and add

android:layout_above="@+id/one"

to view three which will make it stay above view one.

So if view one is visibility is gone view three will stay above view two.

You can test this by setting visibility to gone for view one.

Would ConstraintLayout be able to solve this issue?

Yes.