The important thing is that we should be backward compatible, this is androidx after all

+1

Android 28 (Pie) added support for custom shadows. It's very strange that, 2 years later, MDC for Android still don't support it.

And it's even stranger why a freshly made UI toolkit like Compose did not account for custom shadows.

Which features do you want from the shadow that Compose doesn't provide? I thought that we had supported most of Android's shadow capabilities.

I think the main feature request is to be able to color the shadows. Right now they are always the grey/blackish ones. Framework introduced both ambient and spot color shadows back in API level 28 I believe

I don't think it's a problem with the support of Android Framework shadows, it's already a problem on the framework itself, the main request (at least for me) to implement custom shadows only for Compose which are more flexible than Framework ones, even if they are not as performant as ones provided by the framework, after all, ad-hoc implementation will be probably even less performant than officially supported modifier for shadows.

Maybe it worth keeping drawShadow as it is and introduce an additional modifier like drawCustomShadow, so it will be more clear that it doesn't use an optimized version of shadows.

Colors, positions and offsets. For all API levels and desktop as previous comment said.

It is important to note that shadows in the framework are consistent with a singular light source placed in a virtual space above the top of the display. This ensures that shadows are rendered consistently with content to the left/right closer/further away from the content as well. This configuration is more part of the rendering environment vs configuration of parameters for a single drawing instruction like drawRect. This is what makes positions and offsets less likely to be configurable vs color information.

IMO a multiplatform library should allow more things, not only material one.

If I want to create a neumorphism theme I will have to do from scratch.

Why all future targets of compose have to place the light in the same exact point?

I can understand how shadows have to work if using material, but the generic one should be more flexible.

Such behavior of shadows makes sense in the context of Material design paradigm but makes it less controllable by developers.

When in most of cases I want to replicate a design from my design team, and shadow is just an instrument for me to emulate shadows from their design tool (photoshop/figma/sketch etc), and they not only do not use single light source, but often used shadows in different cases and with different settings, which now is hard to emulate (or possible, but tedious and require usage of custom drawables or custom rendering)

I would expect drawShadow modifier (or some additional) which works closer to CSS box-shadow property

That's right. This design requirement exists between many development teams, should not allow everyone to follow Material Design, this will reject many people, I really hope that Compose can do better than Flutter, in the current point of view, Compose is really bad than Flutter in addition to Kotlin this feature..

I strongly support that - shadows are a general design thing, not material design specific. Compose allows for theming outside of material design paradigm, same principle should be applied to shadows.

Please stop spamming "+1". This only creates noise in notifications. Press the ⭐ button and stay calm.

+1

Do not +1.
Star the issue instead. This isn't a forum.

Here's a change request to add the ambientShadowColor and spotShadowColor layer properties and expose them via GraphicsLayerScope: https://android-review.googlesource.com/c/platform/frameworks/support/+/1956537

If desired, the Surface, Card, Button, etc. layouts could then expose these values before passing them on to GraphicsLayerModifier, but this is usable with custom layouts in non-Material design systems.

Unfortunately, they need to run on android greater than sdk28, which is far from androidx compose's argument for minimum support for sdk21.

I mean compose is a androidx ui toolkit rather than a system-level framework, so it should be backwards compatible, at least compatible to the same level as the compose core, instead of letting people implement different codes for different android versions when using it.

Re: #62:

Compose already supports RenderEffect for blurring graphics layers, which was added in API 31, so that argument wouldn't be consistent with what Compose currently supports.

Compose already supports RenderEffect for blurring graphics layers, which was added in API 31, so that argument wouldn't be consistent with what Compose currently supports.

emm...Yes, I know that, maybe it is the technical difficulties of the lower version implementation that makes it impossible to use other methods to achieve backwards compatibility, so I am a little disappointed

+1

+1

It's pretty weird, if I understand the comment #23 correctly, there are no plans to support custom shadow offset, and custom colors will only appear on API 28+ in version 1.2.0.

I understand this has to do with Material single light source, but I believe that Compose as a UI framework should not be restricted by Material guidelines. Elevation is something only Material related, and it seems more appropriate for Modifier.shadow(elevation = ...) to be inside androidx.compose.material, and androidx.compose.material could have a modifier that is independent of light source or elevation, and can be configured.

