How to change MaterialAlertDialog text color properly?

Question

I try to use widgets from Material Components only, but in many cases, it's not documented how styling can be achieved.

Let's consider MaterialAlertDialog.

Each time I want to show a dialog, I call such part of the code:

MaterialAlertDialogBuilder(context, R.style.Theme_MyApp_Dialog_Alert)
    .setTitle("Title")
    .setMessage("This is message.")
    .setPositiveButton(R.string.ok) { _, _ -> }
    .show()

As you can see, I'm using a custom theme.

<style name="Theme.MyApp.Dialog.Alert" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <!-- attributes here -->
</style>

The problem is that some of the attributes are not working. For example textColor. So the question is how to change the body or title text color in MaterialAlertDialog?

I use the newest version of Material Components - 1.1.0-alpha07.

PS.

I'm not sure which theme should be a parent. In Material Theme Builder they use @style/ThemeOverlay.MaterialComponents.Dialog.Alert which actually gives an "old" look of dialogs.

Answer 1

Change the style as below

<style name="Theme.MyApp.Dialog.Alert" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="materialAlertDialogTitleTextStyle">@style/MaterialAlertDialogText</item>
</style>

Create MaterialAlertDialogText style and set textColor

<style name="MaterialAlertDialogText" parent="@style/MaterialAlertDialog.MaterialComponents.Title.Text">
    <item name="android:textColor">@color/yourTextColor</item>
</style>

Answer 2

You can simply override the default colors using:

  <style name="Theme.MyApp.Dialog.Alert" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">

     <!-- Text Color for title and message -->
     <item name="colorOnSurface">@color/....</item>
     ....
  </style> 

Otherwise you can customize the style used by the title and the body text using:

  <style name="Theme.MyApp.Dialog.Alert" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">    
      <!-- Title -->
      <item name="materialAlertDialogTitleTextStyle">@style/MyTitle_MaterialAlertDialog.MaterialComponents.Title.Text</item>

     <!-- Body -->
     <item name="materialAlertDialogBodyTextStyle">@style/BodyTextAppearance.MaterialComponents.Body2</item>
  </style>

  <style name="MyTitle_MaterialAlertDialog.MaterialComponents.Title.Text" parent="@style/MaterialAlertDialog.MaterialComponents.Title.Text">
    <item name="android:textColor">@color/...</item>
    <item name="android:textAppearance">@style/....</item>
  </style>

  <style name="BodyTextAppearance.MaterialComponents.Body2" parent="@style/MaterialAlertDialog.MaterialComponents.Body.Text">
    <item name="android:textColor">@color/....</item>
    <item name="android:textSize">20sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textAllCaps">true</item>
    <item name="fontFamily">sans-serif-condensed-light</item>
  </style>