To drop color shadow to a button in Xamarin

Question

I want to add shadow to a button in Xamarin on Android as well as iOS. I want the following design: Shadow button

I have tried using renderer as follows:

protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
    {
        base.OnElementChanged(e);

        Control.SetShadowLayer(10, 10, 10, Android.Graphics.Color.Rgb((int)e.NewElement.BackgroundColor.R,
                                                                    (int)e.NewElement.BackgroundColor.G,
                                                                    (int)e.NewElement.BackgroundColor.B));
        this.Elevation = 50;
    }

But unfortunately it does not drop color shadow. I have also tried using Frame HasShadow property to produce desired effect but no luck.

Any Help?

Answer 1

Welcome to SO !

For Android , you can set a custom Background for Button , we can define a button_shadow.xml in Resources/drawable：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- slide -->
    <item>
        <shape android:shape="rectangle">
            <padding
              android:bottom="2dp"
              android:left="0dp"
              android:right="2dp"
              android:top="0dp" />
            <solid android:color="#0000FFFF" />
            <corners android:radius="18dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
              android:bottom="2dp"
              android:left="0dp"
              android:right="2dp"
              android:top="0dp" />
            <solid android:color="#1000FFFF" />
            <corners android:radius="18dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
               android:bottom="2dp"
               android:left="0dp"
               android:right="2dp"
               android:top="0dp" />
            <solid android:color="#2000FFFF" />
            <corners android:radius="18dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
               android:bottom="2dp"
               android:left="0dp"
               android:right="2dp"
               android:top="0dp" />
            <solid android:color="#3000FFFF" />
            <corners android:radius="18dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
               android:bottom="2dp"
               android:left="0dp"
               android:right="2dp"
               android:top="0dp" />
            <solid android:color="#5000FFFF" />
            <corners android:radius="18dp" />
        </shape>
    </item>
 
    <!-- content -->
    <item>
        <shape android:shape="rectangle"
               android:useLevel="false">
            <!-- solid -->
            <solid android:color="#00FFFF" />
            <corners android:radius="20dp" />
            <padding android:left="10dp"
               android:right="10dp"
               android:top="10dp"
               android:bottom="10dp"/>
        </shape>
    </item>
</layer-list>

Then used in Custom renderer as follow :

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(CustomButtonRenderer))]
namespace AppEntryTest.Droid
{
    class CustomButtonRenderer : ButtonRenderer
    {

        Context myContext;
        public CustomButtonRenderer(Context context) : base(context)
        {
            this.myContext = context;
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);
            Control.SetBackgroundResource(Resource.Drawable.button_shadow);
        }
    }
}

The effect :