androidandroid-studiomaterial-designmaterial-components-androidandroid-datepicker

Material date picker selected date circle is out of center ,How to make it fit center?


link to screenshot

This is style i have used for material Calendar separately, everything is perfect except selected date circle

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowBackground">@color/colorAppBackground</item>
    <item name="android:actionMenuTextAppearance">@style/RobotoMenuText</item>
    <item name="titleTextAppearance">@style/RobotoMenuText</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="titleTextStyle">@style/RobotoMenuText</item>
    <item name="colorSurface">@color/colorAppGreen</item>
    <item name="materialCalendarTheme">@style/CalenderTheme</item>
    <item name="materialCalendarFullscreenTheme">@style/ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen</item>
    <item name="materialCalendarStyle">@style/Widget.MaterialComponents.MaterialCalendar</item>
</style>
<style name="CalenderTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowBackground">@color/colorAppBackground</item>
</style>

Solution

  • You have to switch from the Theme.AppCompat to a Theme.MaterialComponents or a Bridge Theme.

    Use:

    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge">
        <!-- ...... -->
        <item name="materialCalendarStyle">@style/Widget.MaterialComponents.MaterialCalendar</item>
        <item name="materialCalendarFullscreenTheme">@style/ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen</item>
        <item name="materialCalendarTheme">@style/ThemeOverlay.MaterialComponents.MaterialCalendar</item>
    </style>