Theme.MaterialComponents does not change font of dialog title

Question

I am using the material components theming for our app. Now we want a custom font, which I managed to apply almost everywhere with the theme below, which uses the various textAppearance... attributes defined by material components.

This works very well, and the theme is also applied to the AlertDialogs almost everywhere -- message text and buttons have the custom font, buttons have the correct accent colors etc.

Only the dialog title keeps the Roboto font, no matter what.

<!-- externalized font name for easier change -->
<string name="font_regular" translatable="false" tools:ignore="ReferenceType">@font/atma_regular</string>

<style name="Theme.App" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:textColorPrimary">@color/textColorPrimary</item>
    <item name="android:textColorSecondary">@color/textColorSecondary</item>

    <item name="textAppearanceHeadline1">@style/TextAppearance.App.Button</item>
    <item name="textAppearanceHeadline2">@style/TextAppearance.App.Button</item>
    <item name="textAppearanceHeadline3">@style/TextAppearance.App.Button</item>
    <item name="textAppearanceHeadline4">@style/TextAppearance.App.Button</item>
    <item name="textAppearanceHeadline5">@style/TextAppearance.App.Button</item>
    <item name="textAppearanceHeadline6">@style/TextAppearance.App.Button</item>
    <item name="textAppearanceSubtitle1">@style/TextAppearance.App.Subtitle1</item>
    <item name="textAppearanceSubtitle2">@style/TextAppearance.App.Subtitle2</item>
    <item name="textAppearanceBody1">@style/TextAppearance.App.Body1</item>
    <item name="textAppearanceBody2">@style/TextAppearance.App.Body2</item>
    <item name="textAppearanceButton">@style/TextAppearance.App.Button</item>
    <item name="android:textAppearanceLarge">@style/TextAppearance.App.Large</item>
    <item name="android:textAppearanceMedium">@style/TextAppearance.App.Medium</item>
    <item name="android:textAppearanceSmall">@style/TextAppearance.App.Small</item>
</style>

<style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
    <item name="fontFamily">@string/font_regular</item>
    <item name="android:fontFamily">@string/font_regular</item>
</style>
...

I tried to define an extra theme for the alert dialogs like so:

<style name="Theme.App" parent="Theme.MaterialComponents.Light.NoActionBar">
    ...
    <item name="alertDialogTheme">@style/Theme.App.AlertDialog</item>
    ...
</style>

<style name="Theme.App.AlertDialog" parent="Theme.MaterialComponents.Light.Dialog.Alert">
    <item name="android:windowTitleStyle">@style/TextAppearance.App.DialogWindowTitle</item>
</style>

<style name="TextAppearance.App.DialogWindowTitle" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
    <item name="fontFamily">@string/font_regular</item>
    <item name="android:fontFamily">@string/font_regular</item>
    <item name="android:textSize">30sp</item>
</style>

But that resets the colors and fonts everywhere. The only thing that is applied, is the textSize.

It really shouldn't be so hard to achieve this, but I am out of ideas right now. I could apply the font programmatically, but that would be quite ugly.

Answer 1

As you mentioned the AlertDialog created by MaterialAlertDialogBuilder uses the style defined by the textAppearanceSubtitle1 attribute in your app theme.

Otherwise you can change the style used by the AlertDialog using something like:

new MaterialAlertDialogBuilder(MainActivity.this,
    R.style.MyTitle_ThemeOverlay_MaterialComponents_MaterialAlertDialog)
    .setTitle("Title")
    .setMessage("Message......")
    .setPositiveButton("ok", null)
    .setNegativeButton("Cancel", null)
    .show();

In your style you have to customize the materialAlertDialogTitleTextStyle attribute:

  <style name="MyTitle_ThemeOverlay.MaterialComponents.MaterialAlertDialog" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="materialAlertDialogTitleTextStyle">@style/MyTitle_MaterialAlertDialog.MaterialComponents.Title.Text</item>
  </style>
  <style name="MyTitle_MaterialAlertDialog.MaterialComponents.Title.Text" parent="@style/MaterialAlertDialog.MaterialComponents.Title.Text">
    <item name="android:textAppearance">@style/MyTitle_TextAppearance.MaterialComponents.Subtitle1</item>
  </style>
  <style name="MyTitle_TextAppearance.MaterialComponents.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
    <item name="fontFamily">....</item>
    <item name="android:fontFamily">....</item>
    <item name="android:textStyle">.....</item>
  </style>

Answer 2

Thanks to your question I realized that I was using the incorrect attribute to assign the title style (android:titleTextAppearance instead of android:windowTitleStyle).

It looks like your issue has been fixed in the meantime, as your exact code seems to work for me as of today.