It is very strange to limit this possibility, because for the most part there are no restrictions on creating non Material UI on Android. Often apps are made with platform-independent designs, and it should be possible to create them as designed.

The only possibility to draw a shadow, which I found, on older devices requires to turn off hardware acceleration, as well as has a number of limitations during the animation.

This is by far the most popular issue of Compose, which shows how much people really need this kind of feature.

I do not understand why there has to be a virtual global singlular light source in order to cast shadows? The reason why we have that in the real world is because we do have actual physical light sources in the environment that we are able to perceive. But having a virtual one on your screen that you cannot actually see or perceive is just non-intuitive. Unless you try to also include real world light source detection, it is very stupid to have a mandatory virtual light source in the design system.

Definitely agree with https://issuetracker.google.com/issues/160665122#comment94

This has always sounded to me as "over-designeered"

+1

+1 Shadows near the edge look like garbage on big screens like tablets. The "single global light" idea just doesn't look good. I only want box-shadows like css.

+1 It's so disappointing that we can't use colored shadows in the View system, but more disappointing is that we can't do it in Compose also!

CSS box-shadow-like Modifier implementation

In response to #105, and for anyone interested in full customization, here's a straightforward solution that applies to Jetpack Compose (Android only, not Compose Multiplatform).

This modifier must be placed before any contents (including background) or the shadow covers the contents.

Usage example

Draws a cyan rounded rectangle with a soft drop shadow. When pressed, the shadow is blurred even more (the animation demonstrates performance of this implementation; in fact, on my physical device, even in debug mode it looks as smooth as my eyes can see).

@Composable
fun App() {
    AppTheme {
        Column(
            modifier = Modifier
                .systemBarsPadding()
                .padding(24.dp)
        ) {
            val interactionSource = remember { MutableInteractionSource() }
            val isPressed by interactionSource.collectIsPressedAsState()

            Box(
                modifier = Modifier
                    .size(100.dp, 70.dp)
                    .boxShadow(
                        color = Color.Black.copy(alpha = 0.24f),
                        blurRadius = animateDpAsState(
                            targetValue = when {
                                isPressed -> 12.dp
                                else -> 6.dp
                            }
                        ).value,
                        offset = DpOffset(x = 0.dp, y = 4.dp),
                        shape = RoundedCornerShape(size = 8.dp)
                    )
                    .background(Color.Cyan)
                    .clickable(
                        interactionSource = interactionSource,
                        indication = LocalIndication.current
                    ) {}
            )
        }
    }
}

Implementation

/**
 * Applies a shadow to the current box.
 *
 * @param color The color of the shadow.
 *
 * @param blurRadius The larger this value, the bigger the blur, so the shadow
 * becomes bigger and lighter.
 * If set to `0`, the shadow's edge is sharp.
 *
 * @param spreadRadius Positive values will cause the shadow to expand and grow
 * bigger, negative values will cause the shadow to shrink.
 *
 * @param offset Offsets the shadow from the box.
 *
 * @param shape The shape of the box, which is applied to the shadow as well.
 *
 * @param clip Whether to clip the content to [shape].
 *
 * @param inset Whether the shadow should be inset to [shape]; otherwise, it is
 * a drop shadow.
 *
 * @exception IllegalArgumentException Any of the following conditions holds:
 * - [color] is [Color.Unspecified],
 * - [blurRadius] is [Dp.Unspecified] or negative,
 * - [spreadRadius] is [Dp.Unspecified],
 * - [offset] is [DpOffset.Unspecified].
 */
