Modify title text size in MaterialTimePicker

Question

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?

Answer 1

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()

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>