Two views with same elevation side-by-side

Question

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:

Ramer

You may wish to capture a screenshot of the effect that you are seeing, upload it somewhere, and link to it from your question, along with providing the layout that you are using. – Stotts

Sorry for the delay, I just recreated the problem using a simpler view. It works if I don't include the view, but that's how I'm using the view in my original problem. – Ramer

If you are saying that <include> is your problem, then I suspect the solution is to avoid the <include>. For example, perhaps you can make a custom View/ViewGroup that has your two views. – Stotts

Yeah, that may be the way forward. I thought that <include> would not effect the elevation of the view, but it seems that it removes it completely. – Ramer

What is the behavior when using other layouts such as FrameLayout or RelativeLayout instead of LinearLayout? I think the shadow behaves differently based on that. The nesting and sub-layouts may affect the shadow as well. – Harquebusier

Answer 1

See the hierarchy you have:

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:

Trainband