How to pick a second using TimePicker, android

Question

I have used TimePicker to make the user to choose time see here and here also. But I didnot find a way to make the user to select second also. Now user can select Hour and Minut

Answer 1

The best way around this would be to create three separate 'number pickers' instead of timepicker... I placed them within a linear layout and its working fine.

Then all you do is store the values inside three separate variables. int Hours, int Minutes, int Seconds and do your calculating.

This was my way around it without downloading any external sources which may contain viruses.

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center">

            <NumberPicker
                android:id="@+id/numpicker_hours"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

            </NumberPicker>

            <NumberPicker
                android:id="@+id/numpicker_minutes"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp">

            </NumberPicker>

            <NumberPicker
                android:id="@+id/numpicker_seconds"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

            </NumberPicker>

        </LinearLayout>

Answer 2

One quick and dirty way is to use two TimePickers, One for hours,minutes, and use the minutes on the other one as secunds. Hide the unused hours under the first minutes. This only works in 24 hour mode. Must declare timepicker for seconds first so locates under.

<RelativeLayout
  <TimePicker
    android:id="@+id/timePicker_Sec"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="76dp" />
  <TimePicker
    android:id="@+id/timePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/timePicker_Sec"   
    android:layout_marginLeft="0dp" />
</RelativeLayout>

Answer 3

I wrote a Kotlin extension function to do this. It's messy but it gets the job done:

/**
 * Adds seconds number picker into the [TimePicker] format programmatically.
 * */
fun TimePicker.addSeconds() {
    val system = Resources.getSystem()
    val idHour = system.getIdentifier("hour", "id", "android")
    val idMinute = system.getIdentifier("minute", "id", "android")
    val idAmPm = system.getIdentifier("amPm", "id", "android")
    val idLayout = system.getIdentifier("timePickerLayout", "id", "android")
    val spinnerHour = findViewById<View>(idHour) as NumberPicker
    val spinnerMinute = findViewById<View>(idMinute) as NumberPicker
    val spinnerAmPm = findViewById<View>(idAmPm) as NumberPicker
    val outerLayout = findViewById<View>(idLayout) as LinearLayout
    val layout = outerLayout.getChildAt(0) as LinearLayout
    layout.removeAllViews()
    (spinnerAmPm.parent as ViewGroup).removeView(spinnerAmPm)

    layout.addView(spinnerHour)
    setImeOptions(spinnerHour, 0)
    layout.addView(spinnerMinute)
    setImeOptions(spinnerMinute, 1)

    val spinnerSecond = createSecondPicker(spinnerHour.context)
    layout.addView(spinnerSecond)
    setImeOptions(spinnerAmPm, 2)
    val params = spinnerHour.layoutParams
    spinnerSecond.layoutParams = params

    layout.addView(spinnerAmPm)
    setImeOptions(spinnerAmPm, 3)
}

private fun createSecondPicker(context: Context): NumberPicker {
    val spinnerSecond = NumberPicker(context)
    spinnerSecond.id = R.id.second
    spinnerSecond.setFormatter { i -> String.format("%02d", i) }
    spinnerSecond.minValue = 0
    spinnerSecond.maxValue = 59
    return spinnerSecond
}

You'll also need to add this id to res/values/ids.xml so that you can reference the seconds field programmatically using R.id.second

<item name="second" type="id"/>

Shoutout to this post for the idea: https://stackoverflow.com/a/60601077/1709354

Answer 4

I've published an open source project on GitHub which has TimePicker with seconds:

https://github.com/IvanKovac/TimePickerWithSeconds

Have a look.

Answer 5

I think the best solution is to create your own TimePicker, by using the Time-class and three NumberPickers.

Answer 6

Here is a custom TimePickerDialog with seconds.

MainActivity.java

import android.content.SharedPreferences;
import android.preference.PreferenceManager;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.NumberPicker;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final SharedPreferences sharedPreferences = PreferenceManager.getDefaultSharedPreferences(getApplicationContext());
        final TextView timeTV = findViewById(R.id.time_text_view);
        timeTV.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                View view = View.inflate(MainActivity.this, R.layout.time_dialog, null);
                final NumberPicker numberPickerHour = view.findViewById(R.id.numpicker_hours);
                numberPickerHour.setMaxValue(23);
                numberPickerHour.setValue(sharedPreferences.getInt("Hours", 0));
                final NumberPicker numberPickerMinutes = view.findViewById(R.id.numpicker_minutes);
                numberPickerMinutes.setMaxValue(59);
                numberPickerMinutes.setValue(sharedPreferences.getInt("Minutes", 0));
                final NumberPicker numberPickerSeconds = view.findViewById(R.id.numpicker_seconds);
                numberPickerSeconds.setMaxValue(59);
                numberPickerSeconds.setValue(sharedPreferences.getInt("Seconds", 0));
                Button cancel = view.findViewById(R.id.cancel);
                Button ok = view.findViewById(R.id.ok);
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                builder.setView(view);
                final AlertDialog alertDialog = builder.create();
                cancel.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        alertDialog.dismiss();
                    }
                });
                ok.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        timeTV.setText(numberPickerHour.getValue() + ":" + numberPickerMinutes.getValue() + ":" + numberPickerSeconds.getValue());
//                        timeTV.setText(String.format("%1$d:%2$02d:%3$02d", numberPickerHour.getValue(), numberPickerMinutes.getValue(), numberPickerSeconds.getValue()));
                        SharedPreferences.Editor editor = sharedPreferences.edit();
                        editor.putInt("Hours", numberPickerHour.getValue());
                        editor.putInt("Minutes", numberPickerMinutes.getValue());
                        editor.putInt("Seconds", numberPickerSeconds.getValue());
                        editor.apply();
                        alertDialog.dismiss();
                    }
                });
                alertDialog.show();
            }
        });
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/time_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

time_dialog.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="16dp"
        android:gravity="center"
        android:orientation="horizontal">

        <NumberPicker
            android:id="@+id/numpicker_hours"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <NumberPicker
            android:id="@+id/numpicker_minutes"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp" />

        <NumberPicker
            android:id="@+id/numpicker_seconds"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#ffF0F0F0" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <Button
            android:id="@+id/cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:text="Cancel"
            android:textAllCaps="false" />

        <View
            android:id="@+id/view2"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#ffF0F0F0" />

        <Button
            android:id="@+id/ok"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:text="OK"
            android:textAllCaps="true" />
    </LinearLayout>

</LinearLayout>