DatePicker in Android – Implementation and Overview

DatePicker in Android – Implementation and Overview

Continuation to the TimePicker, DatePicker is used to provide a UI to get the dates from the user. It is pretty important and a stable View which is used frequently. There are two types of Date Picker present in Android, calendar view and spinner view like below.

DatePicker – XML implementation

We will use the <DatePicker> tag inside the layout file like below.

<DatePicker
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/date_picker"
    />

The default mode is the calendar view and we will see about the properties of the Date Picker to change mode between spinner and calendar.

DatePicker – Important Attributes

There are few but important attributes to DatePicker.

• android:datePickerMode – This specifies what type of Date Picker has to be shown, either a Calendar/Spinner view like shown in the picture above
• android:calendarTextColor – The text color of the calendar view shown.
• android:endYear – The last year that has to be shown in the Calendar View
• android:firstDayOfWeek– First day of the week according to the calendar
• android:maxDate/android:minDate – The maximum and minimum date as shown in the calendar
• android:startYear – The first year in the calendar to be shown

You can check a list of all other attributes here

DatePicker – Activity Implementation

Let us create a simple Activity to implement our Date Picker.

Before going to that, there are several public methods that are used inside the class to manipulate the calendar view. They are given below

Important Public Methods

• getDayOfMonth(): Retrieves the day of the month as set by the user in the Date Picker
• getMonth(): Retrieves the month as set by the user from the Date Picker
• getYear(): Retrieves the year as set by the user from the Date Picker
• setSpinnersShown(boolean): You can modify the Date Picker to be either spinner or calendar view from the activity

Sample Application:

For our sample application we will use, Date Picker, Textview and a Button.

date_picker.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
<DatePicker
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:calendarTextColor="#444"
    android:startYear="2000"
    android:endYear="2019"
    android:id="@+id/date_picker"
    />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button_date"
        android:text="submit"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/text_view_time"
        android:textColor="@color/colorAccent"
        android:textSize="55sp"
        android:layout_gravity="center"/>
</LinearLayout>

DatePickerActivity.java

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.ProgressBar;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.TimePicker;

import java.util.Date;

public class DatePickerActivity extends AppCompatActivity {
    TextView textView;
    DatePicker datePicker;
    Button dateClicker;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.date_picker);
        textView = (TextView) findViewById(R.id.text_view_time);
        datePicker = (DatePicker) findViewById(R.id.date_picker);
        dateClicker = (Button) findViewById(R.id.button_date);
        dateClicker.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setText(datePicker.getDayOfMonth()+":"+datePicker.getMonth()+":"+datePicker.getYear());
            }
        });
    }
}

Resulting Application:

DatePicker – Material Design Ideas

You can check here for some very cool material design ideas for you next project.

Dont stop experimenting, you can create your custom themed Date Picker as well.

Drop in any comments you have below.

“Learn and be curious”

Know about TimePicker here.