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
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. 😀
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..
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
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…
So what are you waiting for? Hit F5 and Run! 😀
WOOT! WOOT! 😀
Share the beauty! 😉 Cheers!