How can I set a minute interval in DialogFragment

Question

I'm trying to set a 10 minute interval in the android DialogFragment(suggested by google), but I really can't find a way to do it.

Here is the fragment class wich shows the dialog:

public class TimePickerFragment extends DialogFragment
        implements TimePickerDialog.OnTimeSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current time as the default values for the picker
        final Calendar c = Calendar.getInstance();
        int hour = c.get(Calendar.HOUR_OF_DAY);
        int minute = c.get(Calendar.MINUTE);

        // Create a new instance of TimePickerDialog and return it
        return new TimePickerDialog(getActivity(), this, hour, minute,
                DateFormat.is24HourFormat(getActivity()));
    }

    public void onTimeSet(TimePicker view, int hourOfDay, int minute) {

        String realMinute= "";

        switch (minute) {
            case 1:
                realMinute = "01";
                break;
            case 2:
                realMinute = "02";
                break;
            case 3:
                realMinute = "03";
                break;
            case 4:
                realMinute = "04";
                break;
            case 5:
                realMinute = "05";
                break;
            case 6:
                realMinute = "06";
                break;
            case 7:
                realMinute = "07";
                break;
            case 8:
                realMinute = "08";
                break;
            case 9:
                realMinute = "09";
                break;
            default:
                realMinute = String.valueOf(minute);
                break;
        }

        final String selectedDate = String.valueOf(hourOfDay) + ":" + realMinute;
        EditText selectedTimeTxt = (EditText) getActivity().findViewById(R.id.selectedTime);
        selectedTimeTxt.setText(selectedDate);
    }

Everything works as expected, but what I need is to allow the user to pick only intervals of 10 minutes - for example 1:10, 1:20, 1:30, 1:40 etc...

Is it possible to modify it, or extend it somehow in order to fit my needs? I know that I'm missing a basic point here, but as a newbie I'm not able to spot it.

EDIT

Here my views are:

Madea

A quick Google search let me to this answer: #7714038 – Varicella

@Varicella I have tried it and it is not working. it just multiply the minutes by the interval value. Also there is no visual change on teh picker. :( – Madea

How about creating your own custom timepickerdialog using TimePicker views such as #2580716? TimePicker allows you to set which values it has, so you could have ["10", "20", "30",..] as options for minutes – Varicella

Answer 1

You can set your own values to the 2nd number picker (the minute number picker), with a call of setDisplayedValues. However you first need to find the NumberPicker view.

Android Device Monitor, has a nice feature of capturing the device's screen and the separate views, so you can find the id (or a path) to your wanted view:

Since your new value array holds 6 values (0...5), you will need to convert the current minutes to tens, so you don't go out of range.

Here's a complete example:

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    final Calendar c = Calendar.getInstance();
    int hour = c.get(Calendar.HOUR_OF_DAY);
    // Convert current minutes to tens
    // 55 = 50, 56 = 00
    int minute = c.get(Calendar.MINUTE) / 10;
    minute = (minute > 5) ? 0 : minute;

    // Create a new instance of TimePickerDialog and return it
    final TimePickerDialog tpd = new TimePickerDialog(getActivity(), this, hour, minute,
            DateFormat.is24HourFormat(getActivity()));

    tpd.setOnShowListener(new DialogInterface.OnShowListener() {
        @Override
        public void onShow(DialogInterface dialog) {
            int tpLayoutId = getResources().getIdentifier("timePickerLayout", "id", "android");

            ViewGroup tpLayout = (ViewGroup) tpd.findViewById(tpLayoutId);
            ViewGroup layout = (ViewGroup) tpLayout.getChildAt(0);

            // Customize minute NumberPicker
            NumberPicker minutePicker = (NumberPicker) layout.getChildAt(2);
            minutePicker.setDisplayedValues(new String[]{"00", "10", "20", "30", "40", "50"});
            minutePicker.setMinValue(0);
            minutePicker.setMaxValue(5);
        }
    });

    return tpd;
}

public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
    minute = minute * 10;
    Toast.makeText(getActivity(), "Selected minute: " + minute, Toast.LENGTH_LONG).show();
}

Edit:

When using AppCompat theme, the dialog will show a circular slider, which is uncustomizable. However you can tell the dialog to use a newer theme (which won't be a problem because your minSdk is 15):

final TimePickerDialog tpd = new TimePickerDialog(getActivity(),
        android.R.style.Theme_Holo_Light_Dialog, this, hour, minute,
        DateFormat.is24HourFormat(getActivity()));

Bobwhite

There is an error Attempt to invoke virtual method 'android.view.View android.view.ViewGroup.getChildAt(int)' on a null object reference at ViewGroup layout = (ViewGroup) tpLayout.getChildAt(0); :( – Madea

@Madea are you using the exact same code as in my answer? Your error could mean the layout is not yet inflated or it's different from the one my TimePickerDialog has. Confirm which one it is, by using the method I posted (with Android Device Monitor). – Bobwhite

@Madea looks like you're using an AppCompat theme which provides a different TimePickerDialog. What API are you using? – Bobwhite

minSdkVersion: 15, targetSdkVersion: 21, compileSdkVersion: 21 on a Lolipop emulator – Madea

@Madea then there's no need for you to use the AppCompat theme. In your styles.xml change to <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar"> or equivalent. – Bobwhite

@Madea what you're seeing is the old design of a TimePicker. It contains a circular slider which is a single view and is not customizable. You're better off using the new TimePicker or creating your own from scratch. – Bobwhite

Let us continue this discussion in chat. – Madea