Wednesday, April 14, 2010

Android Date and Time Controls

The Date-Time Controls in Android enable the user to pick date and time values and store them anywhere.
The date and time controls include:
1. DatePicker
2. Time Picker.
3. DatePickerDialog.
4. TimePickerDialog.
5. AnalogClock.
6. DigitalClock.
7. chronometer

DatePicker:

The DatePicker control enables the user to select a value of date only.
<?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"
>
<TextView  
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:id="@+id/txt"
/>
<DatePicker
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:id="@+id/datePick"
/>
<Button
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:id="@+id/btn"
android:text="Select Date"
/>
</LinearLayout>


final DatePicker dp=(DatePicker)findViewById(R.id.datePick);
Button btn=(Button)findViewById(R.id.btn);
btn.setOnClickListener(new OnClickListener()
{

public void onClick(View arg0) {
// TODO Auto-generated method stub

TextView txt=(TextView)findViewById(R.id.txt);
txt.setText("You selected "+dp.getDayOfMonth()+"/"+(dp.getMonth()+1)+"/"+dp.getYear());
}

}

);

Notice that we add 1 to the value of DatePicker.getMonth() because the months range is from 0 to 11.

If you want to set an initial selected date for the DatePicker you can use:
DatePicker.init(year, monthOfYear, dayOfMonth, onDateChangedListener);

If you want to capture the date as the date changes in the control you can make the activity implements the OnDateChangedListener interface and implements the onDateChanged method
Calendar cal=Calendar.getInstance(Locale.ENGLISH);
dp.init(cal.getTime().getYear()+1900, cal.getTime().getMonth(), cal.getTime().getDay(), this);

then

public void onDateChanged(DatePicker view, int year, int monthOfYear,
int dayOfMonth) {
// TODO Auto-generated method stub
TextView txt=(TextView)findViewById(R.id.txt);
txt.setText("You selected "+view.getDayOfMonth()+"/"+(view.getMonth()+1)+"/"+view.getYear());
}


TimePicker:
TimePicker is like DatePicker but it displays time instead of date, here’s how it looks like:
<?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"
>
<TextView  
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:id="@+id/txt"
/>
<TimePicker
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:id="@+id/TimePick"
/>
<Button
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:id="@+id/btn"
android:text="Select Date"
/>
</LinearLayout>


final TimePicker tp=(TimePicker)findViewById(R.id.TimePick);
Button btn=(Button)findViewById(R.id.btn);
btn.setOnClickListener(new OnClickListener()
{

public void onClick(View arg0) {
// TODO Auto-generated method stub

TextView txt=(TextView)findViewById(R.id.txt);
txt.setText("You selected "+tp.getCurrentHour()+":"+tp.getCurrentMinute());

Notice that by default the time picker displays the time in AM/PM format. If you want it to display time in 24-hours format you can use
TimePicker.setIs24HourView(boolen is24HourView);
If you want to initialize the timepicker with a certain time you can use the methods:

TimePicker.setCurrentHour(int Hour);
TimePicker.setCurrentMinute(int Minute);

You can implement the OnTimeChangedListener so that you capture any change in the time picker:
final TimePicker tp=(TimePicker)findViewById(R.id.TimePick);
tp.setCurrentHour(10);
tp.setCurrentMinute(45);

tp.setOnTimeChangedListener(new OnTimeChangedListener()
{

public void onTimeChanged(TimePicker arg0, int arg1, int arg2) {
// TODO Auto-generated method stub
TextView txt=(TextView)findViewById(R.id.txt);
txt.setText("You selected "+arg0.getCurrentHour()+":"+arg0.getCurrentMinute());
}

}
);

We checked so far the DatePicker and TimePicker widgets, but they take big space on the screen so Android provides similar controls but with different look: the DatePickerDialog and TimePickerDialog.

These widgets act the same as DatePicker and TimePicker but the appear as dialogs or popups instead of occupying a space on the screen

DatePickerDialog
DatePickerDialog is not a View, that you can’t define it in the xml layout file.
Instead you declare it from code with the following two constructors:
DatePickerDialog(Context context, DatePickerDialog.OnDateSetListener callBack, int year, int monthOfYear, int dayOfMonth);
DatePickerDialog(Context context, int theme, DatePickerDialog.OnDateSetListener callBack, int year, int monthOfYear, int dayOfMonth);

You can use it like this:
public void onCreate(Bundle savedInstanceState)  {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button btn=(Button)findViewById(R.id.btn);

final OnDateSetListener odsl=new OnDateSetListener()
{

public void onDateSet(DatePicker arg0, int year, int month, int dayOfMonth) {
// TODO Auto-generated method stub
TextView txt=(TextView)findViewById(R.id.txt);
txt.setText("The date is "+dayOfMonth+"/"+month+"/"+year);
}

};

btn.setOnClickListener(new OnClickListener()
{

public void onClick(View arg0) {
// TODO Auto-generated method stub


Calendar cal=Calendar.getInstance();
DatePickerDialog datePickDiag=new DatePickerDialog(DateTimeControls.this,odsl,cal.get(Calendar.YEAR),cal.get(Calendar.MONTH),cal.get(Calendar.DAY_OF_MONTH));
datePickDiag.show();
}

}

);

}

To take an action when the date is set you define an OnDateSelectedListner and implement the onDateSet method

TimePickerDialog

DatePickerDialog is similar to DatePickerDialog but used for setting time.
The constructors for TimePickerDialog are:
TimePickerDialog(Context context, TimePickerDialog.OnTimeSetListener callBack, int hourOfDay, int minute, boolean is24HourView);

TimePickerDialog(Context context, int theme, TimePickerDialog.OnTimeSetListener callBack, int hourOfDay, int minute, boolean is24HourView);


You can use it like this:
public void onCreate(Bundle savedInstanceState)  {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button btn=(Button)findViewById(R.id.btn);
}

final OnTimeSetListener otsl=new OnTimeSetListener()
{

public void onTimeSet(TimePicker arg0, int hourOfDay, int minute) {
// TODO Auto-generated method stub
TextView txt=(TextView)findViewById(R.id.txt);
txt.setText("The time is "+hourOfDay+":"+minute);
}
};

btn.setOnClickListener(new OnClickListener()
{

public void onClick(View arg0) {
// TODO Auto-generated method stub


Calendar cal=Calendar.getInstance();
TimePickerDialog timePickDiag=new TimePickerDialog(DateTimeControls.this,otsl,cal.get(Calendar.HOUR_OF_DAY),cal.get(Calendar.MINUTE),true);
timePickDiag.show();
}

}

);




AnalogClock

If you want to display time as in a clock you can use the AnalogClock widget. It just displays the time with no ability to edit the time.
<?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"
>
<TextView  
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:id="@+id/txt"
/>

<AnalogClock  
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:id="@+id/clock"
/>


</LinearLayout>






DigitalClock
Same as AnalogClock but displays a digital clock
<?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"
>
<TextView  
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:id="@+id/txt"
/>

<DigitalClock 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:id="@+id/digitalClock"
/>


</LinearLayout>




ChronoMeter:

The ChronoMeter acts like a timer. It has a starting point and an endpoint and you can calculate the time elapsed between these two points.

No comments:

Post a Comment