androidmaterial-designmaterial-components-androidandroid-timepicker

Modify title text size in MaterialTimePicker


I am trying to change the the text size of the title in a MaterialTimePicker but I've had no luck so far in finding the right attribute to modify in the styles.xml file for my project. I found that setting textAppearanceButton within my application's theme allowed me to change the button size and various other attributes allowed me to change the color theme as documented here, but I haven't found any documentation related to changing the title in any way. Is it possible to modify the title's text size?


Solution

  • You can define a themeoverlay specific to the time picker overriding the textAppearanceOverline attribute:

    <style name="ThemeOverlay.App.TimePicker" parent="ThemeOverlay.MaterialComponents.TimePicker">
        <item name="textAppearanceOverline">@style/TextAppearance.App.TimePicker.Title</item>
    </style>
    
    <style name="TextAppearance.App.TimePicker.Title" parent="TextAppearance.MaterialComponents.TimePicker.Title">
        <item name="android:textSize">18sp</item>
    </style>
    

    Then you can set this theme using:

        val picker =
            MaterialTimePicker.Builder()
                .setTimeFormat(TimeFormat.CLOCK_12H)
                .setHour(12)
                .setMinute(10)
                .setTheme(R.style.ThemeOverlay_App_TimePicker)
                .build()
    

    enter image description here

    You can also set globally the specific theme to the time picker adding in your app theme:

    <style name="Theme.App" parent="Theme.MaterialComponents.*">
        ...
        <item name="materialTimePickerTheme">@style/ThemeOverlay.App.TimePicker</item>
    </style>
    

    Note. Starting with 1.5.0-alpha03 you have to use the materialTimePickerTitleStyle attribute instead of textAppearanceOverline:

    <style name="ThemeOverlay.App.TimePicker" parent="ThemeOverlay.MaterialComponents.TimePicker">
        <item name="materialTimePickerTitleStyle">@style/TextAppearance.App.TimePicker.Title</item>
    </style>
    
    <style name="TextAppearance.App.TimePicker.Title" parent="TextAppearance.MaterialComponents.TimePicker.Title">
        <item name="android:textSize">18sp</item>
    </style>