Share via


Rouded corners of timePicker and DatePicker

Question

Monday, May 4, 2020 1:48 PM

Hi, Is any possibility to make these pickers have rounded corners like below

All replies (2)

Tuesday, May 5, 2020 7:16 AM âś…Answered

Firstly, define a shape in the drawable like:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid
      android:color="@color/white"/>
  <corners
      android:radius="30dp" />
</shape>

Secondly, create a custom renderer for a date picker and apply this shape there:

[assembly: ExportRenderer(typeof(Xamarin.Forms.DatePicker), typeof(CustomDatePickerRenderer))]
namespace Sample.Droid
{
    public class CustomDatePickerRenderer : DatePickerRenderer
    {
        public CustomDatePickerRenderer(Context context) : base(context)
        {
        }

        protected override DatePickerDialog CreateDatePickerDialog(int year, int month, int day)
        {
            var dialog = base.CreateDatePickerDialog(year, month, day);
            dialog.Window.SetBackgroundDrawableResource(Resource.Drawable.dialog_bg);
            return dialog;
        }
    }
}

Saturday, October 31, 2020 9:03 AM

@LandLu said: Firstly, define a shape in the drawable like:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid
      android:color="@color/white"/>
  <corners
      android:radius="30dp" />
</shape>

Secondly, create a custom renderer for a date picker and apply this shape there:

[assembly: ExportRenderer(typeof(Xamarin.Forms.DatePicker), typeof(CustomDatePickerRenderer))]
namespace Sample.Droid
{
    public class CustomDatePickerRenderer : DatePickerRenderer
    {
        public CustomDatePickerRenderer(Context context) : base(context)
        {
        }

        protected override DatePickerDialog CreateDatePickerDialog(int year, int month, int day)
        {
            var dialog = base.CreateDatePickerDialog(year, month, day);
            dialog.Window.SetBackgroundDrawableResource(Resource.Drawable.dialog_bg);
            return dialog;
        }
    }
}

Thanks a lot for this! I would just like to add one thing here. When adding the xml file to the drawable folder, make sure to set its build action to AndroidResource. If it's still undetected by "Resource.Drawable.yourfilename", then clean the code, quit Visual Studio, and restart again.

If it's still undetected, try checking your xml file for some missing tags, errors etc. I remember breaking my head over this in my early days, only to hit the build button in frustration and look the error thrown in VS.