How to Implement Date Range Picker in Android?
Date Range Picker is a widely used feature in many popular Android apps and an essential component of Material Design. It allows users to select a range of dates such as a start and end date for various purposes including scheduling, filtering data, and setting time boundaries. Some Of The Real Life Examples Of Date Range Picker are when we use some banking mobile applications and if we want to download the bank statement of our account for some particular date range then at that Date Range Picker is used. A sample video is given below to get an idea about what we are going to do in this article.
Note: This Android article covered in both Java and Kotlin languages.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Step 2: Add Material Design Dependency in build.grade(Module)
For Using Material Date Picker in the Project.
XML
dependencies { implementation 'com.google.android.material:material:1.9.0' } |
Step 3: Working with the activity_main.xml file
Navigate to app > res > layout > activity_main.xml and add the below code to it. Comments are added in the code to get to know it in detail. We have created one simple UI with two text views one as a banner and one for setting the date that is selected by the user and we have also added one button that will show the date picker dialog.
activity_main.xml
XML
<? xml version = "1.0" encoding = "utf-8" ?> < androidx.constraintlayout.widget.ConstraintLayout 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:background = "@color/white" tools:context = ".MainActivity" > < TextView android:id = "@+id/banner" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginTop = "16dp" android:text = "@string/app_name" android:textAlignment = "center" android:textSize = "25sp" android:textColor = "#F6F6" android:textStyle = "bold" app:layout_constraintTop_toTopOf = "parent" tools:layout_editor_absoluteX = "16dp" /> < TextView android:id = "@+id/selectedDate" android:layout_width = "184dp" android:layout_height = "42dp" android:layout_marginTop = "384dp" android:textAlignment = "center" android:textColor = "@color/black" android:text = "Selected Date Rnage" app:layout_constraintEnd_toEndOf = "parent" app:layout_constraintStart_toStartOf = "parent" app:layout_constraintTop_toTopOf = "parent" /> < Button android:id = "@+id/datePicker" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_marginBottom = "172dp" android:text = "Open Dialog" android:textSize = "20sp" app:layout_constraintBottom_toBottomOf = "parent" app:layout_constraintEnd_toEndOf = "parent" app:layout_constraintStart_toStartOf = "parent" /> </ androidx.constraintlayout.widget.ConstraintLayout > |
Step 4: Working with the MainActivity file
Navigate to app > java > your app’s package name > MainActivity file and add the below code to it. Comments are added in the code to get to know in detail.
Java
package com.example.gfgapp; 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; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Locale; public class MainActivity extends AppCompatActivity { TextView selectedDate; Button datePicker; @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); selectedDate = findViewById(R.id.selectedDate); datePicker = findViewById(R.id.datePicker); // Setting click listener for the date picker button datePicker.setOnClickListener(view -> DatePickerdialog()); } private void DatePickerdialog() { // Creating a MaterialDatePicker builder for selecting a date range MaterialDatePicker.Builder<Pair<Long, Long>> builder = MaterialDatePicker.Builder.dateRangePicker(); builder.setTitleText( "Select a date range" ); // Building the date picker dialog MaterialDatePicker<Pair<Long, Long>> datePicker = builder.build(); datePicker.addOnPositiveButtonClickListener(selection -> { // Retrieving the selected start and end dates Long startDate = selection.first; Long endDate = selection.second; // Formating the selected dates as strings SimpleDateFormat sdf = new SimpleDateFormat( "dd/MM/yyyy" , Locale.getDefault()); String startDateString = sdf.format( new Date(startDate)); String endDateString = sdf.format( new Date(endDate)); // Creating the date range string String selectedDateRange = startDateString + " - " + endDateString; // Displaying the selected date range in the TextView selectedDate.setText(selectedDateRange); }); // Showing the date picker dialog datePicker.show(getSupportFragmentManager(), "DATE_PICKER" ); } } |
Kotlin
package com.example.gfgapp 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 import java.text.SimpleDateFormat import java.util.Date import java.util.Locale class MainActivity : AppCompatActivity() { private lateinit var selectedDate: TextView private lateinit var datePicker: Button override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) selectedDate = findViewById(R.id.selectedDate) datePicker = findViewById(R.id.datePicker) // Setting click listener for the date picker button datePicker.setOnClickListener { datePickerDialog() } } private fun datePickerDialog() { // Creating a MaterialDatePicker builder for selecting a date range val builder = MaterialDatePicker.Builder<Pair<Long, Long>>.dateRangePicker() builder.setTitleText( "Select a date range" ) // Building the date picker dialog val datePicker = builder.build() datePicker.addOnPositiveButtonClickListener { selection -> // Retrieving the selected start and end dates val startDate = selection.first val endDate = selection.second // Formatting the selected dates as strings val sdf = SimpleDateFormat( "dd/MM/yyyy" , Locale.getDefault()) val startDateString = sdf.format(Date(startDate)) val endDateString = sdf.format(Date(endDate)) // Creating the date range string val selectedDateRange = "$startDateString - $endDateString" // Displaying the selected date range in the TextView selectedDate.text = selectedDateRange } // Showing the date picker dialog datePicker.show(supportFragmentManager, "DATE_PICKER" ) } } |
Output:
Contact Us