Circular checkbox on android in Xamarin Forms - xamarin

Question

Does anyone know how to make a custom renderer for the Xamarin forms checkbox? I want the checkbox to be circular on android devices, like they are on iOS.
I'm using Xamarin Forms 4.3.

Answer 1

Here is First Solution use Library:
your Solution is Here.
in that you can change your shape as per your need.
here is a Gihub Link as Here
Here is Second Solution as per your need here is Check box Renderer in Ellipse Shape.
in Xaml,
<CheckBox/>
in Android Project, First create new file. i named it CheckboxRenderer.cs
set this before namespace:
[assembly: ExportRenderer(typeof(Xamarin.Forms.CheckBox), typeof(CheckboxRenderer))]
here is my class file,
public class CheckboxRenderer : ViewRenderer<Xamarin.Forms.CheckBox, Android.Widget.CheckBox>
{
private Android.Widget.CheckBox checkBox;
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.CheckBox> e)
{
base.OnElementChanged(e);
var model = e.NewElement;
checkBox = new Android.Widget.CheckBox(Context);
checkBox.SetButtonDrawable(Resource.Drawable.custom_checkbox);
checkBox.Tag = this;
SetNativeControl(checkBox);
}
}
Create these 3 xml file in Drawble folder,
1) custom_checkbox.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true"
android:drawable="#drawable/checked" />
<item android:state_pressed="true"
android:drawable="#drawable/checked" />
<item android:state_pressed="false"
android:drawable="#drawable/unchecked" />
</selector>
2) checked.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<layer-list>
<item>
<shape android:shape="oval">
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#777" />
<gradient
android:startColor="#990000"
android:centerColor="#990000"
android:endColor="#990000"
android:angle="270" />
<size
android:width="30dp"
android:height="30dp" />
</shape>
</item>
<item
android:width="8dp"
android:height="2dp"
android:top="20dp"
android:left="6dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#fff"/>
</shape>
</rotate>
</item>
<item
android:width="19dp"
android:height="2dp"
android:top="16dp"
android:left="9dp">
<rotate
android:fromDegrees="-45">
<shape android:shape="rectangle">
<solid android:color="#fff"/>
</shape>
</rotate>
</item>
</layer-list>
</item>
</selector>
3) unchecked.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#777" />
<gradient
android:startColor="#990000"
android:centerColor="#990000"
android:endColor="#990000"
android:angle="270" />
<size
android:width="30dp"
android:height="30dp" />
</shape>
ohh its Done... you will get output like this,
Hope this hepls.

Answer 2

In your question, you say "I want the checkbox to be circular on android devices, like they are on iOS." If this is your main goal, you may want to try the Syncfusion free community license to add a SfCheckbox control. Then you can experiment with the CornerRadius property of the checkbox. Here is what worked for me:
<StackLayout>
<checkbox:SfCheckBox Text="Round Checkbox #1" CornerRadius="10" />
<checkbox:SfCheckBox Text="Round Checkbox #2" CornerRadius="10" IsChecked="True"/>
</StackLayout>