Android Adventures - Pickers
Written by Mike James   
Tuesday, 08 October 2013
Article Index
Android Adventures - Pickers
Date Picker
Number Picker

Updating the time

What about getting an update every time the user changes the TimePicker?

The solution to this is to write an event handler for an OnTimeChanged event. As always, this is a matter of either implementing the OnTimeChangedListener Interface in the Activity or as an anonymous class. Using Android Studio the anonymous class is the simplest approach. If you type in

TimePicker.OnTimeChangedListener OnTimeChanged=
       new TimePicker.OnTimeChangedListener() {

using the code completion then at the end Android Studio will generate a stub:

TimePicker.OnTimeChangedListener OnTimeChanged=
     new TimePicker.OnTimeChangedListener() {
 @Override
 public void onTimeChanged(
       TimePicker view,
       int hourOfDay,
       int minute) {
 }
}

You can guess that when the time is changed by the user the onTimeChanged method is called and the TimePicker that triggered the event is passed as view, and its hour and minute setting as hourOfDay and minute.  

All that remains is to set the event handler using the setOnTimeChangedListener method. 

For example, to transfer the new time to the TextView used in the previous example you would use:

 

TimePicker.OnTimeChangedListener OnTimeChanged =
          new TimePicker.OnTimeChangedListener() {
 @Override
 public void onTimeChanged(
               TimePicker view,
               int hourOfDay,
               int minute) {
 TextView tv = (TextView)
                  findViewById(R.id.textView);
 tv.setText(Integer.toString(hourOfDay) +
               ":" + Integer.toString(minute));
 }
};

And you need to add:

tp.setOnTimeChangedListener(OnTimeChanged);

to OnCreate to associate the OnTimeChanged object and its event handling method with the TimePicker.

Now if you run the program you will see the TextView change every time the user alters the TimePicker by whatever method.

 

The full program, including the code for the button and the event handler is shown below and is also downloadable from the CodeBin:

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.TextView;
import android.widget.TimePicker;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 TimePicker tp = (TimePicker)
               findViewById(R.id.timePicker);
 tp.setIs24HourView(true);
 tp.setCurrentMinute(10);
 tp.setCurrentHour(13);
 tp.setOnTimeChangedListener(OnTimeChanged);
}

public  void doButtonClick(View e) {
  TextView tv =
       (TextView)findViewById(R.id.textView);
  TimePicker tp =
       (TimePicker) findViewById(R.id.timePicker);
  tv.setText(tp.getCurrentHour().toString()
     + ":" + tp.getCurrentMinute().toString());
 }

 TimePicker.OnTimeChangedListener OnTimeChanged =
          new TimePicker.OnTimeChangedListener() {
 @Override
  public void onTimeChanged(
     TimePicker view,
     int hourOfDay,
     int minute) {
    TextView tv =
     (TextView) findViewById(R.id.textView);
    tv.setText(Integer.toString(hourOfDay) +
                ":" + Integer.toString(minute));
  }
 };
}

 

DatePicker

Once you have seen the TimePicker in action there is very little to add to cover the DatePicker.  

The only big problem is that at the time of writing the DatePicker and the Calendar widget don't render in the designer. If you place a DataPicker on the design surface you will see the message:

 

dateerror

 

 

You can still use the designer to place a DatePicker and you can use the Properties Window to modify it but you cant drag and size the widget interactively. 

To see the DatePicker in action simply start a new project called Date and accept all of the defaults. Place a DatePicker on the design surface at the top lefthand corner - you wont be able to edit it after you place it because of the bug. 

To see the standard three "spinner" view of the DatePicker you need to add to the end of the onCreate event handler:

DatePicker dp = (DatePicker)
                findViewById(R.id.datePicker);
dp.setCalendarViewShown(false);

 

DatePicker

 

As with the TimePicker, the DatePicker is shown in Holo style when you build for APIs 11 or greater. 

You can show the older style by editing either the style.xml in values-v11 and/or values-v14 to read:

<style name="AppBaseTheme" 
              parent="android:Theme.Light">
<!-- API 14 theme customizations can go here. -->
</style>

If you do this or if you target an earlier API what you will see is:

 

Dateoldstyle

 

As an alternative you can opt to also show a full Calendar in either style by setting CalendarViewShown to true and you can remove the spinners by setting SpinnersShown to false.

 

cal

 

As well as playing with the way the DatePicker looks, you can also set and get all of the parts of a date using:

  • DayOfMonth
  • Month
  • Year

You can also set and get maximum and minimum dates that the widget will show. 

You can set up a button to allow the user to set the date as with the TimePicker or you can use the OnDateChanged event to track the value. Doing this follows the same steps as for the OnTimeChanged event but with a small difference - there is no setOnDateChangedListener method. Instead there is an init method which can be used to set the date and the event handler. 

For example, if you add a TextView to the bottom of the design surface and the following code for the event handler then you can see the date change each time the user makes a change:


DatePicker.OnDateChangedListener onDateChanged=
  new DatePicker.OnDateChangedListener() {
 @Override
 public void onDateChanged(
        DatePicker view,
        int year,
        int monthOfYear,
        int dayOfMonth) {
  TextView tv =
         (TextView)findViewById(R.id.textView);
  tv.setText(Integer.toString(monthOfYear) +
    "/"+Integer.toString(dayOfMonth)+
       "/"+Integer.toString(year)
  );
 }
};

 

To set up the DatePicker you need to add to the end of the OnCreate event handler:

  dp.init(2014,4,2,onDateChanged);

which sets the year, month and day and the event handler.

If you run the app you will see:

dateupdate

 

This tells you at once that the months are numbered starting with Jan at zero not 1. The solution is to add one to the month number. 

The complete program, also in the CodeBin is:

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

public class MainActivity extends Activity {
@Override
 protected void onCreate(Bundle savedInstanceState)  {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  DatePicker dp = (DatePicker)  
  findViewById(R.id.datePicker);
  dp.init(2014,4,2,onDateChanged);
  dp.setCalendarViewShown(false);
  dp.setSpinnersShown(true);

 }

 DatePicker.OnDateChangedListener onDateChanged=
     new DatePicker.OnDateChangedListener() {
   @Override
   public void onDateChanged(
      DatePicker view,
      int year,
      int monthOfYear,
      int dayOfMonth) {
    TextView tv =
     (TextView)findViewById(R.id.textView);
    tv.setText(Integer.toString(monthOfYear+1) +
       "/"+Integer.toString(dayOfMonth)+
       "/"+Integer.toString(year) );
  }
 };

}



Last Updated ( Saturday, 16 August 2014 )
 
 

   
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.