Gradient Button in Xamarin.Forms

It’s the little things that make a UI a special one and gives a user a awesome user experience. One of these small things is the use of colors and backgrounds. To tweak your controls (we will cover buttons) this article will show you how to create a custom button with a gradient background. You can totally use the information from this article to create a gradient background for any other Xamarin control.

Create a custom element

To create a button with a gradient background we need to create a new element that inherits from (Xamarin.Forms.)Button. This is not absolutely necessary but if you don’t do it all buttons will have properties for a gradient background. To stick with a clean coding approach we will create a new button especially for the gradient background property.

To do so create a new class called GradientButton.cs.

Now we have created a new button control which inherits from the Xamarin.Forms button control. To be able to set a gradient start and end color and the gradient orientation we need some properties for this button. Even better would be properties that we could bind to. So let’s create some bindable properties 💪

Now we have created three bindable properties:
StartColor
Specifies the start color of the gradient background
EndColor
Specifies the end color of the gradient background
GradientOrientation
The orientation of the gradient background (vertical or horizontal). This value is defined as enum inside the gradient button.

Create the Custom Renderer

To create the actual gradient background you have to create a custom renderer for the gradient button in the android and the iOS project.

Custom Renderer: Android

To create the custom renderer for android create a new file called GradientButtonRenderer.cs I would recommend to collect all your custom renderers in a folder called “Renderer” to maintain a clean structure.

This renderer simply creates a new GradientDrawable with the orientation, start color and end color property from our gradient button we created before. To set the GradientDrawable as button background we just call Control.SetBackground(…) and pass the gradient we created. Additionally we added a new event handler to handle a user touch action. If the user touched the button the button background should be fade out and when the user lifts the finger up and end the touch action the background opacity should be 100% again. This is not necessary but creates a nice button touch animation to give the user feedback when touching the button.

Custom Renderer: iOS

To also create the gradient button effect for iOS devices just create the same Custom Renderer file in your iOS project (Renderer/GradientButtonRenderer.cs).

In iOS, the effect is a little bit simpler to create. All we have to do is to simply override the Draw() Method of the ButtonRenderer. In this method, we just create a new CAGradientLayer with the orientation, start color and end color property of the GradientButton from step 1. Once we’ve created the CAGradientLayer we just add this layer as a sublayer of the native button control.

Using the control

Now we are ready to use the GradientButton! 🔥

You’re now ready to just use the gradient button in any of your pages for example:

And the result:

Gradient Button Android
Gradient Button inside my Login View
iOS Gradient Button
Gradient Button inside my Login View

Leave a Reply

Your email address will not be published. Required fields are marked *