[Calendar] Cannot scale for tablet (sw600dp)

[ArcherEmiya05]

Description: Scaling Calendar dialog for tablet

Expected behavior:

Mobile

Tablet

It is actually too small in tablet (just didn't capture the whole screen) and the dialog padding has issue which can be seen when looking at the buttons

Source code: The code snippet which is causing this issue

<style name="DialogButtonStyle" parent="Widget.Material3.Button.TextButton.Dialog" tools:keep="@style/DialogButtonStyle">
        <item name="android:textSize">24sp</item>
        <item name="android:textColor">@color/colorPrimaryDark_Accent</item>
    </style>

    <!-- DatePicker theme on both light and night mode -->
    <style name="AppCalendar" parent="@style/ThemeOverlay.Material3.MaterialCalendar" tools:keep="@style/AppCalendar">
        <!-- Background color -->
        <item name="colorSurface">@color/colorWhite_Primary</item>
        <!-- Indicator or focused field color -->
        <item name="colorPrimary">@color/colorPrimary_Accent</item>
        <!-- Day color (active) -->
        <item name="colorOnPrimary">@color/colorWhite_PrimaryDark</item>
        <!-- Day color (inactive) -->
        <item name="colorOnSurface">@color/colorPrimaryDark_White</item>
        <!-- Remove unnecessary overlay -->
        <item name="elevationOverlayEnabled">false</item>
        <item name="colorOnSurfaceVariant">@color/colorPrimary_Accent</item>
        <item name="buttonBarPositiveButtonStyle">@style/DialogButtonStyle</item>
        <item name="buttonBarNegativeButtonStyle">@style/DialogButtonStyle</item>
        <item name="materialAlertDialogTitleTextStyle">@style/DialogTitleStyle</item>
        <item name="materialAlertDialogBodyTextStyle">@style/DialogBodyStyle</item>
        <item name="shapeAppearanceCornerExtraLarge">@style/ShapeAppearance.App.LargeComponent</item>
    </style>

    <!-- AlertDialog theme on both light and night mode -->
    <style name="AppDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog" tools:keep="@style/AppDialog">
        <!-- Background color -->
        <item name="colorSurface">@color/colorWhite_Primary</item>
        <!-- Message color -->
        <item name="colorOnSurfaceVariant">@color/colorPrimaryDark_White</item>
        <item name="buttonBarPositiveButtonStyle">@style/DialogButtonStyle</item>
        <item name="buttonBarNegativeButtonStyle">@style/DialogButtonStyle</item>
        <item name="alertDialogStyle">@style/MaterialAlertDialog.App</item>
        <item name="materialAlertDialogTitleTextStyle">@style/DialogTitleStyle</item>
        <item name="materialAlertDialogBodyTextStyle">@style/DialogBodyStyle</item>
    </style>

    <style name="MaterialAlertDialog.App" parent="MaterialAlertDialog.Material3" tools:keep="@style/MaterialAlertDialog_App">
        <item name="shapeAppearance">@style/ShapeAppearance.App.MediumComponent</item>
        <item name="shapeAppearanceOverlay">@null</item>
    </style>

    <!-- This may sometimes ignore when title is too long and too large that it does not fit in one line -->
    <!-- Reference: https://github.com/material-components/material-components-android/issues/3014#issue-1404665319 -->
    <style name="DialogTitleStyle" parent="@style/MaterialAlertDialog.MaterialComponents.Title.Text">
        <item name="android:textColor">@color/colorPrimaryDark_White</item>
        <item name="android:textAllCaps">true</item>
        <item name="android:textSize">40sp</item>
    </style>

    <style name="DialogBodyStyle" parent="@style/MaterialAlertDialog.MaterialComponents.Body.Text">
        <item name="android:textColor">@color/colorPrimaryDark_White</item>
        <item name="android:textSize">18sp</item>
    </style>

Here I was hoping that materialAlertDialogTitleTextStyle and materialAlertDialogBodyTextStyle will took effect just like in normal alert dialog.

Minimal sample app repro: N/A

Android API version: 21 and above

Material Library version: 1.10.0

Device: Pixel C Emulator

[ArcherEmiya05]

For now the workaround we came up with is to use the full screen version for tablet size devices with the below theme/styling.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- DatePicker theme on both light and night mode -->
    <style name="MDCCalendar" parent="@style/ThemeOverlay.Material3.MaterialCalendar.Fullscreen" tools:keep="@style/MDCCalendar">
        <!-- Background color -->
        <item name="colorSurfaceContainerHigh">@color/mdc_colorWhite_Primary</item>
        <!-- Indicator or focused field color -->
        <item name="colorPrimary">@color/mdc_colorPrimary_Accent</item>
        <!-- Day color (selected) -->
        <item name="colorOnPrimary">@color/mdc_colorWhite_PrimaryDark</item>
        <!-- Day color (not selected) -->
        <item name="colorOnSurface">@color/mdc_colorPrimaryDark_White</item>
        <!-- Remove unnecessary overlay -->
        <item name="elevationOverlayEnabled">false</item>
        <!-- Selected date color -->
        <item name="colorOnSurfaceVariant">@color/mdc_colorAccent</item>
        <item name="materialCalendarDay">@style/MDCCalendarBodyStyle</item>
        <item name="materialCalendarMonth">@style/MDCCalendarTitleStyle</item>
        <item name="materialCalendarHeaderTitle">@style/MDCCalendarTitleStyle</item>
        <item name="materialCalendarHeaderConfirmButton">@style/MDCDialogButtonStyle</item>
        <item name="shapeAppearanceCornerExtraLarge">@style/ShapeAppearance.MDC.LargeComponent</item>
    </style>

    <!-- AlertDialog theme on both light and night mode -->
    <style name="MDCDialog" parent="ThemeOverlay.Material3.MaterialAlertDialog" tools:keep="@style/MDCDialog">
        <!-- Background color -->
        <item name="colorSurfaceContainerHigh">@color/mdc_colorWhite_Primary</item>
        <!-- Message color -->
        <item name="colorOnSurfaceVariant">@color/mdc_colorPrimaryDark_White</item>
        <!-- Radio color for dialog with single choice item -->
        <item name="colorSecondary">@color/mdc_colorPrimary_Accent</item>
        <item name="buttonBarPositiveButtonStyle">@style/MDCDialogButtonStyle</item>
        <item name="buttonBarNegativeButtonStyle">@style/MDCDialogButtonStyle</item>
        <item name="alertDialogStyle">@style/MaterialAlertDialog.MDC</item>
        <item name="materialAlertDialogTitleTextStyle">@style/MDCDialogTitleStyle</item>
        <item name="materialAlertDialogBodyTextStyle">@style/MDCDialogBodyStyle</item>
    </style>

    <style name="MaterialAlertDialog.MDC" parent="MaterialAlertDialog.Material3" tools:keep="@style/MaterialAlertDialog_MDC">
        <item name="shapeAppearance">@style/ShapeAppearance.MDC.MediumComponent</item>
        <item name="shapeAppearanceOverlay">@null</item>
    </style>

    <!-- Attributes here may not work when title is too long and too large that it can't fit in one line -->
    <!-- Reference: https://github.com/material-components/material-components-android/issues/3014#issue-1404665319 -->
    <style name="MDCDialogTitleStyle" parent="@style/MaterialAlertDialog.MaterialComponents.Title.Text" tools:keep="@style/MDCDialogTitleStyle">
        <item name="android:textSize">32sp</item>
        <item name="android:textColor">@color/mdc_colorPrimaryDark_White</item>
    </style>

    <style name="MDCDialogBodyStyle" parent="@style/MaterialAlertDialog.MaterialComponents.Body.Text" tools:keep="@style/MDCDialogBodyStyle">
        <item name="android:textSize">22sp</item>
        <item name="android:textColor">@color/mdc_colorPrimaryDark_White</item>
    </style>

    <style name="MDCCalendarTitleStyle" parent="@style/MaterialAlertDialog.MaterialComponents.Title.Text" tools:keep="@style/MDCCalendarTitleStyle">
        <item name="android:textSize">22sp</item>
    </style>

    <style name="MDCCalendarBodyStyle" parent="@style/MaterialAlertDialog.MaterialComponents.Body.Text" tools:keep="@style/MDCCalendarBodyStyle">
        <item name="android:textSize">24sp</item>
        <item name="android:gravity">center</item>
    </style>

    <style name="MDCDialogButtonStyle" parent="Widget.Material3.Button.TextButton.Dialog" tools:keep="@style/MDCDialogButtonStyle">
        <item name="android:textSize">22sp</item>
        <item name="android:textColor">@color/mdc_colorAccent</item>
    </style>
</resources>