I’m trying to figure out how to add an inset shadow effect to my Android view components, similar to what you can achieve in design software like Figma.
I’ve been working on this for hours now and tried using layer-list drawables with various combinations of gradient shapes, but none of them give me the look I’m after. The effect I want is basically a shadow that appears inside the container boundaries rather than outside.
Has anyone managed to create this kind of inner shadow effect using native Android components? I’d really appreciate any code snippets or XML examples that could help me achieve this visual effect.
I encountered a similar challenge not long ago, and I found a solution that involved creating a custom drawable. I used a layer-list drawable where I layered multiple gradients, each with distinct start and end colors to simulate the inner shadow. The key was applying radial gradients, with a transition from transparent to semi-transparent black, strategically positioned at the edges of the view. You will likely need to adjust the gradient radius and center positions to get the desired effect. Additionally, I experimented with overriding onDraw in a custom view, utilizing Canvas.drawRect and Paint objects with varying alpha values to create multiple overlapping rectangles. While this method requires more coding, it offers greater control over the shadow’s appearance and performance compared to complex layer-list implementations.
honestly, the easiest approach i’ve found is using a CardView with negative elevation and some gradient overlays. works pretty well for most cases without getting too complex with custom drawing stuff.
I fought with this same issue about six months ago while redesigning our app’s interface. Here’s what finally worked: combine a shape drawable with multiple stroke elements and play with the colors. Create a rectangle shape with a thick transparent stroke, then overlay another shape that has a subtle gradient from your background color to a darker version. Set the stroke width to match how deep you want the shadow and use android:strokeColor with semi-transparent values. The key is nailing the color transitions - I used around 15% opacity for the shadow color. This approach skips the performance hit of custom drawing but still gives you that inset look. Took some tweaking with opacity values, but once I got it right, it looked solid across different screen densities.
Achieving inset shadows in Android views can be challenging because there’s no direct equivalent to the CSS box-shadow property. One effective method I’ve found is using a Nine-patch drawable combined with a shape overlay. By designing the inset shadow in an image editor and integrating it into the Nine-patch, you can create a visually appealing effect. For simpler designs, consider using elevation along with negative margins, although this approach comes with its own limitations. For more intricate shadows, I recommend creating a custom view that manually draws the shadow using Canvas.drawRoundRect and a LinearGradient shader to simulate the effect of shadows emanating from the edges inward. This method closely resembles the desired inset shadow effect and offers a good balance of performance, especially when dealing with static designs.