DatePickerDialog has blacked out buttons in androidx.fragment.app.DialogFragment

Question

This simple class:

class DateSelectionDialogFragment : DialogFragment() {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val calendar = Calendar.getInstance()
        val year = calendar.get(Calendar.YEAR)
        val month = calendar.get(Calendar.MONTH)
        val dayOfMonth = calendar.get(Calendar.DAY_OF_MONTH)
        return DatePickerDialog(requireContext(), this, year, month, dayOfMonth)
    }
}

results in strangely behaving buttons. What's important I didn't specify any style for the dialog. The DialogFragment is from androidx.fragment.app package.

The buttton text color will be changed too, making it invisible again. — Nominalista, May 29 '18 at 06:40
Don't u see that `Cancel` and `OK` buttons have the same color of text and background? — Nominalista, May 29 '18 at 06:46
those two buttons are default dialog buttons right? did you check on the line of universal style or theme. — rafa, May 29 '18 at 10:51
Can you show us more code with your style and/or theme? I tried code you gave and it works just fine. — michalbrz, May 29 '18 at 11:18
I'm extending `Theme.MaterialComponents.Light.NoActionBar` for an activity. Have you used `DialogFragment` from `androidx`? — Nominalista, May 29 '18 at 11:20
You're extending the theme for an activity but passing in a different context in your code. The `DialogFragment` has it's own lifecycle, but is dependent on the activity it's called from. I believe that might be the problem. — Mr.Drew, Jun 01 '18 at 06:55
Since you are using the material components library use the [`MaterialDatePicker`](https://stackoverflow.com/questions/57807103/materialdatepicker-not-working-on-android/57808145#57808145). It works with the `Theme.MaterialComponents.*` theme. — Gabriele Mariotti, Oct 14 '19 at 18:46

score 4 · Accepted Answer · answered May 29 '18 at 14:37

The problem comes from Theme.MaterialComponents.Light.NoActionBar.

It's pretty new (and alpha) and it should replace Theme.Design.Light.NoActionBar but as we can see, it's not good enough yet.

Your solution would be to just use Theme.Design.Light.NoActionBar.

But if you really want to use Theme.MaterialComponents.Light.NoActionBar... The problem is caused by this setting in theme:

<item name="viewInflaterClass">com.google.android.material.theme.MaterialComponentsViewInflater</item>

You could replace it with another *ViewInflater and there is not much choice but:

<item name="viewInflaterClass">androidx.appcompat.app.AppCompatViewInflater</item>

It works, but I would not rely on it too much, as using Inflater from another package might cause weird issues.

score 4 · Answer 2 · answered Dec 18 '18 at 03:32

I've been trying to figure this one out for weeks now; I just stumbled upon a solution a few days ago but I forgot where. Here's what you do; in your styles.xml file add a new style:

<style name="DatePickerStyle" parent="Theme.MaterialComponents.Light.Dialog">
    <item name="colorAccent">@color/colorSecondary</item>
    <item name="materialButtonStyle">@style/Widget.MaterialComponents.Button.TextButton</item>
</style>

Where @color/colorSecondary is your secondary color you're using in your AppTheme. Now in your AppTheme add the following item:

<style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">
   ...
   ...
   <item name="android:datePickerDialogTheme">@style/DatePickerStyle</item>
</style>

This finally solved it for me. I hope this helps! My best guess is that this is a bug in the new Theme.MaterialComponents.NoActionBar.

Mr.Drew · Answer 3 · 2018-06-01T06:24:03.427

If you didn't change any styles, my best guess is it has something to do with the way Kotlin is deriving the context in this line:

return DatePickerDialog(requireContext(), this, year, month, dayOfMonth)

For Java you would call the DatePickerDialog as such:

return new DatePickerDialog(getActivity(), this, year, month, day); android docs reference

I'm no expert on Kotlin, but a Java to Kotlin converter I used here returned the Kotlin as this line:

return DatePickerDialog(getActivity(), this, year, month, day)

The normal DatePickerDialog doesn't display the 'ok' and 'cancel' buttons with the default button background color. It displays a white background and sets the button text to that default color.

I think your code is somehow deriving the context of your button styles from the parent activity or default of your app, which would match the background color of the buttons to the main style instead of the date picker's normal overwrite to a white background.

My best guess is because you are using the new requireContext() and requireActivity() methods here; however, why are you using context instead of activity? Try requireActivity() instead:

return DatePickerDialog(requireActivity(), this, year, month, dayOfMonth)

After trying this line and/or getActivity() as shown above, please update.

I might be wrong, but current context and current activity is the same thing in this case? I replaced `requireContext()` with `requireActivity()` but nothing changed. — Nominalista, Jun 02 '18 at 10:07
You might be right, but since a fragment has it's own lifecycle methods, I thought it was worth a try. The current activity and current context isn't always the same; however, I thought this might be the case because the styling of the buttons seemed to be inheriting from a different than style than the default. Glad you found your answer though. — Mr.Drew, Jun 02 '18 at 19:27

score 0 · Answer 4 · answered Jun 01 '18 at 05:10

0

Dialog will take you colorAccent property from colors.xml file, so check that's value, or you can specify or modify your dialog style by creating your custom style in style.xml file

answered Jun 01 '18 at 05:10

Lalit Jadav

1,409
1
15
38

Notice that colorAccent will change button's text color and background, making it invisible again. – Nominalista Jun 02 '18 at 09:52

score 0 · Answer 5 · answered Mar 05 '19 at 12:26

As suggested by Moi Janki. The solution on my end involved having to include the colorPrimary so that the text in the buttons would match the theme. See below; colorAccent changes the highlight and the date selector color:

My DatePicker style was as follows:

<!-- Date Picker Style -->
<style name="MyDatePicker" parent="Theme.MaterialComponents.Light.Dialog">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="materialButtonStyle">@style/Widget.MaterialComponents.Button.TextButton.Dialog</item>

</style>

DatePickerDialog has blacked out buttons in androidx.fragment.app.DialogFragment

5 Answers5

Linked