Add drop shadow to svg vector image in jetpack compose

Question

I have a white arrow svg vector set in Image inside Box to which I want to add drop shadow so that it could be visible in white background too. Below is how it would look like:

This is the arrow to which I want to add drop shadow:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16">
  <group>
    <clip-path
        android:pathData="M16,16l-16,-0l-0,-16l16,-0z"/>
    <path
        android:pathData="M10.6667,13.333L5.3333,7.9997L10.6667,2.6663"
        android:strokeLineJoin="round"
        android:strokeWidth="1.5"
        android:fillColor="#00000000"
        android:strokeColor="#000"
        android:strokeLineCap="round"/>
  </group>
</vector>

The drop shadow values to be added are:

box-shadow: 0px 0px 6px 0px #00000040;

I tried using shadow in modifier but it did not work properly

            Image(
                modifier = Modifier
                    .align(Alignment.CenterEnd)
                    .shadow(60.dp, RoundedCornerShape(6.dp))
                    .clickable {
                        coroutineScope.launch {
                            shouldAutoScroll = false
                            pagerState.animateScrollToPage(
                                page = (pagerState.currentPage + 1) % (pagerState.pageCount)
                            )
                        }
                    },
                painter = painterResource(id = R.drawable.ic_right_arrow),
                contentDescription = stringResource(id = R.string.image_thumbnail),
                colorFilter = ColorFilter.tint(roposoModel.arrowColor)
            )

Could somebody help me to understand how can I achieve this?

Please add full SVG image so your example becomes reproducible. — Phil Dukhov, Mar 06 '22 at 22:30
Compose shadows are pretty [limited](https://issuetracker.google.com/issues/160665122). But your case is probably won't be fixed even when this issue closes. I suggest you [creating](https://issuetracker.google.com/issues/new?component=612128) a feature request, asking for a shadow that will wrap icon content. At the moment you have to create a shadowed asset. — Phil Dukhov, Mar 07 '22 at 04:05

score 0 · Answer 1 · answered Apr 08 '22 at 15:59

You can specify a custom shape for the shadow in the shadow-modifier in the compose-code via the shape-parameter:

            Image(
                modifier = Modifier
                    .size(50.dp)
                    .align(Alignment.Center)
                    .shadow(
                        elevation = 5.dp,
                        shape = GenericShape { size, _ ->
                            moveTo(0f, 0f)
                            relativeLineTo(0f, size.height)
                            relativeLineTo(size.width, -size.height / 2f)
                            close()
                        },
                    )
                    .clickable { onClick() },
                painter = painterResource(
                    id = R.drawable.ic_gallery_video_overlay
                ),
                contentDescription = null,
            )

I did this for a play-icon triangle after studying this article to explain vector-drawable commands.

The result looks like this for the orange-bordered triangle in the middle:

Add drop shadow to svg vector image in jetpack compose

1 Answers1