Android ScrollView clipping child elevation shadow

vicmns picture vicmns · Nov 20, 2015 · Viewed 18k times · Source

As the title states, I'm trying to put a CardView inside a ScrollView, but the CardView elevation shadow is being but off by it's parent...

This is the Layout XML:

<FrameLayout
    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"
    tools:context=".TestScrollViewActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="128dp"
        android:background="?colorPrimary"
        android:gravity="bottom"
        android:minHeight="?actionBarSize"/>

    <ScrollView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:clipToPadding="false"
        android:paddingBottom="40dp"
        android:paddingTop="60dp">

        <android.support.v7.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:elevation="4dp"
            app:cardBackgroundColor="@android:color/white"
            app:cardCornerRadius="0dp">

            <LinearLayout
                android:layout_width="400dp"
                android:layout_height="600dp"
                android:orientation="vertical">

            </LinearLayout>

        </android.support.v7.widget.CardView>

    </ScrollView>

</FrameLayout>

The only workaround that I found is to add a padding to the parent ScrollView or add a margin to the child CardView...

Is there any option to prevent this from happening without using a padding/margin?

Thanks.

Edit:

This is how the layout looks like without setting a padding on the parent scroll view, as it can be seen, the left and right shadows are being cut off: Child's side shadow being cut off by parent scroll view

Now, if a padding is added to the parent scrollview sides, the shadows are being drawn correctly as it can be seen here: Child's side shadow now shown correctly after adding padding to right and left side of scrollview

So, my main question here is this the only way to achieve that?, or there is a tag or a configuration on the parent view that allow to correctly draw it's children views?

Answer

Anthea picture Anthea · Dec 21, 2015

this just worked for me in a similar problem:

the right way to get a child view to show shadow is to set padding on the parent and set android:clipToPadding="false" on that parent.

as found here: Android "elevation" not showing a shadow