Applying Styles for Xamarin Forms control in Android from XML File.

Styles are one of the most important things that makes the apps more beautiful. Xamarin Forms support styles in build, but when the user needs to apply different styles to different platform then he can either apply them using platform specific code in common styles or by using the renderer for each platform and applying styles separately. In This post we will see how to style an Android button using Renderer which applies native android XML styles.

Creating a button in Xamarin Forms.

First lets create a simple page with single button in the portable project.

MainPage = new ContentPage
 {
 Content = new StackLayout
 {
 VerticalOptions = LayoutOptions.Center,
 Children = {
 new Button {
 HorizontalOptions = LayoutOptions.Center,
 VerticalOptions = LayoutOptions.Center,
 Text = "Daily DotNet Tips !!!!"
 }
 }
 }
 };

Creating a XML style 

First lets create a style.xml file in the drawable folder under Resources folder as shown below.

Then add the style that we apply for the button and save the file.

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_pressed="true" >
 <shape>
 <solid android:color="#ef4444" />
 <stroke android:width="1dp" android:color="#992f2f" />
 <corners android:radius="6dp" />
 <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
 </shape>
 </item>
 <item>
 <shape>
 <gradient android:startColor="#ef4444" android:endColor="#992f2f" android:angle="270" />
 <stroke android:width="1dp" android:color="#992f2f" />
 <corners android:radius="6dp" />
 <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
 </shape>
 </item>
</selector>

Creating a Custom Renderer

Now lets create a custom renderer for the Button class called as CustomButtonRenderer which inherits from ButtonRenderer class. Then Override OnElementChanged method which gets called whenever the element gets changed. In this Method lets set the style that we have created in the resource folder. The SetBackgroundResource method is used to set the xml style to the button.

 public class CustomButtonRenderer : ButtonRenderer
 {
 protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
 {
 base.OnElementChanged(e);
 var btn = this.Control as Android.Widget.Button;
 btn?.SetBackgroundResource(Resource.Drawable.Style);
 }
 }

Thats it, now run the app you can see the styles getting applied to the button in Android platform.

Hope this post might have helped in understanding how to apply XML styles to Xamarin Forms control.