Android Time Picker

0
940

Android Time Picker offers you a functionality where a user can select the time of a day manually. This can be done either in the 24 hours format or in AM-PM mode. The application bundled with the Time Picker will allow the user to pick various components of the time, which are hours, minutes, and the clock format. Well, to use this functionality in your Android application, you need to make use of TimePicker class.

Also Read: Android Date Picker

Various Methods Controlling Android TimePicker Component
The TimePicker component should be defined in your activity.xml file beforehand. Only then you will be able to use the TimePicker class in your application development phase. Take a look at the following code for the better understanding of what is needed to use the Time Picker component.

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

After modifying the activity.xml file, create an object of the TimePicker class. In short, you just need to instantiate the TimePicker class before you can proceed ahead. Also, make sure that you get a reference to the above-defined XML component. This code to achieve the above-asked data is given in the following section.

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

Now, you need to make use of a few methods offered by the TimePicker class. These methods are mentioned in the below provided table.

S. No. Method Description
1 getCurrentMinute() * This get method will return the current minute from the screen.
2 getCurrentHour() * This get method will return the current hour from the screen.

The use of both these methods are shown in the below code.

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

Other than the above-mentioned methods, the API own various methods that offer you complete control over the TimePicker components. A list of the major methods of the TimePicker class are tabulated below.

S. No. Method Description
1 isEnabled() * This method returns the view’s enabled status.
2 is24HourView() * If the method returns true then the 24 hour view is applicable. Otherwise, the method will return false.
3 setEnabled(boolean enabled) * The enabled state of a view can be set by this method.
4 setCurrentHour(Integer currentHour) * This method is used to set the current hour  for the application.
5 setCurrentMinute(Integer currentMinute) * This method is used to set the current minute for the application.
6 setIs24HourView(Boolean is24HourView) * This method determines whether the view needs to be set to 24 hours mode or to AM-PM mode.
7 setOnTimeChangedListener(TimePicker.OnTimeChangedListener onTimeChangedListener) * This method sets a callback indicating the change in the time set by the user, manually.

The following example will help you understand the use of TimePicker class in your Android application. The app will allow the user to set the time manually, which has been made possible only by the use of TimePicker widget.

 Step 1: Create an Android application on the Android Studio IDE. Name this app as TimePicker. Do not forget to store this file under the com.example.timepicker package.

Step 2: Now, add the required code in the main activity file, which is MainActivity.java. You can trace the src/com.example.timepicker/ path to get to this file.

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

Step 3: The next file which needs modification is activity_main.xml. In here, you need to add all the necessary XML components. To find this file, you need to follow the res/layout/ directory. 

<?xml version=”1.0″ encoding=”utf-8″?>
<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>

Step 4: Even the strings.xml file needs the inclusion of required string constants. This file will be easily available to you under the res/values/ path.

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

Step 5: The only step left is to verify all the applied changes by running this newly modified TimePicker app. For this, you need to have an AVD (which you must have already created during the environment setup). Well, to run this app, start the Android Studio IDE. In here, open any of the activity files of your project. Now, locate the Run button from the provided toolbar. After that, the Android will start installing this app on your AVD. The successful setup and the verification will lead you to the final display of the app. The final output will be displayed on the Emulator window.

In the above shown screenshot, you can easily see that a TimePicker component (an analog watch) is on the display. The user needs to select an appropriate time from the TimePicker widget and click on the Save button. Whatever time is picked by the user will then be set as the current time of the application.