Datepickerdialog Has Blacked Out Buttons In Androidx.fragment.app.dialogfragment

This simple class: class DateSelectionDialogFragment : DialogFragment() { override fun onCreateDialog(savedInstanceState: Bundle?): Dialog { val calendar = Calendar.ge

Solution 1:

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:

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

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

<itemname="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.

Solution 2:

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:

<stylename="DatePickerStyle"parent="Theme.MaterialComponents.Light.Dialog"><itemname="colorAccent">@color/colorSecondary</item><itemname="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:

<stylename="AppTheme"parent="Theme.MaterialComponents.NoActionBar">
   ...
   ...
   <itemname="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.

Solution 3:

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.

Solution 4:

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

Solution 5:

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 --><stylename="MyDatePicker"parent="Theme.MaterialComponents.Light.Dialog"><itemname="colorPrimary">@color/colorPrimary</item><itemname="colorAccent">@color/colorAccent</item><itemname="materialButtonStyle">@style/Widget.MaterialComponents.Button.TextButton.Dialog</item></style>