Tag Archives: Xamarin Forms Shadow

Is it possible to add a Text Shadow in Button with Xamarin Forms ? ;)

Let’s face it, sometimes your UX Lead comes up with crazy screen designs, and its us developers who has to go through the pain of delivering the design implementation accordingly. Yeah one of those moments I went through was when I had given a task to implement a Button Control with Text Shadow effect in Xamarin Forms

More descriptively, create a button which has a shadow effect underneath its internal Text?

Yeah some of your wonder why would someone even pay attention to such tiny details, yeah well you know UX fellows. 😉 lol

1

Well anyways you can’t really deny the text shadow does add some beauty to the button as you can see from above! 😉

Is this possible?

Anyhow, this is not possible in Xamarin Forms default Button, oh well you can’t even set an Image for the button’s background in Xamarin Forms unfortunately.

So the solution?

Well as usual we shall be praising Custom Renderers for our rescue. 😀 Hence such effects are available by default in Android and iOS Button controls.

So for you Github-errrs you may grab my code up in here: Xamarin-Playground/XFTextShadowButtonControl

First subclass our Custom Button…

Let’s create our TextShadowButton control by subclassing the Xamarin Forms Button control. Also you need to add a property to set the Shadow Color in this awesome button control. 😀

namespace WhateverYourNamespace
{
    public class TextShadowButton : Button
    {
		public static readonly BindableProperty TextShadowColorProperty =
        BindableProperty.Create(
        nameof(TextShadowColor),
        typeof(Color),
        typeof(TextShadowButton),
        Color.Gray);

        /// <summary>
        /// Gets or Sets TextShadowColor property
        /// </summary>
        public Color TextShadowColor
        {
	        get
	        {
		        return (Color)GetValue(TextShadowColorProperty);
	        }
	        set
	        {
		        SetValue(TextShadowColorProperty, value);
	        }
        }
    }
}

 

There you go, and let’s set the default Shadow color as Gray. 😉

So iOS stuff?

Next time for the Custom Renderer for this control in iOS..

[assembly: ExportRenderer(typeof(TextShadowButton), typeof(TextShadowButtonRenderer))]
namespace WhateverYourNamespace.iOS
{
    public class TextShadowButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            var view = (TextShadowButton) Element;
            if (view == null) return;
            
            // Adding the Button text shadow effect
            Control.TitleLabel.ShadowOffset = new CGSize(0, 0.25);
            Control.SetTitleShadowColor(((TextShadowButton)Element).TextShadowColor.ToUIColor(), UIControlState.Normal);
        }
    }
}

 

The native iOS Control that associates with Xamarin Forms Button is UIButton, which has the properties called, TitleLabel.ShadowOffset and TitleShadowColor that you could use to add the Shadow effect to our Button Text 😉

then Android stuff?

Next is the Android Renderer for our TextShadowButton

[assembly: ExportRenderer(typeof(TextShadowButton), typeof(TextShadowButtonRenderer))]
namespace WhateverYourNamespace.Droid
{
    public class TextShadowButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);

            var view = (TextShadowButton)Element;
            if (view == null) return;

            // Adding the Button text shadow effect
            Control.SetShadowLayer(4, 0, 2, ((TextShadowButton)Element).TextShadowColor.ToAndroid());
        }
    }
}

 

So in native Android Button, we have the ShadowLayer property which we could use to simulate a shadow effect on the Button Text. There we have set the shadow radius and pointed the shadow view lower than the text view by setting the Y axis to value 2.

time for Consumption of this sweetness! 😉

Alright, add this sweetness into your page and take a look…

<StackLayout>
	<Button Text="This is normal Button" BackgroundColor="#f8c220" TextColor="White"/>
	<local:TextShadowButton Text="Awesome Button with Shadow" BackgroundColor="#f8c220" HeightRequest="37" TextColor="White"/>
</StackLayout>

 

So what are you waiting for? Hit F5 and Run! 😀

2

screen-shot-2017-02-06-at-8-59-25-pm  nexus-5-lollipop-screenshot-2

WOOT! WOOT! 😀

Share the beauty! 😉 Cheers!

Advertisements