Xamarin.Tips – iOS Shadow on Transparent UIView

I ran into another interesting requirement that took some creativity to solve. At a basic level, on iOS, we needed to have a UIView with a fully transparent background that also had a dropshadow (acting more as a box shadow). With its offset being to the bottom right, meaning the shadow should not be visible from the top or left sections of the view.

I know you might be thinking, that sounds like a ridiculous requirement! Why would someone ever do that? It actually gives a pretty cool magnifying look on the large image behind the view, like the UIView was layered above the image and focusing a portion of the large image. I can’t share screenshots, but I would suggest giving the look a try!

But to get to the point, if you haven’t yet, try setting Shadow details on the Layer of a UIView that has a UIColor.Clear background color. You’ll notice that nothing shows up. The next logical thought is to just add another layer that applies the shadow, then add that layer as a sublayer to the view’s main layer. However, that will simply add a gray frame behind yours (since iOS’s shadows act as drop shadows, not box shadows).

At the brink of a mental breakdown, I came up with a solution that worked well for our situation without having to add extra views to act as the shadows or any other wacky workaround (although I will say this workaround is quite wacky).

I did this in Xamarin.Forms, so this is in a Custom renderer for a Frame, but the same thing applies to any UIView. The basic premise is to add two new layers for the bottom portion of the shadow and the right portion.

    public class TransparentFrameRenderer : FrameRenderer
    {

        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
        {
            base.OnElementChanged(e);
            if(e.NewElement != null)
            {
            }
        }
        public override void Draw(CGRect rect)
        {
            Layer.InsertSublayer(CreateShadowLayer(new CGRect(rect.Width + 2, 3, 4, rect.Height + 2)), 0);
            Layer.InsertSublayer(CreateShadowLayer(new CGRect(3, rect.Height + 2, rect.Width, 4.0f)), 0);
            base.Draw(rect);

        }

        private CALayer CreateShadowLayer(CGRect rect)
        {
            var shadowLayer = new CALayer();
            shadowLayer.BackgroundColor = UIColor.Black.CGColor;
            shadowLayer.ShadowOpacity = 0.8f;
            shadowLayer.ShadowOffset = new CGSize(0, 0);
            shadowLayer.ShadowColor = UIColor.Black.CGColor;
            shadowLayer.ShadowPath = UIBezierPath.FromRect(rect).CGPath;

            return shadowLayer;
        }
    }

Note the helper method to create a layer with the shadow details set to what we need, and inserting two sublayers that set the frame for the layer. These are specific values I used in our situation, but you can easily play with them and also see how the same thing can be applied if your shadow needs to be applied to all four sides (if your light perspective is perfectly perpendicular to the view), inverse of what we have here, or if you need larger or smaller shadows.

This is NOT a complete solution, or a real reusable control, but more of a general approach to rendering shadows around a control with a transparent background.

If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!