Apply style to Alert Dialogs

问题

I decided to try material alert dialogs on android. The problem I am having is when I try to apply some styles. Checking the docs, I found this:

<item name="materialAlertDialogTheme">@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog</item>

So I decided to try this:

  <style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

    <item name="materialAlertDialogTheme">@style/Theme.App.MaterialDialogAlert</item>

  </style>
      <style name="Theme.App.MaterialDialogAlert" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <!-- FIXME: this does not work. it does not change the title appearance. -->
    <!--    <item name="materialAlertDialogTitleTextStyle">@style/TextAppearance.App.MaterialDialogAlert.Title.Text</item>-->
        <!-- FIXME: this change only the title font, not the message appearance -->
        <item name="android:fontFamily">@font/nunito_semi_bold</item>
        <item name="buttonBarPositiveButtonStyle">@style/Widget.App.Button.TextButton</item>
        <item name="buttonBarNegativeButtonStyle">@style/Widget.App.Button.TextButton</item>
      </style>

    <style name="TextAppearance.App.MaterialDialogAlert.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
        <item name="android:fontFamily">@font/nunito_semi_bold</item>
      </style>

But so far I could style the buttons successfully. With the title and message I have some issues. Now I am able to apply some styles to the title with this:

<item name="android:fontFamily">@font/nunito_semi_bold</item>

But I do not think this is the proper way. First this does not apply the font to the message section. Second, I would like to apply other text styles, one for title and one for the message section.

I tried also checking this style: MaterialAlertDialog.MaterialComponents.Title.Text where I can see that this item is being applied at some point:

<item name="android:textAppearance">?attr/textAppearanceSubtitle1</item>

So I decided to declare this in my base theme:

<style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="textAppearanceSubtitle1">@style/TextAppearance.App.Subtitle1</item>
  </style>

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

but nothing changed.

So my questions are:

How can I do this properly using theme / styles.
What am I doing wrong with my current code?

EDIT I tried using this too:

  <style name="Theme.App.MaterialDialogAlert" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
    <item name="materialAlertDialogTitleTextStyle">@style/Dialog.App.MaterialDialogAlert.Title.Text</item>
    <item name="materialAlertDialogBodyTextStyle">@style/TextAppearance.App.MaterialDialogAlert.Body.Text</item>
    <item name="buttonBarPositiveButtonStyle">@style/Widget.App.Button.TextButton</item>
    <item name="buttonBarNegativeButtonStyle">@style/Widget.App.Button.TextButton</item>
  </style>

  <style name="Dialog.App.MaterialDialogAlert.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
    <item name="android:textAppearance">@style/TextAppearance.App.Subtitle1</item>
  </style>

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

But it is not working.

Also I tried this from the material components repo:

  <style name="Theme.App.MaterialDialogAlert" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
    <item name="materialAlertDialogTitleTextStyle">@style/Dialog.App.MaterialDialogAlert.Title.Text</item>
    <item name="materialAlertDialogBodyTextStyle">@style/Dialog.App.MaterialDialogAlert.Body.Text</item>
    <item name="buttonBarButtonStyle">@style/Widget.App.Button.TextButton</item>
  </style>

  <style name="Dialog.App.MaterialDialogAlert.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
    <item name="android:textAppearance">@style/TextAppearance.App.Subtitle1</item>
  </style>

  <style name="Dialog.App.MaterialDialogAlert.Body.Text" parent="@style/MaterialAlertDialog.MaterialComponents.Body.Text">
    <item name="android:textAppearance">@style/TextAppearance.Body2</item>
    <item name="fontFamily">@font/nunito_regular</item>
    <item name="android:fontFamily">@font/nunito_regular</item>
    <item name="android:textColor">@color/color_error</item>
  </style>

but does not work.

The only think I could customise was the title by adding this to the theme:

<item name="android:windowTitleStyle">@style/Dialog.App.MaterialDialogAlert.Title.Text</item>

I was checking the code inside the library and I can see that this layout is being used: mtrl_alert_dialog.xml

There I can see this:

<TextView
            android:id="@android:id/message"
            style="?attr/materialAlertDialogBodyTextStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="?attr/dialogPreferredPadding"
            android:paddingRight="?attr/dialogPreferredPadding"/>

where we can see a reference to materialAlertDialogBodyTextStyle. So maybe it is a bug in the library?

回答1:

You can use this style to customize the title and the body:

<style name="Theme.App.MaterialDialogAlert" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
    <!-- Title -->
    <item name="materialAlertDialogTitleTextStyle">@style/MyTitle_MaterialAlertDialog</item>
    <!-- Body -->
    <item name="materialAlertDialogBodyTextStyle">@style/BodyMaterialAlertDialog.MaterialComponents.Body.Text</item>
</style>

Then define the style for the title:

<style name="MyTitle_MaterialAlertDialog" 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>

Then define for the body:

  <style name="BodyTextAppearance.MaterialComponents.Body2" parent="@style/TextAppearance.MaterialComponents.Body2">
    <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">.....</item>
    <item name="android:fontFamily">....</item>
  </style>

回答2:

Apply this style first :

     <style name="MaterialAlertDialogRoundedStyle" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="shapeAppearanceOverlay">
        @style/ShapeAppearanceOverlay.MaterialAlertDialog.Rounded
    </item>// For rounded dialog
    <item name="materialAlertDialogTitleTextStyle">
        @style/TitleMaterialAlertDialog.MaterialComponents.Title.Text
    </item>//to change title text properties of dialog
    <item name="materialAlertDialogBodyTextStyle">
        @style/BodyMaterialAlertDialog.MaterialComponents.Body.Text
    </item>//to change body text properties of dialog
</style>

<style name="ShapeAppearanceOverlay.MaterialAlertDialog.Rounded" parent="">
    <item name="cornerSize">@dimen/_10sdp</item>
</style>

<style name="TitleMaterialAlertDialog.MaterialComponents.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
    <item name="android:textColor">@color/black</item>
    <item name="android:textSize">@dimen/_14ssp</item>
    <item name="android:fontFamily">@font/montserrat_semi_bold</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
</style>

<style name="BodyMaterialAlertDialog.MaterialComponents.Body.Text" parent="MaterialAlertDialog.MaterialComponents.Body.Text">
    <item name="android:textColor">@color/black</item>
    <item name="android:textSize">@dimen/_12ssp</item>
    <item name="android:textAppearance">@style/MyTitle_TextAppearance.MaterialComponents.Subtitle1</item>
</style>

<style name="MyTitle_TextAppearance.MaterialComponents.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
    <item name="fontFamily">@font/montserrat_regular</item>
    <item name="android:fontFamily">@font/montserrat_regular</item>
</style>

Than you this code to open dialog:

MaterialAlertDialogBuilder(
        this,
        R.style.MaterialAlertDialogRoundedStyle
    )
        .setTitle(getText(R.string.app_name))
        .setMessage(getString(R.string.are_you_sure_you_want_to_logout))
        .setCancelable(false)
        .setPositiveButton(getText(R.string.ok)) { dialog, _ ->
            dialog.dismiss()
            val intent = Intent(this, AccountActivity::class.java)
            intent.putExtra(AppConstants.IS_LOGOUT, true)
            startActivity(intent)
            finishAffinity()
        }
        .setNegativeButton(getText(R.string.cancel)) { dialog, _ ->
            dialog.dismiss()
        }
        .show()

来源：https://stackoverflow.com/questions/58789565/apply-style-to-alert-dialogs

标签

android

material-design

android-alertdialog

material-components

material-components-android