Two views with same elevation side-by-side

1.5k views Asked by At

I have two views with the same elevation beside each other. My wanted behaviour is that they won't cast a shadow over each other as they have the same elevation, however, what is happening is that the view on the left, casts a shadow on the right. They are not the same size so I can't put them both in another view and apply an elevation to that view.

Is this the expected behaviour? Is there a way round it?

Edit:

I just recreated with simpler views, here is the code. I also noticed it has the expected behaviour if I have the view directly in the layout and don't include it as I did it in this example and as I need it to work.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:background="@android:color/holo_green_dark">

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@android:color/holo_red_dark"
        android:elevation="24dp"/>

    <include layout="@layout/test"/>

</LinearLayout>

And here is the include:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/holo_red_dark"
        android:elevation="24dp"/>

</LinearLayout>

And the screenshot:

1

There are 1 answers

0
azizbekian On BEST ANSWER

See the hierarchy you have:

enter image description here

So you have applied elevation to 1 and 3, which are not siblings. Apparently, if one view is higher in the hierarchy, than it should cast a shadow, regardless those views have same elevation or no.

Had you applied elevation to 2 instead of 3 you would not see shadow effect.

So if you just change your test.xml to this:

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="24dp">

    <LinearLayout
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@android:color/holo_red_dark"/>

</LinearLayout>

You'd get this output: