MaterialComponents theme alert dialog buttons

Question

Recently I switched from support library to com.google.android.material:material:1.0.0

But now I have a problem, in this pages there's a note https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md

Note: Using a Material Components theme enables a custom view inflater which replaces default components with their Material counterparts. Currently, this only replaces Button XML components with MaterialButton.

And the theme I am using

Theme.MaterialComponents.Light.NoActionBar

does exactly what it says in that note, it replaces AlertDialog Buttons to MaterialButtons but the problem is that by default MaterialButtons are colored background and now the buttons looks like this:

How can I make them borderless and backgroundless again?

PS I am using alert builder to create alert dialogs:

android.app.AlertDialog.Builder

Answer 1

I figured out what was causing this problem. I need to use different AlertDialog class:

androidx.appcompat.app.AlertDialog

When I switched to this everything started working as expected. Here's where I found the solution:

https://github.com/material-components/material-components-android/issues/162

Answer 2

When using com.google.android.material:material:1.0.0 and androidx.appcompat.app.AlertDialog you can customize each button in the buttonBar by using Widget.MaterialComponents.Button.TextButton as parent.

val builder: AlertDialog.Builder = AlertDialog.Builder(ContextThemeWrapper(context, R.style.AlertDialogTheme))

Use the default layout or add a custom by builder.setView(R.layout.my_dialog)

In your styles:

<style name="AlertDialogTheme" parent="Theme.MaterialComponents.Light.Dialog.Alert">
    <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
    <item name="buttonBarNegativeButtonStyle">@style/Alert.Button.Neutral</item>
    <item name="buttonBarNeutralButtonStyle">@style/Alert.Button.Neutral</item>
</style>

<style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="backgroundTint">@color/transparent</item>
    <item name="rippleColor">@color/colorAccent</item>
    <item name="android:textColor">@color/colorPrimary</item>
    <item name="android:textSize">14sp</item>
    <item name="android:textAllCaps">false</item>
</style>

<style name="Alert.Button.Neutral" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="backgroundTint">@color/transparent</item>
    <item name="rippleColor">@color/colorAccent</item>
    <item name="android:textColor">@color/gray_dark</item>
    <item name="android:textSize">14sp</item>
</style>

Answer 3

Found another solution for this with using MaterialComponents here: https://issuetracker.google.com/issues/116861837#comment9

<style name="Theme.Custom.Material.Alert.Dialog.Light" parent="Theme.MaterialComponents.Light.Dialog.Alert">
    <item name="materialButtonStyle">@style/Widget.AppCompat.Button.Borderless</item>
</style>

<style name="Theme.Custom.Material.Base.Light" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="android:dialogTheme">@style/Theme.Custom.Material.Alert.Dialog.Light</item>
    <item name="android:alertDialogTheme">@style/Theme.Custom.Material.Alert.Dialog.Light</item>
  ....
</style>

Though it is still not "intended behavior" to me.

Answer 4

If you are using the com.android.support:design:28.0.0 library, using android.support.v7.app.AlertDialog works as expected.

Answer 5

If you don't want to use androidx.appcompat.app.AlertDialog, you can just redefine the style of the dialog buttons:

In your style.xml :

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   ...
   <item name="android:buttonBarButtonStyle">@style/DialogButton</item>
   ...
</style>

<style name="DialogButton" parent="Widget.MaterialComponents.Button.TextButton"/>