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

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.

styles_Android

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.

Capture_style

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&amp;lt;Xamarin.Forms.Button&amp;gt; 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.

styles_Android

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

Arun Kumar

Arun kumar Surya Prakash, is a  Developer  Consultant. He  is a Microsoft Certified Solution  Developer  for Store App Development, and a Azure Solution Developer. His core skills is on developing Windows Store App and Cross Platform App development. You can follow him @arunnov04

2 Comments to “Applying Styles for Xamarin Forms control in Android from XML File.”

Comments are closed.