TimePicker Dialod
A TimePicker is a widget that allows the user to select the time by hour, minute and AM or PM.
Layout file: Main.xml
For the layout, we're using a vertical LinearLayout, with a TextView that will display the time and a Button that will initiate the TimePicker dialog. With this layout, the TextView will sit above the Button. The text value in the TextView is set a --/-- , as it will be filled by our Activity with the current 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:text="@string/hello" />
<TextView android:id="@+id/timeDisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="---/---"/>
<Button android:id="@+id/pickTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Change the time"/>
</LinearLayout>
Coding Part:
Our Java code : TimePickerDialodActivity.java
package com.murali.TimePicker;
import java.util.Calendar;
import android.app.Activity;
import android.app.Dialog;
import android.app.TimePickerDialog;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.TimePicker;
public class TimePickerDialodActivity extends Activity {
/** Called when the activity is first created. */
private TextView mTimeDisplay;
private Button mPickTime;
private int mHour;
private int mMinute;
static final int TIME_DIALOG_ID = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// capture our View elements
mTimeDisplay = (TextView) findViewById(R.id.timeDisplay);
mPickTime = (Button) findViewById(R.id.pickTime);
// add a click listener to the button
mPickTime.setOnClickListener(new View.OnClickListener(){
public void onClick(View v) {
showDialog(TIME_DIALOG_ID);
}
});
// get the current time
final Calendar c = Calendar.getInstance();
mHour = c.get(Calendar.HOUR_OF_DAY);
mMinute = c.get(Calendar.MINUTE);
// display the current date
updateDisplay();
}
@Override
protected Dialog onCreateDialog(int id) {
switch (id) {
case TIME_DIALOG_ID:
return new TimePickerDialog(this,
mTimeSetListener, mHour, mMinute, false);
}
return null;
}
// updates the time we display in the TextView
private void updateDisplay() {
mTimeDisplay.setText(
new StringBuilder()
.append(pad(mHour)).append(":")
.append(pad(mMinute)));
}
// the callback received when the user "sets" the time in the dialog
private TimePickerDialog.OnTimeSetListener mTimeSetListener =
new TimePickerDialog.OnTimeSetListener() {
public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
mHour = hourOfDay;
mMinute = minute;
updateDisplay();
}
};
private static String pad(int c) {
if (c >= 10)
return String.valueOf(c);
else
return "0" + String.valueOf(c);
}
}
We start by instantiating variables for our View elements and time fields. The TIME_DIALOG_ID is a static integer that uniquely identifies the dialog. In the onCreate() method, we get prepared by setting the layout and capturing the View elements. We then set an on-click listener for the Button, so that when it is clicked, it will show our TimePicker dialog. The showDialog() method will perform a callback to our Activity.
setContentView(R.layout.main);
// capture our View elements
mTimeDisplay = (TextView) findViewById(R.id.timeDisplay);
mPickTime = (Button) findViewById(R.id.pickTime);
// add a click listener to the button
mPickTime.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
showDialog(TIME_DIALOG_ID);
}
});
We then create an instance of Calendar and get the current hour and minute. Finally, we call updateDisplay() our own method that will fill the TextView with the time.
mHour = c.get(Calendar.HOUR_OF_DAY);
mMinute = c.get(Calendar.MINUTE);
// display the current date
updateDisplay();
}
The onCreateDialog() callback method is passed the identifier we gave showDialog() and initializes the TimePicker to the time we retrieved from our Calendar instance. It will be called by showDialog().
@Override
protected Dialog onCreateDialog(int id) {
switch (id) {
case TIME_DIALOG_ID:
return new TimePickerDialog(this,
mTimeSetListener, mHour, mMinute, false);
}
return null;
}
The method, updateDisplay(), simply takes our member fields for the time and inserts them in the mTimeDisplay TextView. Note that we call a new method, pad(), on the hour and minute.
private void updateDisplay() {
mTimeDisplay.setText(
new StringBuilder()
.append(pad(mHour)).append(":")
.append(pad(mMinute)));
}
Now when the user is done setting the time (clicks the "Set" button), we update our member fields with the new time and update our TextView.
private TimePickerDialog.OnTimeSetListener mTimeSetListener =
new TimePickerDialog.OnTimeSetListener() {
public void onTimeSet(TimePicker view,int hourOfDay,int minute) {
public void onTimeSet(TimePicker view,int hourOfDay,int minute) {
mHour = hourOfDay;
mMinute = minute;
updateDisplay();
}
};
The pad() method that we called from the updateDisplay() returns the appropriate String representation of the hour or minute. It will prefix a zero to the number if it's a single digit.
private static String pad(int c) {
if (c >= 10)
return String.valueOf(c);
else
return "0" + String.valueOf(c);
}
}
Run it.
Comments
Post a Comment