Android TimePicker Tutorial
View more Tutorials:
Android TimePicker is a component that permits users to select a time including hour and minute.
TimePicker has two modes with different interface:
- Clock
- Spinner
Clock Mode
Clock mode is the default mode of the TimePicker, in which the user can visually select the time just like he/ she is adjusting the time on a clock. Besides, you can also use the keyboard to change values of hour and minute.
TimePicker (Clock Mode)
<TimePicker android:id="@+id/timePicker" android:layout_width="wrap_content" android:layout_height="wrap_content" android:timePickerMode="clock" />

TimePicker timePicker = (TimePicker) this.findViewById(R.id.timePicker); timePicker.setIs24HourView(true); // 24H Mode.

Spinner Mode
In Spinner mode, a TimePicker consists of 2 or 3 Spinners. These Spinners respectively allows the user to select the hour, the minute, and either AM or PM.
TimePicker in Spinner & AM_PM mode consists of three Spinners, in which the user chooses the hour in the first Spinner with the values ranging from 1 to 12. Next, select the minute in the second Spinner with the values from 0 to 59; last but not least, select AM/PM in the third spinner.
TimePicker (Spinner Mode)
<TimePicker android:id="@+id/timePicker" android:layout_width="wrap_content" android:layout_height="wrap_content" android:timePickerMode="spinner" />

TimePicker in Spinner & 24H mode only comprises 2 Spinners. The user chooses the hour in the first Spinner with the values ranging from 0 to 23, and the minute in the second Spinner with values from 0 to 59.
TimePicker timePicker = (TimePicker) this.findViewById(R.id.timePicker); timePicker.setIs24HourView(true); // 24H Mode.

Example preview:

Now, create a new project on Android Studio:
- File > New > New Project > Empty Activity
- Name: TimePickerExample
- Package name: org.o7planning.timepickerexample
- Language: Java
The interface of the application will look like this:

activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.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"> <TimePicker android:id="@+id/timePicker" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:timePickerMode="clock" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/textView_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="HH:mm" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/timePicker" /> </androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.timepickerexample; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.widget.TextView; import android.widget.TimePicker; public class MainActivity extends AppCompatActivity { private TimePicker timePicker; private TextView textViewTime; // Change this value and run the application again. private boolean is24HView = true; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); this.textViewTime = (TextView) this.findViewById(R.id.textView_time); this.timePicker = (TimePicker) this.findViewById(R.id.timePicker); this.timePicker.setIs24HourView(this.is24HView); this.timePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() { @Override public void onTimeChanged(TimePicker view, int hourOfDay, int minute) { textViewTime.setText(hourOfDay + ":" + minute); } }); } }