LoginSignup
5
1

More than 3 years have passed since last update.

【Android】MaterialDatePickerの色を変更する

Last updated at Posted at 2021-02-15

MaterialDatePicker の色を変更したい場合があると思うのでメモ。
ガイドラインは https://material.io/components/date-pickers

style.xml
<resources>
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

        ...

        <item name="materialCalendarTheme">@style/MyMaterialCalendarTheme</item>
    </style>
</resources>

スタイルの定義が少々長いので style.xml とは別のリソースファイルを用意するのが良いと思います。

style_material_date_picker.xml
<resources>
    <!-- MaterialDatePicker のテーマ -->
    <style name="MyMaterialCalendarTheme" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
        <item name="materialCalendarStyle">@style/MyMaterialCalendar</item>
        <item name="buttonBarPositiveButtonStyle">@style/MyMaterialCalendarTextButton</item>
        <item name="buttonBarNegativeButtonStyle">@style/MyMaterialCalendarTextButton</item>
        <item name="materialCalendarHeaderTitle">@style/MyMaterialCalendarHeaderTitle</item>
        <item name="materialCalendarHeaderSelection">@style/MyMaterialCalendarHeaderSelection</item>
        <!-- 曜日や手入力テキスト色 -->
        <item name="android:textColorPrimary">@color/...</item>
        <!-- ヘッダーの背景色 -->
        <item name="colorPrimary">@color/...</item>
        <!-- 日付の背景色 -->
        <item name="colorSurface">@color/...</item>
        <!-- 日付の前景色 -->
        <item name="colorOnSurface">@color/...</item>
        <!-- ヘッダーのアイコン色 -->
        <item name="colorOnPrimary">@color/...</item>
    </style>

    <!-- MaterialDatePicker のスタイル -->
    <style name="MyMaterialCalendar" parent="Widget.MaterialComponents.MaterialCalendar">
        <item name="dayStyle">@style/MyMaterialCalendarDay</item>
        <item name="daySelectedStyle">@style/MyMaterialCalendarDaySelected</item>
    </style>

    <!-- MaterialDatePicker のヘッダータイトル -->
    <style name="MyMaterialCalendarHeaderTitle" parent="Widget.MaterialComponents.MaterialCalendar.HeaderTitle">
        <item name="android:textColor">@color/...</item>
    </style>

    <!-- MaterialDatePicker の選択されたヘッダータイトル -->
    <style name="MyMaterialCalendarHeaderSelection" parent="Widget.MaterialComponents.MaterialCalendar.HeaderSelection">
        <item name="android:textColor">@color/...</item>
    </style>

    <!-- MaterialDatePicker の日付 -->
    <style name="MyMaterialCalendarDay" parent="Widget.MaterialComponents.MaterialCalendar.Day">
        <item name="itemTextColor">@color/...</item>
    </style>

    <!-- MaterialDatePicker の選択された日 -->
    <style name="MyMaterialCalendarDaySelected" parent="Widget.MaterialComponents.MaterialCalendar.Day.Selected">
        <item name="itemFillColor">@color/...</item>
        <item name="itemTextColor">@color/...</item>
    </style>

    <!-- MaterialDatePicker のボタン -->
    <style name="MyMaterialCalendarTextButton" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="android:textColor">@color/...</item>
    </style>
</resources>
5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1