Creating a Month and Year Picker in Android: Material User Interface

https://material.io/components/date-pickers/android

Hey, we all know that it is quite difficult to remove date from the Material Date Picker in android, but after a lot of searching I found something that does the work perfectly for my work.

I found a Library by GitHub@premkumarroyal, which does the work, it was not as easy as I was expecting because all the libraries are available in java and for being a Kotlin developer there is not any library to do so.

https://github.com/premkumarroyal/MonthAndYearPicker

https://github.com/premkumarroyal/MonthAndYearPicker

• The very first thing comes is, as we all know the dependency.

dependencies {
    ...
//    https://github.com/premkumarroyal/MonthAndYearPicker
    implementation 'com.whiteelephant:monthandyearpicker:1.3.0'
    ...
}

• So, first we are going to create the theme.xml or styles.xml for this month picker if you to customize the color your wish but don’t change the id of the colors.

<style name="MonthPickerDialogStyle">
    <item name="monthBgColor">@color/white</item>
    <item name="monthBgSelectedColor">@color/orange</item>
    <item name="monthFontColorSelected">@color/white</item>
    <item name="monthFontColorNormal">@android:color/black</item>
    <item name="monthFontColorDisabled">@android:color/darker_gray</item>

    <item name="headerBgColor">@color/orange</item>
    <item name="headerFontColorSelected">#fff</item>
    <item name="headerFontColorNormal">#85FFFFFF</item>
    <item name="headerTitleColor">#fff</item>

    <item name="dialogActionButtonColor">@color/orange</item>
</style>

• Now, in activity_main.xml or any other layout xml you want it, just copy & paste the code, customization as per your choice.

...
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/dateOfBirth"
  style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:hint="Date of Birth"
    app:endIconDrawable="@drawable/calender_icon_orange"
    app:endIconMode="custom"
    app:endIconTint="@color/orange"
    app:layout_constraintEnd_toEndOf="@id/schoolName"
    app:layout_constraintStart_toStartOf="@id/schoolName"
    app:layout_constraintTop_toBottomOf="@id/schoolName"
    app:placeholderText="Jan 2000">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/dateOfBirthInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="date" />

</com.google.android.material.textfield.TextInputLayout>
...

• Now, it's time to write the logic part in Activity or Fragment as per your choice, I’m writing this under an Activity.

Note: Don’t forget to activate the viewBinding feature, because I’m using viewBinding to bind the xml to the activity.

lateinit var inputDateOfBirth: String
...
val today = Calendar.getInstance(TimeZone.getTimeZone("UTC"))
val builder = MonthPickerDialog.Builder(
    this, { selectedMonth, selectedYear ->
        inputDateOfBirth = "${getMonthString(selectedMonth)} $selectedYear"
        binding.dateOfBirthInput.setText(inputDateOfBirth)
    },
    today.get(Calendar.YEAR),
    today.get(Calendar.MONTH)
)

builder.setActivatedMonth(Calendar.APRIL)
    .setMinYear(1980)
    .setActivatedYear(2021)
    .setMaxYear(2030)
    .setMinMonth(Calendar.FEBRUARY)
    .setTitle("SELECT MONTH AND YEAR OF BIRTHDAY")
    .setMonthRange(Calendar.JANUARY, Calendar.DECEMBER)
...

There are a lot of methods available for the convivence, don’t forgot to checkout at the GitHub repository.

https://github.com/premkumarroyal/MonthAndYearPicker

• Where you want your listener you can add to that xml object, just a single line code.

...
binding.dateOfBirth.setEndIconOnClickListener {
    builder.build().show()
}
...

• One more thing, I have added is an extension function which return the corresponding month string with the parameter as the month number (Integer).

private fun getMonthString(month: Int): String {
    val result = when (month) {
        0 -> "Jan"
        1 -> "Feb"
        2 -> "Mar"
        3 -> "Apr"
        4 -> "May"
        5 -> "Jun"
        6 -> "Jul"
        7 -> "Aug"
        8 -> "Sept"
        9 -> "Oct"
        10 -> "Nov"
        11 -> "Dec"
        else -> {
            "Apr"
        }
    }
    return result
}

Note: The most important part is to handle the Manifest merge error, just a line of replace in AndroidManifest.xml in application element.

...
tools:replace="android:icon"
...

Credits:

LinkedIn: https://www.linkedin.com/in/avinashbest/

GitHub: https://github.com/avinashbest