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. Have a look at the following images on what type of material design date pickers are going to be discussed in this discussion. Note that we are going to implement this project using the Java language. In this article, we are going to implement two types of material design date pickers as one can see in the below images.
- Material Design Normal Date Picker
- Material Design Date Range Picker
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 Kotlin code.
Step by Step Implementation
Step 1: Create a new project in android studio using kotlin.
Step 2: Add dependency Material Components for Android library in build.gradle file.
implementation 'com.google.android.material:material:1.4.0'
Note: In the latest version of android studio, material dependency is already included in the build.gradle file.
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. You can customize the design part.
<? xml version = "1.0" encoding = "utf-8" ?>
< androidx.constraintlayout.widget.ConstraintLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity" >
< TextView
android:id = "@+id/textView"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "GeeksForGeeks"
android:textColor = "#28AE2E"
android:textSize = "23sp"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toTopOf = "parent"
app:layout_constraintVertical_bias = "0.276" />
< ImageView
android:id = "@+id/imageView"
android:layout_width = "80dp"
android:layout_height = "80dp"
android:src = "@drawable/ic_geeksforgeeks"
app:layout_constraintBottom_toTopOf = "@+id/textView"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toTopOf = "parent" />
< com.google.android.material.floatingactionbutton.FloatingActionButton
android:id = "@+id/floatingActionButton"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:clickable = "true"
android:layout_margin = "15dp"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintEnd_toEndOf = "parent"
android:src = "@drawable/ic_date_range" />
</ androidx.constraintlayout.widget.ConstraintLayout >
|
Step 4: Working with MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
package com.ayush.datepicker
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import com.google.android.material.datepicker.MaterialDatePicker
import com.google.android.material.floatingactionbutton.FloatingActionButton
import java.text.SimpleDateFormat
import java.util.*
class MainActivity : AppCompatActivity() {
lateinit var btnDatePicker: FloatingActionButton
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// setting up the views
btnDatePicker = findViewById(R.id.floatingActionButton)
// when floationg acition button is clicked
btnDatePicker.setOnClickListener {
// Initiation date picker with
// MaterialDatePicker.Builder.datePicker()
// and building it using build()
val datePicker = MaterialDatePicker.Builder.dateRangePicker().build()
datePicker.show(supportFragmentManager, "DatePicker" )
// Setting up the event for when ok is clicked
datePicker.addOnPositiveButtonClickListener {
Toast.makeText( this , "${datePicker.headerText} is selected" , Toast.LENGTH_LONG).show()
}
// Setting up the event for when cancelled is clicked
datePicker.addOnNegativeButtonClickListener {
Toast.makeText( this , "${datePicker.headerText} is cancelled" , Toast.LENGTH_LONG).show()
}
// Setting up the event for when back button is pressed
datePicker.addOnCancelListener {
Toast.makeText( this , "Date Picker Cancelled" , Toast.LENGTH_LONG).show()
}
}
}
} |
So our app is ready.
Output: