Material Design Date Picker in Android

Material Design Components (MDC Android) offers designers and developers a way to implement Material Design in their Android applications. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android applications.

If you like the way how the UI elements from Google Material Design Components for android which are designed by Google are pretty awesome, then here are some steps that need to be followed to get them, and one of them is Google Material Design Components (MDC) Date Picker. There are a lot of date pickers available for Android which are Open Source. But the Material design date pickers offer more functionality to the user and are easy to implement for developers.

In this guide, we will implement two types of Material Design Date Pickers using Java and Kotlin:

1. Normal Date Picker: Allows users to select a single date from a calendar interface.
2. Date Range Picker: Enables users to select a start and end date, useful for scenarios like booking or scheduling events.

Skeleton of Date Picker Dialog Box

Before going to implement the material design date picker, understanding the parts of the dialog box is necessary so that it can become easier while dealing with parts of the dialog box in java code.

Steps by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Note that select Java/Kotlin as the programming language.

Step 2: Adding material design components dependency

Now add the following dependency to the build.gradle.kts Module-level file.

implementation ("com.google.android.material:material:1.12.0")

After invoking the dependency click on the "Sync Now" button. Make sure you are connected to the network so that Android Studio downloads all the required files.

Step 3: Change the base application theme as Material Theme as following

Go to app > src > main > res > values > themes.xml and change the base application theme. The MaterialComponents contains various action bar theme styles, one may invoke any of the MaterialComponents action bar theme styles, except AppCompat styles. Below is the code for the styles.xml file. As we are using material design components this step is mandatory.

themes.xml:

<resources>  
  
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">  
        <!-- Customize your theme here -->
        <item name="colorPrimary">@color/colorPrimary</item>  
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
        <item name="colorAccent">@color/colorAccent</item>  
    </style>
  
</resources>

Step 4: Working with the activity_main.xml file

Invoke the following code for the application interface or can design it according to one's needs.

And this is going to remain the same for the entire discussion. Below is the code for the activity_main.xml file. 

activity_main.xml:

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:background="@color/white"
    tools:context=".MainActivity">

    <!--simple text view to show the selected date by the user-->
    <TextView
        android:id="@+id/show_selected_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Selected Date is : "
        android:textSize="18sp" />

    <!--button to open the material design normal date picker dialog-->
    <Button
        android:id="@+id/normal_date_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:text="Select Date"
        android:textSize="18sp" />

    <!--button to open the material design range date picker dialog-->
    <Button
        android:id="@+id/range_date_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:text="Select Date Range"
        android:textSize="18sp" />

</LinearLayout>

Design UI:

Step 5: Working with MainActivity file

Go to the MainActivity file, and refer to the following code in both Java and Kotlin. In this file we are creating an instance of the Date Picker builder and using .build() to show the picker. Comments are added inside the code to understand the code in more detail.

MainActivity file:

package org.geeksforgeeks.demo;

import android.os.Bundle;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.util.Pair;
import com.google.android.material.datepicker.MaterialDatePicker;

public class MainActivity extends AppCompatActivity {

    private Button button;
    private Button rangeButton;
    private TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button = findViewById(R.id.normal_date_picker);
        rangeButton = findViewById(R.id.range_date_picker);
        textView = findViewById(R.id.show_selected_date);

        // Normal date picker
        MaterialDatePicker<Long> datePicker = MaterialDatePicker.Builder
                .datePicker()
                .setTitleText("Choose a date")
                .build();

        button.setOnClickListener(v -> datePicker.show(getSupportFragmentManager(), "MATERIAL_DATE_PICKER"));

        datePicker.addOnPositiveButtonClickListener(selection -> {
            textView.setText("Selected Date is : " + datePicker.getHeaderText());
        });

        // Range date picker
        MaterialDatePicker<Pair<Long, Long>> rangeDatePicker = MaterialDatePicker.Builder
                .dateRangePicker()
                .setTitleText("SELECT A DATE")
                .build();

        rangeButton.setOnClickListener(v -> rangeDatePicker.show(getSupportFragmentManager(), "MATERIAL_DATE_PICKER"));

        rangeDatePicker.addOnPositiveButtonClickListener(selection -> {
            textView.setText("Selected Date is : " + rangeDatePicker.getHeaderText());
        });
    }
}

package org.geeksforgeeks.demo

import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.core.util.Pair
import com.google.android.material.datepicker.MaterialDatePicker


class MainActivity : AppCompatActivity() {
    private lateinit var button: Button
    private lateinit var rangeButton: Button
    private lateinit var textview: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        button = findViewById(R.id.normal_date_picker)
        rangeButton = findViewById(R.id.range_date_picker)
        textview = findViewById(R.id.show_selected_date)

        // normal date picker
        val datePicker: MaterialDatePicker<Long> =
            MaterialDatePicker.Builder
                .datePicker()
                .setTitleText("Choose a date")
                .build()

        button.setOnClickListener {
            // supportFragmentManager to interact with the fragments associated with the date picker
            datePicker.show(supportFragmentManager, "MATERIAL_DATE_PICKER")
        }

        datePicker.addOnPositiveButtonClickListener {
            textview.text = "Selected Date is : " + datePicker.headerText
        }



        // range date picker
        val rangeDatePicker: MaterialDatePicker<Pair<Long, Long>> =
            MaterialDatePicker.Builder.dateRangePicker().setTitleText("SELECT A DATE").build()

        rangeButton.setOnClickListener {
            rangeDatePicker.show(supportFragmentManager, "MATERIAL_DATE_PICKER")
        }

        rangeDatePicker.addOnPositiveButtonClickListener {
            textview.text = "Selected Date is : " + rangeDatePicker.headerText
        }
    }
}

Output:

To implement more functionalities of Material Design Date Picker please refer to More Functionalities of Material Design Date Picker in Android article.