Controls - Picker Views (Date and Time)
×
Home Courses Community Support
Gray Matter

First Step Towards Android: Introduction »

Understanding Activities and Intents »

Hands On With UI Designing In Android (Controls-Views,Widgets and Layouts) »

Updating... »

Controls - Picker Views (Date and Time)

Picker Views : Time Picker and Date Picker

Selecting the date and time is one of the common tasks you need to perform in a mobile application. Android supports this functionality through the TimePicker and DatePicker views. The following sections show how to make use of these views in your activity.
 

TimePicker View

 

The TimePicker view enables users to select a time of the day, in either 24-hour mode or AM/PM mode. To understand it in a better manner let's take an example.
 

To see the TimePicker View follow these steps-

Step1: Create a new Android project and name it PickerViews.

Step2: Now we will modify activity_main.xml file. So add the following code into activity_main.xml file-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TimePicker android:id="@+id/timePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button android:id="@+id/btnSet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am all set!" />
</LinearLayout>

 

Step3: Now Press F11 key to debug the application on the Android Emulator or on the device. Let's see the output window now.

Above figure shows the TimePicker in action. Besides clicking on the plus (+) and minus (-) buttons, you can use the numeric keypad on the device to change the hour and minute, and click the AM button to toggle between AM and PM.

Step4: Now we will modify MainActivity.java file. So add the following code into MainActivity.java file-

package com.example.PickerViews;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TimePicker;
import android.widget.Toast;
public class MainActivity extends Activity {
TimePicker timePicker;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
timePicker = (TimePicker) findViewById(R.id.timePicker);
timePicker.setIs24HourView(true);
//---Button view---
Button btnOpen = (Button) findViewById(R.id.btnSet);
btnOpen.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Toast.makeText(getBaseContext(),
"Time selected:" +
timePicker.getCurrentHour() +
":" + timePicker.getCurrentMinute(),
Toast.LENGTH_SHORT).show();
}
});
}
}

 

Step5: Now Press F11 key to debug the application on the Android Emulator or on the device. Let's see the output window now.This time, the TimePicker will be displayed in the 24-hour format. Clicking the Button will display the time that you have set in the TimePicker.
 

 

enlightenedThe getCurrentHour() method always returns the hour in 24-hour format, i.e., a value from 0 to 23.

 

Displaying the TimePicker in a Dialog Window

While you can display the TimePicker in an activity, a better way is to display it in a dialog window, so that once the time is set, it disappears and doesn’t take up any space in an activity.
 

To see the TimePicker in the dialog window follow these steps we are going to use the same project created earlier-;

Step1: We will modify MainActivity.java file. So add the following code into MainActivity.java file-

package com.example.PickerViews;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TimePicker;
import android.widget.Toast;
import android.app.Dialog;
import android.app.TimePickerDialog;
public class MainActivity extends Activity {
TimePicker timePicker;
int hour, minute;
static final int TIME_DIALOG_ID = 0;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
showDialog(TIME_DIALOG_ID);
timePicker = (TimePicker) findViewById(R.id.timePicker);
timePicker.setIs24HourView(true);
//---Button view---
Button btnOpen = (Button) findViewById(R.id.btnSet);
btnOpen.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Toast.makeText(getBaseContext(),
"Time selected:" +
timePicker.getCurrentHour().toString() +
":" + timePicker.getCurrentMinute().toString(),
Toast.LENGTH_SHORT).show();
}
});
}
@Override
protected Dialog onCreateDialog(int id)
{
switch (id) {
case TIME_DIALOG_ID:
return new TimePickerDialog(
this, mTimeSetListener, hour, minute, false);
}
return null;
}
private TimePickerDialog.OnTimeSetListener mTimeSetListener =
new TimePickerDialog.OnTimeSetListener()
{
public void onTimeSet(
TimePicker view, int hourOfDay, int minuteOfHour)
{
hour = hourOfDay;
minute = minuteOfHour;
Toast.makeText(getBaseContext(),
"You have selected : " + hour + ":" + minute,
Toast.LENGTH_SHORT).show();
}
};
}

 

Step2: Now Press F11 key to debug the application on the Android Emulator or on the device. Let's see the output window now.

When the activity is loaded, you can see the TimePicker displayed in a dialog window. Set a time and then click the Setbutton. You will see the Toast window displaying the time that you just set.

 

DatePicker View

Another view that is similar to the TimePicker is the DatePicker. Using the DatePicker, you can enable users to select a particular date on the activity. To understand it in a better manner let's take an example.

To see the DatePicker View follow these steps.we are going to use the same project created earlier :-

Step1: We will modify activity_main.xml file. So add the following code into activity_main.xml file-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<DatePicker android:id="@+id/datePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TimePicker android:id="@+id/timePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button android:id="@+id/btnSet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am all set!" />
</LinearLayout>

 

Step2: Now Press F11 key to debug the application on the Android Emulator or on the device. Let's see the output window now.


Above figure shows the DatePicker and TimePicker views in action. Besides clicking on the plus (+) and minus (-) buttons, you can use the numeric keypad on the device to change the hour and minute, and click the AM button to toggle between AM and PM. Also you can set the date accordingly.
 

Step3: Now we will modify MainActivity.java file. So add the following code into MainActivity.java file-

