Android Material DateRangePicker has a different layout than in the official website

Question

I'm implementing a dateRangePicker and it works perfectly fine, but the way it looks is off and different to the way it looks in the first reply of this StackOverflow or the official material.io website.

This is my implementation:

MaterialDatePicker<Pair<Long, Long>> pickerRange = MaterialDatePicker.Builder.dateRangePicker()
                .setTheme(R.style.ChipStyle)
                .setCalendarConstraints(limitRange().build())
                .setTitleText(getString(R.string.choose_date_range))
                .setSelection(new Pair<>(initialMillis, finalMillis))
                .build();

        pickerRange.addOnPositiveButtonClickListener(selection -> { ... });
        pickerRange.show(getSupportFragmentManager(), pickerRange.toString());

And this the style I'm using at this moment:

<style name="ChipStyle" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorSecondary">@color/colorPrimary</item>
    </style>

I've tried implementing styles the way it suggested in that StackOverflow and in the official website, but the only thing I've managed to change are the colors, the layout is still off and different like you can see in the following image.

The one on the left is mine, and as you can see the layout looks different, and the circle around the day is moved to the right. How can I make it look like the right one, which is the preview shown in both the StackOverflow mentioned before and the official site?

score 0 · Answer 1 · answered May 26 '21 at 16:37

The problem I had was that the style of the "AppTheme" had Theme.AppCompat.* as parent.

Changing it to the following worked for me:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:fontFamily">@font/raleway</item>
    </style>

Android Material DateRangePicker has a different layout than in the official website

1 Answers1