Irregular behavior of RelativeLayout

Question

This is the design I created :

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content">

    <LinearLayout

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:elevation="@dimen/dp_10"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:elevation="@dimen/dp_5"
            android:weightSum="1"
            >
            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="0.85"
                android:orientation="vertical"
                android:background="@color/white"
                android:padding="@dimen/dp_10"
                >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/black_13"
                    android:textSize="@dimen/tv16"
                    android:fontFamily="@font/roboto_medium"
                    android:text="Abhishek Mehta"
                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/clr_40"
                    android:textSize="@dimen/tv13"
                    android:fontFamily="@font/roboto_medium"
                    android:text="Abhishek Mehta"
                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/clr_40"
                    android:textSize="@dimen/tv11"
                    android:fontFamily="@font/roboto_regular"
                    android:text="Abhishek Mehta"
                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/clr_40"
                    android:textSize="@dimen/tv12"
                    android:fontFamily="@font/roboto_medium"
                    android:text="Abhishek Mehta"
                    android:drawableLeft="@drawable/time_icon"
                    android:drawablePadding="@dimen/dp_5"
                    />
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="0.15"
                android:orientation="vertical"
                android:background="@color/clr_f3"
                android:gravity="center"
                >
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:id="@+id/call"
                    android:background="?attr/selectableItemBackground"
                    >
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"

                        android:src="@drawable/ic_call"

                        />
                </LinearLayout>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/clr_d9d8e3"
                    android:layout_marginLeft="@dimen/dp_10"
                    android:layout_marginRight="@dimen/dp_10"
                    />
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:id="@+id/directions"
                    android:background="?attr/selectableItemBackground"
                    >
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"

                        android:src="@drawable/ic_directions"

                        />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
        <LinearLayout

            android:background="@drawable/red_gradient_bg"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/montserrat_medium"
                android:textSize="@dimen/tv12"
                android:text="@string/release"
                android:textColor="@color/white"
                android:layout_weight="1"
                android:gravity="center"
                android:padding="@dimen/dp_10"
                android:background="?attr/selectableItemBackground"

                />
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/white"
                android:layout_marginTop="@dimen/dp_5"
                android:layout_marginBottom="@dimen/dp_5"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/montserrat_medium"
                android:textSize="@dimen/tv12"
                android:text="@string/accept"
                android:textColor="@color/white"
                android:layout_weight="1"
                android:gravity="center"
                android:padding="@dimen/dp_10"
                android:background="?attr/selectableItemBackground"

                />
        </LinearLayout>
    </LinearLayout>
    <LinearLayout

        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/homeextension"
            android:textColor="@color/white"
            android:background="@color/clr_795CC2"
            android:padding="@dimen/dp_5"
            android:fontFamily="@font/roboto_bold"
            />
    </LinearLayout>
</RelativeLayout>

This is the design I get :

This is the design I want :

As you can see the second linear layout is going behind the 1st one, which is not how relative layout works. The second linear layout contains a text of "Home Extension" with purple background.

Use `android:layout_above` and `android:layout_below` property while using `RelativeLayout`. — Piyush, Feb 09 '18 at 06:05
@Piyush But the layout added later must come above the one added first, that's how the relative layout works right? — Parth Anjaria, Feb 09 '18 at 06:07
you are doing it wrong :) if you want this behavior then either use frameLayout or put the purple textview with other textviews as well — Umair, Feb 09 '18 at 06:09
@ParthAnjaria this textview will be added later what do you mean by that. ? you are inflating it on some service response ? — Umair, Feb 09 '18 at 06:13
`@Piyush But the layout added later must come above the one added first, that's how the relative layout works right?` Actually, the layout added later will overlap the one added first. This is how `RelativeLayout` works. — shhp, Feb 09 '18 at 06:30

score 1 · Accepted Answer · answered Feb 09 '18 at 06:45

Irregular behavior of RelativeLayout it's because of android:elevation whenever we declare this property with any view it change it's Z-Index so that view appear on top of all the views

For your case solution 1) remove android:elevation="@dimen/dp_10" from LinearLayout

Replace

<LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:elevation="@dimen/dp_10">

with

 <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">

OR Add same elevation proper in View that you want to bring in front

 <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:elevation="@dimen/dp_10">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:padding="@dimen/dp_5"
            android:text="@string/homeextension"
            android:textColor="@color/white" />
    </LinearLayout>

Same behavior applicable to RelativeLayout, FragmeLayout

Great answer, but then how will I get the required output without elevation — Parth Anjaria, Feb 09 '18 at 07:03
you can try 9-patch or other solution some are here https://stackoverflow.com/questions/4406524/how-to-set-shadow-to-a-view-in-android — MJM, Feb 09 '18 at 07:10
second solution is you can set elevation for both LinearLayout — MJM, Feb 09 '18 at 07:20

score 0 · Answer 2 · answered Feb 09 '18 at 06:48

here is your solution try this one

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:elevation="@dimen/dp_10"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="@dimen/dp_5"
        android:weightSum="1">

        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="0.85"
            android:background="@color/white"
            android:orientation="vertical"
            android:padding="@dimen/dp_10"
            android:paddingLeft="10dp"
            android:paddingTop="12dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/roboto_medium"
                android:text="Abhishek Mehta"
                android:textColor="@color/black_13"
                android:textSize="@dimen/tv16" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/roboto_medium"
                android:text="Abhishek Mehta"
                android:textColor="@color/clr_40"
                android:textSize="@dimen/tv13" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/roboto_regular"
                android:text="Abhishek Mehta"
                android:textColor="@color/clr_40"
                android:textSize="@dimen/tv11" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/time_icon"
                android:drawablePadding="@dimen/dp_5"
                android:fontFamily="@font/roboto_medium"
                android:text="Abhishek Mehta"
                android:textColor="@color/clr_40"
                android:textSize="@dimen/tv12" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="0.15"
            android:background="@color/clr_f3"
            android:gravity="center"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/call"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="?attr/selectableItemBackground"
                android:gravity="center">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"

                    android:src="@drawable/ic_call"

                    />
            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginLeft="@dimen/dp_10"
                android:layout_marginRight="@dimen/dp_10"
                android:background="@color/clr_d9d8e3" />

            <LinearLayout
                android:id="@+id/directions"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="?attr/selectableItemBackground"
                android:gravity="center">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"

                    android:src="@drawable/ic_directions"

                    />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/red_gradient_bg">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:fontFamily="@font/montserrat_medium"
            android:gravity="center"
            android:padding="@dimen/dp_10"
            android:text="@string/release"
            android:textColor="@color/white"
            android:textSize="@dimen/tv12"

            />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginBottom="@dimen/dp_5"
            android:layout_marginTop="@dimen/dp_5"
            android:background="@color/white" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:fontFamily="@font/montserrat_medium"
            android:gravity="center"
            android:padding="@dimen/dp_10"
            android:text="@string/accept"
            android:textColor="@color/white"
            android:textSize="@dimen/tv12"

            />
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:fontFamily="@font/roboto_bold"
        android:padding="@dimen/dp_5"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="15dp"
        android:text="@string/homeextension"
        android:textColor="@color/white" />
</LinearLayout>

Irregular behavior of RelativeLayout

2 Answers2