How to change the date picker from spinner to calendar dialogue in Android Kotlin

user_7851519 0
Viewed 394

How to change my spinner date picker to normal calendar with an option to keyboard entry as shown in the attached picture

Here is the code.

 private val datePickerDialog by lazy {
            DatePickerDialog(requireActivity(), R.style.SpinnerDatePickerDialog).apply {
                setTitle(R.string.select_date)
                datePicker.maxDate = LocalDate.now().minusDays(1).toMillis()
                setOnDateSetListener { _, year, month, dayOfMonth ->
                    viewModel.onDateSelected(year, month, dayOfMonth)
                }
            }
        }

enter image description here

kotlin android-datepicker android
1 Answers

Follow the below code to achieve a material calendar view.

(1) Add the below dependency in your app Gradle.

implementation 'com.google.android.material:material:1.5.0'

(2) Use the below style for your activity.

    <!-- Base application theme. -->
<style name="ScreenTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimary</item>
    <item name="colorAccent">@color/colorAccent</item>

    <item name="materialCalendarStyle">@style/Widget.MaterialComponents.MaterialCalendar</item>
    <item name="materialCalendarFullscreenTheme">@style/ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen</item>
    <item name="materialCalendarTheme">@style/ThemeOverlay.MaterialComponents.MaterialCalendar</item>
</style>

(3) Set above style in Manifest.xml file with activity.

<activity
        android:name=".DashboardActivity"
        android:screenOrientation="portrait"
        android:theme="@style/ScreenTheme"
        android:windowSoftInputMode="stateAlwaysHidden" />

(4) Add the below code with a button click.

val datePicker =
                        MaterialDatePicker.Builder.datePicker()
                                .setTitleText("Select date")
                                .setSelection(MaterialDatePicker.todayInUtcMilliseconds())
                                .build()

                datePicker.show(childFragmentManager,"")
  • Use childFragmentManager if you want a calendar with fragment otherwise use supportFragmentManager with activity.

Output: enter image description here

user_63974060
Related