package com.example.PickerViews;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import android.app.Dialog;
import android.app.TimePickerDialog;
import android.widget.TimePicker;
import android.widget.DatePicker;
public class MainActivity extends Activity {
TimePicker timePicker;
DatePicker datePicker;
int hour, minute;
static final int TIME_DIALOG_ID = 0;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//showDialog(TIME_DIALOG_ID);
timePicker = (TimePicker) findViewById(R.id.timePicker);
timePicker.setIs24HourView(true);
datePicker = (DatePicker) findViewById(R.id.datePicker);
//---Button view---
Button btnOpen = (Button) findViewById(R.id.btnSet);
btnOpen.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Toast.makeText(getBaseContext(),
"Date selected:" + datePicker.getMonth() + 1 +
"/" + datePicker.getDayOfMonth() +
"/" + datePicker.getYear() + "\n" +
"Time selected:" + timePicker.getCurrentHour() +
":" + timePicker.getCurrentMinute(),
Toast.LENGTH_SHORT).show();
}
});
}
@Override
protected Dialog onCreateDialog(int id)
{
switch (id) {
case TIME_DIALOG_ID:
return new TimePickerDialog(
this, mTimeSetListener, hour, minute, false);
}
return null;
}
private TimePickerDialog.OnTimeSetListener mTimeSetListener =
new TimePickerDialog.OnTimeSetListener()
{
public void onTimeSet(
TimePicker view, int hourOfDay, int minuteOfHour)
{
hour = hourOfDay;
minute = minuteOfHour;
Toast.makeText(getBaseContext(),
"You have selected : " + hour + ":" + minute,
Toast.LENGTH_SHORT).show();
}
};
}

 

Step4: Now Press F11 key to debug the application on the Android Emulator or on the device. Let's see the output window now.Once the date is set, clicking the Button will display the date set.

 

Displaying the DatePicker in a Dialog Window

Like the TimePicker, you can also display the DatePicker in a dialog window.
 

To see the DatePicker in the dialog window follow these steps we are going to use the same project created earlier-

Step1: We will modify MainActivity.java file. So add the following code into MainActivity.java file-

package com.example.PickerViews;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import android.app.Dialog;
import android.app.TimePickerDialog;
import android.widget.TimePicker;
import android.widget.DatePicker;
import android.app.DatePickerDialog;
import java.util.Calendar;
public class MainActivity extends Activity {
TimePicker timePicker;
DatePicker datePicker;
int hour, minute;
int yr, month, day;
static final int TIME_DIALOG_ID = 0;
static final int DATE_DIALOG_ID = 1;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//showDialog(TIME_DIALOG_ID);
//---get the current date---
Calendar today = Calendar.getInstance();
yr = today.get(Calendar.YEAR);
month = today.get(Calendar.MONTH);
day = today.get(Calendar.DAY_OF_MONTH);
showDialog(DATE_DIALOG_ID);
timePicker = (TimePicker) findViewById(R.id.timePicker);
timePicker.setIs24HourView(true);
datePicker = (DatePicker) findViewById(R.id.datePicker);
//---Button view---
Button btnOpen = (Button) findViewById(R.id.btnSet);
btnOpen.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Toast.makeText(getBaseContext(),
"Date selected:" + datePicker.getMonth() +
"/" + datePicker.getDayOfMonth() +
"/" + datePicker.getYear() + "\n" +
"Time selected:" + timePicker.getCurrentHour() +
":" + timePicker.getCurrentMinute(),
Toast.LENGTH_SHORT).show();
}
});
}
@Override
protected Dialog onCreateDialog(int id)
{
switch (id) {
case TIME_DIALOG_ID:
return new TimePickerDialog(
this, mTimeSetListener, hour, minute, false);
case DATE_DIALOG_ID:
return new DatePickerDialog(
this, mDateSetListener, yr, month, day);
}
return null;
}
private DatePickerDialog.OnDateSetListener mDateSetListener =
new DatePickerDialog.OnDateSetListener()
{
public void onDateSet(
DatePicker view, int year, int monthOfYear, int dayOfMonth)
{
yr = year;
month = monthOfYear;
day = dayOfMonth;
Toast.makeText(getBaseContext(),
"You have selected : " + (month + 1) +
"/" + day + "/" + year,
Toast.LENGTH_SHORT).show();
}
};
private TimePickerDialog.OnTimeSetListener mTimeSetListener =
new TimePickerDialog.OnTimeSetListener()
{
public void onTimeSet(
TimePicker view, int hourOfDay, int minuteOfHour)
{
hour = hourOfDay;
minute = minuteOfHour;
Toast.makeText(getBaseContext(),
"You have selected : " + hour + ":" + minute,
Toast.LENGTH_SHORT).show();
}
};
}

 

Step2: Now Press F11 key to debug the application on the Android Emulator or on the device. Let's see the output window now.

 

When the activity is loaded, you can see the DatePicker displayed in a dialog window. Set a date and then click the Set button. The Toast window will display the date you have just set.

enlightenedWe will discuss the List views in the next section...

 

 

← Preview

Controls - Some Basic Views (TextView, ImageView, Button etc.)

Next →

Layouts (Linear, Relative, Absolute, Table, List, Grid, Frame, Scroll)

NOTES

Our mission is to provide highly effective and quality education via innovative solutions. Geeksdemy look forward to bridge the gap between in-demand technology and academics in order to deliver innovative, easy, interesting and affordable learning across the Globe.

Courses

  • Python
  • Game Development with Unity 3D
  • Arduino
  • PCB & Circuit Designing
  • Robotics and Embedded C
  • 8051/8052 Embedded Systems
  • QuadCopter & UAV
  • MATLAB with Robotics
  • Raspberry Pi
Learn On the Go!
Get the Android App
Get the iOS App