Xamarin forms Shadow on Frame in Android

Question

The Frame class in Xamarin Forms is quite limited, and can't allow me to get a shadow behind the Frame. I've made a custom renderer for iOS using this code:

public class RatingInfoFrameRenderer : FrameRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
    {
        base.OnElementChanged(e);

        Layer.BorderColor = UIColor.White.CGColor;
        Layer.CornerRadius = 10;
        Layer.MasksToBounds = false;
        Layer.ShadowOffset = new CGSize(-2, 2);
        Layer.ShadowRadius = 5;
        Layer.ShadowOpacity = 0.4f;
    }
}

Making a similar one on Android is causing me problems, since my knowledge on Android native is kind of limited. Could anyone tell me what to look at, perhaps some good code example? I haven't found anything that looks similar to this.

Answer 1

It can be very easy in Android platform, but first of all, you need to create your shadow under Drawable folder of Android resources. For example:

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="#CABBBBBB" />
      <corners android:radius="2dp" />
    </shape>
  </item>

  <item
      android:left="0dp"
      android:right="0dp"
      android:top="0dp"
      android:bottom="2dp">
    <shape android:shape="rectangle">
      <solid android:color="@android:color/white" />
      <corners android:radius="2dp" />
    </shape>
  </item>
</layer-list>

Name this file as "shadow.xml" and place it under the Drawable folder of Android project, then in your RatingInfoFrameRenderer:

public class RatingInfoFrameRenderer : FrameRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
    {
        base.OnElementChanged(e);
        if (e.NewElement != null)
        {
            ViewGroup.SetBackgroundResource(Resource.Drawable.shadow);
        }
    }
}

To change the style of shadow, you can modify the shadow.xml file, for more information about this, you may refer to google's official document: LayerList.

Answer 2

I know this question is old, but there is an updated way of getting a better shadow effect then the accepted answer. inherit from Xamarin.Forms.Platform.Android.FastRenderers.FrameRenderer and then use SetOutlineSpotShadowColor(Color color) to set the shadow color. You can use CardElevation to determine the strength and spread of the shadow as well.

[assembly: ExportRenderer(typeof(Myframe), typeof(MyFrameRenderer))]
namespace MyApp.Droid.Renderers
{
    public class MyFrameRenderer: Xamarin.Forms.Platform.Android.FastRenderers.FrameRenderer
    {
        public MyFrameRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
        {
            base.OnElementChanged(e);

            CardElevation = 10;

            if(((App)Application.Current).Theme != Core.Enums.Theme.Dark)
            {
                SetOutlineSpotShadowColor(Xamarin.Forms.Color.Gray.ToAndroid());
            }
            else
            {
                SetOutlineSpotShadowColor(Xamarin.Forms.Color.HotPink.ToAndroid());
            }
        }
    }
}

Hope this helps someone who stumbles in here like I did.

Answer 3

I was able to get a shadow effect in Xamarin Forms for a box view, I'm pretty sure it can used similarly for a Frame. I got the clue from Android Documentation

I added a new property called HasShadow

        public static readonly BindableProperty HasShadowProperty =
            BindableProperty.Create("HasShadow", typeof(bool), typeof(ExtendedBoxView), false);

        public bool HasShadow
        {
            get { return (bool)GetValue(HasShadowProperty); }
            set { SetValue(HasShadowProperty, value); }
        }

Here's the code for the Renderer in Android

       public class ExtendedBoxViewRenderer : BoxRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e)
    {
        base.OnElementChanged(e);
        var element = e.NewElement as ExtendedBoxView;


        if (element == null) return;

        if (element.HasShadow)
        {
            ViewGroup.Elevation = 8.0f;
            ViewGroup.TranslationZ = 10.0f;


        }

    }

}

And this is how it looks

UPDATE

I found out that this approach causes app crash for older versions of Android. Although I haven't found a way to display Shadows in Android versions prior to Lollipop. This will prevent any app crashes

    public class ExtendedBoxViewRenderer : BoxRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e)
        {
            base.OnElementChanged(e);
            var element = e.NewElement as ExtendedBoxView;


            if (element == null) return;

            if (element.HasShadow)
            {
//For some reason ViewCompat has issues when running in debug hence the workaround.
#if DEBUG
                double dAndroidVersion;
                if (double.TryParse(Build.VERSION.Release, out dAndroidVersion))
                {
                    if (dAndroidVersion < 21)
                        return;
                }
#else
                ViewCompat.SetElevation(ViewGroup, 8.0f);
                ViewCompat.SetTranslationZ(ViewGroup, 10.0f);
#endif
            }

        }

    }