Monday, 24 October 2011

TimePicker Dialod




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

Designing Part:


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);
      }
}    

Explanation for javaCode:

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.
     
        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.

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) {
                        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.

1 comment:

  1. I have read your blog its very attractive and impressive. I like it your blog.

    Java Training in Chennai Java Training in Chennai | Core Java Training in Chennai

    Online Java Training Online Java Training | Java J2EE Online Training | JavaEE Training Institute in Chennai m

    ReplyDelete