Thursday, February 17, 2011

TimePicker

By Magesh Kumar   Posted at  2:25 AM   Android No comments


 A TimePicker is a widget that allows the user to select the time by hour, minute and AM or PM.

Layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">

<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>
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 empty, as it will be filled by our Activity with the current time.
Our Java code, myTimePicker.java:
package com.bogotobogo.myTimePicker;

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 myTimePicker 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.
       // 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();
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.
       // updates the time we display in the TextView
       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.
       // 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();
                    }
              };
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 and we'll get:

 

About the Author

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.
View all posts by: BT9

0 comments:

Back to top ↑
Connect with Us

What they says

© 2013 MaGeSH 2 help. WP Mythemeshop Converted by BloggerTheme9
Blogger templates. Proudly Powered by Blogger.