Android - MaterialDatePicker layout issue

Question

I am using MaterialDatePicker to select dates. I am facing some designing issues with this.

At the top text are overlapping. Below are the style used:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>
<style name="MaterialCalendarTheme" parent="ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

and below is the gradle dependency:

implementation "com.google.android.material:material:1.3.0"

also used the following dependency as replacement, but still same problem.

implementation "com.google.android.material:material:1.2.0-alpha03"

Code to show the popup:

val materialDateBuilder: MaterialDatePicker.Builder<Pair<Long, Long>> =  MaterialDatePicker.Builder.dateRangePicker()
        materialDateBuilder.setTheme(R.style.MaterialCalendarTheme)
        materialDateBuilder.setTitleText("")
        val materialDatePicker: MaterialDatePicker<*> = materialDateBuilder.build()
        materialDatePicker.show(childFragmentManager, "MATERIAL_DATE_PICKER")

Please let me know if someone has already faced such problem and fixed it.

Answer 1

I am reverting on my Question. So those, who are facing this problem, please check what parent Activity you are extending. In my case, I was extending FragmentActivity, but with Material design we need to extend AppCompatActivity. It will resolve above design issue.