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