Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android ScrollView clipping child elevation shadow [duplicate]

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?

like image 874
vicmns Avatar asked Nov 20 '15 19:11

vicmns


2 Answers

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

like image 162
Anthea Avatar answered Nov 03 '22 19:11

Anthea


I was facing the same problem, I solved it by adding cardUseCompatPadding attribute to the card view:

app:cardUseCompatPadding="true"

The shadow will not be cut out or cropped after using this solution.

like image 61
Sina Masnadi Avatar answered Nov 03 '22 18:11

Sina Masnadi