Jolanda Verhoef
Jolanda Verhoef

Reputation: 609

How to style buttons in Alert Dialog Fragment using Material Design?

I'd like to change the default button styling on an alert dialog.

The standard Alert Dialog Fragment (in Android L) looks like this:

Default Alert Dialog Fragment

I'd like the right button to be styled as a normal button instead of a borderless button. Google itself seems to use this pattern in various dialogs, such as:

Dialog without borderless button

Does anyone know if this is possible, without recreating the whole dialog from scratch?

Upvotes: 5

Views: 9991

Answers (4)

Code on the Rocks
Code on the Rocks

Reputation: 17576

Kotlin

  1. In your app's theme/style, add the following lines:

    <item name="android:buttonBarNegativeButtonStyle">@style/NegativeButtonStyle</item>
    <item name="android:buttonBarPositiveButtonStyle">@style/PositiveButtonStyle</item>
    <item name="android:buttonBarNeutralButtonStyle">@style/NeutralButtonStyle</item>
    
  2. Then add the following styles:

    <style name="NegativeButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
        <item name="android:textColor">@color/red</item>
    </style>
    
    <style name="PositiveButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
        <item name="android:textColor">@color/red</item>
    </style>
    
    <style name="NeutralButtonStyle" 
    parent="Widget.MaterialComponents.Button.TextButton.Dialog">
        <item name="android:textColor">#00f</item>
    </style>
    

Using this method makes it unneccessary to set the theme in the AlertDialog builder.

Upvotes: 0

JEGADEESAN S
JEGADEESAN S

Reputation: 618

This solution is for changing button color with material effect in AppCompatDialogFragment.

<android.support.v7.widget.AppCompatButton
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="@string/buttin"
android:theme="@style/AppTheme.MyButton"
/>

Style file - v21

<style name="AppTheme.MyButton" parent="Theme.AppCompat.Dialog.Alert">
  <item name="android:colorButtonNormal">@color/button_color</item>
  <item name="android:textColor">@color/text_color</item>
</style>

Style file

<style name="AppTheme.MyButton" parent="Theme.AppCompat.Dialog.Alert">
  <item name="colorButtonNormal">@color/button_color</item>
  <item name="android:textColor">@color/text_color</item>
</style>

Upvotes: 0

Feng Dai
Feng Dai

Reputation: 633

You can style the button in the theme with attributes: android:buttonBarPositiveButtonStyle, android:buttonBarNegativeButtonStyle, and android:buttonBarNeutralButtonStyle.

Upvotes: 4

Jolanda Verhoef
Jolanda Verhoef

Reputation: 609

Ok, the issue is solved automagically by updating to the (just released) release 21. Now the buttons are automatically in primary color :-)

EDIT: They are not in primary color, but in Android's basic turquoise..

Upvotes: 0

Related Questions