Android: Material Date Picker Custom Styling

Question

I am using the Material-Component Date Range Picker in my Android app and I want to customize the header layout. I have tried adding the materialCalendarHeaderLayout item in my custom style, but I am not sure how to use it properly as I am new on the Android.

1. I want to hide the header.
2. Want a custom Year & Month button. (Optional task)

I used the themes.xml to modify the date picker to appear as a popup instead of fullscreen.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/orange</item>
        <item name="colorPrimaryVariant">@color/black</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/orange</item>
        <item name="colorSecondaryVariant">@color/black</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor">@color/black</item>
        <!-- Date range picker -->
        <item name="materialCalendarFullscreenTheme">@style/CustomThemeOverlay_MaterialCalendar_Fullscreen</item>
    </style>

    <!-- Popup Menu theme -->
    <style name="PopupMenuBlackBackground" parent="ThemeOverlay.AppCompat.Dark">
        <item name="android:popupMenuStyle">@style/PopupMenuBlackBackground.Menu</item>
        <item name="android:fontFamily">@font/poppins_regular</item>
        <item name="android:popupElevation">5dp</item>
        <item name="android:radius">5dp</item>
    </style>
    <style name="PopupMenuBlackBackground.Menu" parent="Widget.AppCompat.PopupMenu">
        <item name="android:popupBackground">@color/blackDark</item>
        <item name="android:popupElevation">5dp</item>
        <item name="android:radius">5dp</item>
    </style>

    <!-- Date range picker fullscreen -->
    <style name="CustomThemeOverlay_MaterialCalendar_Fullscreen"
        parent="@style/ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen">
        <item name="materialCalendarStyle">@style/Custom_MaterialCalendar.Fullscreen</item>
    </style>
    <style name="Custom_MaterialCalendar.Fullscreen"
        parent="@style/Widget.MaterialComponents.MaterialCalendar.Fullscreen">
        <item name="android:windowFullscreen">false</item>
    </style>

</resources>

Expexted Date range picker:

Can someone guide me on how to achieve this customization? Any help or suggestions would be appreciated.
Thank you in advance.

Answer 1

To hide the header layout you can use:

<style name="App.MaterialCalendarTheme" parent="ThemeOverlay.Material3.MaterialCalendar">
    <item name="materialCalendarHeaderLayout">@style/App.Material3.MaterialCalendar.HeaderLayout</item>
</style>

<style name="App.Material3.MaterialCalendar.HeaderLayout" parent="@style/Widget.Material3.MaterialCalendar.HeaderLayout">
    <item name="android:visibility">gone</item>
</style>