@Stable
fun Modifier.boxShadow(
    color: Color,
    blurRadius: Dp,
    spreadRadius: Dp = 0.dp,
    offset: DpOffset = DpOffset.Zero,
    shape: Shape = RectangleShape,
    clip: Boolean = true,
    inset: Boolean = false
): Modifier {

    require(color.isSpecified) { "color must be specified." }
    require(blurRadius.isSpecified) { "blurRadius must be specified." }
    require(spreadRadius.isSpecified) { "spreadRadius must be specified." }
    require(blurRadius.value >= 0f) { "blurRadius can't be negative." }
    require(offset.isSpecified) { "offset must be specified." }

    return drawWithCache {
        onDrawWithContent {

            if (inset)
                drawContent()

            drawIntoCanvas { canvas ->

                val colorArgb = color.toArgb()
                val hasBlurRadius = blurRadius.value.let { it.isFinite() && it != 0f }
                val paint = Paint()

                paint.asFrameworkPaint().let { frameworkPaint ->

                    if (hasBlurRadius) {
                        frameworkPaint.maskFilter = BlurMaskFilter(
                            blurRadius.toPx(),
                            BlurMaskFilter.Blur.NORMAL
                        )
                    }

                    frameworkPaint.color = colorArgb
                }

                val spreadRadiusPx = spreadRadius.toPx().let { spreadRadiusPx ->
                    when {
                        inset -> -spreadRadiusPx
                        else -> spreadRadiusPx
                    }
                }

                val hasSpreadRadius = spreadRadiusPx != 0f
                val size = size
                val layoutDirection = layoutDirection

                val density = Density(
                    density = density,
                    fontScale = fontScale
                )

                val shadowOutline = shape.createOutline(
                    size = when {
                        hasSpreadRadius -> size.let { (width, height) ->
                            (2 * spreadRadiusPx).let { outset ->
                                Size(
                                    width = width + outset,
                                    height = height + outset
                                )
                            }
                        }
                        else -> size
                    },
                    layoutDirection = layoutDirection,
                    density = density
                )

                val nativeCanvas = canvas.nativeCanvas
                val count = nativeCanvas.save()

                if (inset) {

                    val boxOutline = when {
                        hasSpreadRadius -> shape.createOutline(
                            size = size,
                            layoutDirection = layoutDirection,
                            density = density
                        )
                        else -> shadowOutline
                    }

                    canvas.clipToOutline(boxOutline)

                    val bounds = boxOutline.bounds

                    nativeCanvas.saveLayer(
                        bounds.left,
                        bounds.top,
                        bounds.right,
                        bounds.bottom,
                        NativePaint().apply {
                            colorFilter = ColorMatrixColorFilter(
                                ColorMatrix(
                                    floatArrayOf(
                                        1f, 0f, 0f, 0f, 0f,
                                        0f, 1f, 0f, 0f, 0f,
                                        0f, 0f, 1f, 0f, 0f,
                                        0f, 0f, 0f, -1f, 255f * color.alpha
                                    )
                                )
                            )
                        }
                    )
                }

                canvas.translate(
                    dx = offset.x.toPx() - spreadRadiusPx,
                    dy = offset.y.toPx() - spreadRadiusPx
                )

                canvas.drawOutline(
                    outline = shadowOutline,
                    paint = paint
                )

                nativeCanvas.restoreToCount(count)
            }

            if (!inset)
                drawContent()
        }
    }.run {
        when {
            clip -> clip(shape)
            else -> this
        }
    }
}

fun Canvas.clipToOutline(
    outline: Outline,
    clipOp: ClipOp = ClipOp.Intersect
) {
    when (outline) {
        is Outline.Generic ->
            clipPath(path = outline.path, clipOp = clipOp)
        is Outline.Rectangle ->
            clipRect(rect = outline.rect, clipOp = clipOp)
        is Outline.Rounded ->
            clipPath(
                path = Path()
                    .apply { addRoundRect(outline.roundRect) },
                clipOp = clipOp
            )
    }
}

Oh, sorry, I forgot to share that method as well. Just edited my post to include the implementation of clipToOutline, which is pretty trivial.

We generate the entire design system with Figma, for shadows figma uses x-axis, y-axis, spread and blur just like iOS, but Android we can only use the elevations which is nothing like what they ask of us. I came across this ticket and I'm crying a little but I see that for some strange reason they don't want to provide a more personalized function. Very disappointed, let's see how I get out of this, my designers are amazed.

+1

+1 Compose should be more than Material. Similar to what others have stated, my design system now needs a completely different mapping from our shadow styles or use a cumbersome solution that doesn't work for anything but newer API levels.