o7planning

Android TimePicker Tutorial with Examples

  1. Android TimePicker
  2. Example of TimePicker

1. Android TimePicker

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

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

}

Android Programming Tutorials

Show More

Android Programming Tutorials

Show More

Newest Articles

Show More