DatePicker in MAUI appears full screen and aligned to the left-top corner in Android

Question

Hello. I am developing an MAUI app in which I have to use a customized date picker without borders.

However, it appears in the corner of the screen and not in the middle as it should. I am using .Net 7 right now.

Here's a sample of my code.

public class BorderLessDatePicker : DatePicker
{

        public static readonly BindableProperty TextAlignmentProperty = BindableProperty.Create("TextAlignment", typeof(PickerTextAlignment), typeof(BorderLessDatePicker), (PickerTextAlignment)0, BindingMode.TwoWay);
        public PickerTextAlignment TextAlignment
        {
            get { return (PickerTextAlignment)GetValue(TextAlignmentProperty); }
            set { SetValue(TextAlignmentProperty, value); }
        }

        public enum PickerTextAlignment
        {
            Center,
            Right,
            Left
        }
}

public class BorderLessDatePickerMapper 
{

        private static BorderLessDatePicker viewCast;

        public static void Map(IDatePickerHandler handler, IDatePicker view)
        {

            if (view is BorderLessDatePicker)
            {

                viewCast = (BorderLessDatePicker)view;

                // Remove borders
                GradientDrawable gd = new GradientDrawable();
                gd.SetStroke(0, Android.Graphics.Color.LightGray);
                handler.PlatformView.SetBackground(gd);
                
                handler.PlatformView.SetPadding(0, 0, 0, 0);

                // TextAlignment for date value
                if (viewCast.TextAlignment == BorderLessDatePicker.PickerTextAlignment.Right)
                    handler.PlatformView.Gravity = Android.Views.GravityFlags.Right;
                else if (viewCast.TextAlignment == BorderLessDatePicker.PickerTextAlignment.Center)
                    handler.PlatformView.Gravity = Android.Views.GravityFlags.Center;
                else if (viewCast.TextAlignment == BorderLessDatePicker.PickerTextAlignment.Left)
                    handler.PlatformView.Gravity = Android.Views.GravityFlags.Left;
            }
        }


       
}

 <controls:BorderLessDatePicker 
       Format="MM/dd/yyyy"
       TextAlignment="Right"
       MaximumDate="9/18/2023"
       VerticalOptions="Center"
       HorizontalOptions="Fill">
 </controls:BorderLessDatePicker>

And in MAUIProgram.cs, the following

 Microsoft.Maui.Handlers.DatePickerHandler.Mapper.AppendToMapping("DatePickerCustomization", (handler, view) =>
{
            if (view is BorderLessDatePicker)
            {
                BorderLessDatePickerMapper.Map(handler, view);
            }
});

Thank you in Advance.

Answer 1

I have found the root cause of this issue and it turned out to be something way different than what I had thought.

I have a customized Datepicker here and the style goes like this.

 <style name="MainTheme.PATH.Base" parent="Theme.MaterialComponents.DayNight">
    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
 </style>

Now if you are extending a Material theme, you should use the following to customize it.

<item name="materialCalendarTheme">@style/AppCompatDialogStyle</item>

Also instead of

 <style name="AppCompatDialogStyle" parent="android:Widget.Material.DatePicker">
 </style>

You are supposed to use

  <style name="AppCompatDialogStyle" parent="@style/ThemeOverlay.MaterialComponents.MaterialCalendar">
  </style>

Thanks.