Android Time Picker Tutorial

Advertisements


Android Time Picker allows you to select the time of day in either 24 hour or AM/PM mode. The time consists of hours, minutes and clock format. Android provides this functionality through TimePicker class.

In order to use TimePicker class, you have to first define the TimePicker component in your activity.xml. It is define as below:

<TimePicker
   android:id="@+id/timePicker1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

After that you have to create an object of TimePicker class and get a reference of the above defined xml component. Its syntax is given below.

import android.widget.TimePicker;
private TimePicker timePicker1;
timePicker1 = (TimePicker) findViewById(R.id.timePicker1);	

In order to get the time selected by the user on the screen, you will use getCurrentHour() and getCurrentMinute() method of the TimePicker Class. Their syntax is given below.

int hour = timePicker1.getCurrentHour();
int min = timePicker1.getCurrentMinute();

Apart form these methods , there are other methods in the API that gives more control over TimePicker Component. They are listed below.

Sr.NoMethod & description
1is24HourView()
This method returns true if this is in 24 hour view else false
2isEnabled()
This method returns the enabled status for this view
3setCurrentHour(Integer currentHour)
This method sets the current hour
4setCurrentMinute(Integer currentMinute)
This method sets the current minute
5setEnabled(boolean enabled)
This method set the enabled state of this view
6setIs24HourView(Boolean is24HourView)
This method set whether in 24 hour or AM/PM mode
7setOnTimeChangedListener(TimePicker.OnTimeChangedListener onTimeChangedListener)
This method Set the callback that indicates the time has been adjusted by the user

Example

Here is an example demonstrating the use of TimePicker class. It creates a basic Time Picker application that allows you to set the time using TimePicker Widget

To experiment with this example , you can run this on an actual device or in an emulator.

StepsDescription
1You will use Eclipse IDE to create an Android application and name it as TimePicker under a package com.example.timepicker. While creating this project, make sure you Target SDK and Compile With at the latest version of Android SDK to use higher levels of APIs.
2Modify src/MainActivity.java file to add necessary code.
3Modify the res/layout/activity_main to add respective XML components
4Modify the res/values/string.xml to add necessary string components
5Run the application and choose a running android device and install the application on it and verify the results

Following is the content of the modifed main activity file src/com.example.timepicker/MainActivity.java.

package com.example.timepicker;

import java.util.Calendar;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.TextView;
import android.widget.TimePicker;

public class MainActivity extends Activity {

   private TimePicker timePicker1;
   private TextView time;
   private Calendar calendar;
   private String format = "";

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      timePicker1 = (TimePicker) findViewById(R.id.timePicker1);
      time = (TextView) findViewById(R.id.textView1);
      calendar = Calendar.getInstance();
      int hour = calendar.get(Calendar.HOUR_OF_DAY);
      int min = calendar.get(Calendar.MINUTE);
      showTime(hour, min);
   }

   public void setTime(View view) {
      int hour = timePicker1.getCurrentHour();
      int min = timePicker1.getCurrentMinute();
      showTime(hour, min);
   }

   public void showTime(int hour, int min) {
      if (hour == 0) {
         hour += 12;
         format = "AM";
      } else if (hour == 12) {
         format = "PM";
      } else if (hour > 12) {
         hour -= 12;
         format = "PM";
      } else {
         format = "AM";
      }
      time.setText(new StringBuilder().append(hour).append(" : ").append(min)
      .append(" ").append(format));
   }

   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
   // Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.main, menu);
      return true;
   }

}

Following is the modified content of the xml res/layout/activity_main.xml.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="@string/time_pick"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/set_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="180dp"
        android:onClick="setTime"
        android:text="@string/time_save" />

    <TimePicker
        android:id="@+id/timePicker1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/set_button"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24dp" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/timePicker1"
        android:layout_alignTop="@+id/set_button"
        android:layout_marginTop="67dp"
        android:text="@string/time_current"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView3"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="@string/time_selected"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

Following is the content of the res/values/string.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">TimePicker</string>
    <string name="action_settings">Settings</string>
	<string name="time_picker_example">Time Picker Example</string>
	<string name="time_pick">Pick the time and press save button</string>
	<string name="time_save">Save</string>
	<string name="time_selected"></string>
	<string name="time_current">The Time is:</string>
</resources>

Let's try to run our TimePicker application we just modified. I assume you had created your AVD while doing environment setup. To run the app from Eclipse, open one of your project's activity files and click Run Eclipse Run Icon icon from the toolbar. Eclipse installs the app on your AVD and starts it and if everything is fine with your setup and application, it will display following Emulator window:

Android Time Picker Tutorial

Now you can see that the time has already been set of the TimePicker widget. And the current time is also showing at the bottom label. Now we will change the time and press the save button.

Android Time Picker Tutorial

As you can see in the above image, that the time has been updated after pressing the save button.



Advertisements
Advertisements