Circular checkbox on android in Xamarin Forms

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.

Krunal Bagadia Krunal Bagadia · Accepted Answer · 2020-03-19T05:26:23

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.

Circular checkbox on android in Xamarin Forms

2 Answers