Android TimePicker Tutorial with Examples

Android TimePicker
Example of TimePicker

1. Android TimePicker

No ADS

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.

2. Example of TimePicker

No ADS

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

}

No ADS

Android Programming Tutorials

Flutter Programming Tutorials

Android TimePicker Tutorial with Examples

1. Android TimePicker

2. Example of TimePicker

Android Programming Tutorials

Android Programming Tutorials

Newest Articles