Shadows being cut when using a LinearLayout parent about carbon HOT 15 CLOSED

If you are doing it on an API that supports shadows, the effect should be the same since Carbon reuses platform shadows where possible. Could you post these pieces of code and the API level you're using so I see the effect and debug it a little?

from carbon.

Consider this simple example

<carbon.widget.LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:orientation="vertical"
        android:paddingHorizontal="16dp">

    <carbon.widget.GridLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipChildren="false"
            android:clipToPadding="false"
            app:columnCount="2"
            app:rowCount="2">

        <carbon.widget.FrameLayout
                android:id="@+id/card_view_products"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="32dp"
                android:layout_marginEnd="8dp"
                android:layout_marginBottom="8dp"
                android:background="@drawable/gradient_products"
                android:onClick="@{onClickListener}"
                android:orientation="vertical"
                app:carbon_elevationShadowColor="#1F54C3"
                app:layout_columnWeight="1"
                app:layout_gravity="fill">

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

                <FrameLayout
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_gravity="end"
                        android:background="@drawable/module_icon_background">

                    <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginStart="4dp"
                            android:layout_marginBottom="4dp"
                            app:srcCompat="@drawable/ic_products"
                            app:tint="@color/colorOnModule"
                            tools:ignore="ContentDescription" />
                </FrameLayout>

...

If I used carbon.widget.GridLayout, the shadows of all of carbon.widget.FrameLayout are cut.
While if I used androidx.gridlayout.widget.GridLayout the shadows are kept intact

from carbon.

If you can tell me what the problem is, maybe I can fix it in my cloned version of Carbon

from carbon.

It's about this line: https://github.com/ZieIony/Carbon/blob/master/carbon/src/main/java/carbon/widget/GridLayout.java#L423 . You could add a check there: if (!Carbon.isShapeRect(shapeModel, boundsRect)), or simply remove it. I'm not sure how to solve it in a general way, because outlines are generated automatically for all shapes including an oridinary rectangle. If I remove clipping to outline, rounded corners will stop working on higher APIs. This is a good example of why widgets shouldn't do too much magic - a very common thing in Android UI framework.

from carbon.

I don't require Layouts to have a shape in my app, only a simple FrameLayout would be enough.
If I remove the shape clipping, should that solve this shadow clipping issue?

from carbon.

"You could add a check there: if (!Carbon.isShapeRect(shapeModel, boundsRect)), or simply remove it".

Also, I pushed a fix yesterday already.

from carbon.

I think that solved it, yeah. Gonna keep using my cloned version of Carbon though, since there are so many compatibility things I don't need, since the minimum of my app is 21

from carbon.

It was fixed on newer versions of Android, but not on 21

from carbon.

I changed the GridLayout to have no shadow or shape, but it still cuts the shadows of its children

from carbon.

CarbonTest.zip This is a small test that has the same issue. Hope it helps

from carbon.

Thanks, I'll try to address this issue soon.

from carbon.

Thanks to your report I found a couple of issues in shadow rendering code. It should work fine also on lower APIs and should be more performant. Unfortunately colored shadows are less transparent now, because of how MaterialShapeDrawable works. It's really hard to customize its colors without using Canvas.saveLayer() (which I fixed in the most recent commit). I should probably test it a little more, but if you wish the change is on master.

from carbon.

I added the changes to my own implementation. And yes, the shadows look less transparent now, more like an edge effect than a full shadow.
But I guess that does solve the issue of the shadows being clipped

from carbon.

I would say that there can be a way to solve the clipping, without sacrificing the integrity of the shadows

from carbon.

There is, that's not the problem. The problem here is performance. Shadows drawn using MaterialShapeDrawable force alpha to 0x44 which is too heavy in my opinion (although this is how it works for Google components with cradles and other, more complex shapes). To change it the drawing code needs to pass through a layer composition, which is quite slow.

from carbon.