[Share] material datepicker 커스텀 과정 - 헤더, radius, 색상 변경 완료

[hanchang97]

어떤 기능을 위한 것인지

쿠폰 등록 시 날짜 설정을 위함

구현 과정

// 'com.google.android.material:material:1.7.0' 기준

val dp = MaterialDatePicker.Builder.datePicker().build()
dp.show(supportFragmentManager, "tag")

• 위와 같은 기본 형태

 val dp = MaterialDatePicker.Builder.datePicker()
            .setTheme(R.style.custom)
            .build()

<style name="custom" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
        <item name="materialCalendarHeaderLayout">
            @style/Widget.AppTheme.MaterialCalendar.HeaderToggleButton
        </item>
</style>

<style name="Widget.AppTheme.MaterialCalendar.HeaderToggleButton" parent="Widget.MaterialComponents.MaterialCalendar.HeaderLayout">
        <item name="android:visibility">gone</item>
</style>

• 스타일 추가 시 title 및 선택된 날짜 표시 부분 제거 가능

---

 <style name="custom" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
        <item name="materialCalendarHeaderLayout">
            @style/Widget.AppTheme.MaterialCalendar.HeaderToggleButton
        </item>
        <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.App.MediumComponent
        </item> // datepicker dialog 코너 radius
        <item name="colorPrimary">@color/teal_200</item> // 선택된 날짜 배경, cancel, ok 텍스트 색상
        <item name="colorOnPrimary">@color/white</item> // 선택된 날짜의 숫자 텍스트 색상
    </style>

    <style name="Widget.AppTheme.MaterialCalendar.HeaderToggleButton" parent="Widget.MaterialComponents.MaterialCalendar.HeaderLayout">
        <item name="android:visibility">gone</item>
    </style>

    <style name="ShapeAppearance.App.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerSize">16dp</item>
    </style>

• 결과

참고 사항

[ows3090]

GOTCHA