TimePicker

Обновлено: 23.05.2023, 1 сентября 2025

Компонент TimePicker позволяет пользователю выбрать время (часы, минуты). Данный виджет используют как правило на отдельном экране. Также существует похожее по функционалу диалоговое окно TimePickerDialog.

TimePicker раньше находился в разделе Date & Time в Android Studio 3.01. Сейчас на панели инструментов данного компонента нет, поэтому придётся добавлять вручную.

В Android 5 (API 21) внешний вид компонента изменился.

Добавим на экран текстовую метку и компонент выбора времени:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Время"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TimePicker
        android:id="@+id/timePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Пользователь может выбрать любое время на компоненте. Изменение времени можно наблюдать через слушатель OnTimeChangedListener(). Напишем пример, где программно установим время, будем отслеживать изменение времени пользователем и получать установленное время через нажатие кнопки.


package ru.alexanderklimov.timepickerdemo

import android.os.Bundle
import android.widget.TextView
import android.widget.TimePicker
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import java.util.Calendar

class MainActivity : AppCompatActivity() {

    private lateinit var timePicker: TimePicker
    private lateinit var infoTextView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        timePicker = findViewById(R.id.timePicker)
        infoTextView = findViewById(R.id.textView)

        val now = Calendar.getInstance()

        timePicker.hour = now.get(Calendar.HOUR_OF_DAY)
        timePicker.minute = now.get(Calendar.MINUTE)

        timePicker.setOnTimeChangedListener { _, hourOfDay, minute ->
            Toast.makeText(
                applicationContext, "onTimeChanged",
                Toast.LENGTH_SHORT
            ).show()
            infoTextView.text = "$hourOfDay:$minute"
        }
    }
}

Методы

В API 23 часть методов была признана устаревшими и вместо них теперь используются новые методы без слова Current:

int getHour()
int getMinute()
void setHour(int)
void setMinute(int)

Новый внешний вид в Android 5 Lollipop (API 21)

TimePicker

Так выглядит на Android 6.

TimePicker

Так выглядел компонент раньше.

TimePicker

MaterialDatePicker

В 2021 году в составе библиотеки Material Design появился компонент MaterialTimePicker.

Добавляем зависимость.


// первоначально появилось в версии 1.2.0-alpha03
implementation'com.google.android.material:material:1.2.0-alpha04'

Следует указать, что приложение использует тему из семейства Theme.MaterialComponents. Я использовал следующий вариант в styles.xml. Иначе приложение будет завершаться с ошибкой.


<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    ...
</style>

Добавим кнопку на экран для вызова диалогового окна выбора даты. В обработчик щелчка добавим код.


button.setOnClickListener {
    val builder = MaterialDatePicker.Builder.datePicker()
    val picker = builder.build()
    picker.show(supportFragmentManager, picker.toString())

    picker.addOnCancelListener {
        Log.d("DatePicker", "Dialog was cancelled")
    }

    picker.addOnNegativeButtonClickListener {
        Log.d("DatePicker", "Dialog Negative Button was clicked")
    }

    picker.addOnPositiveButtonClickListener {
        Log.d("DatePicker", "Date: ${picker.headerText}, Date epoch value = ${it}")
    }
}

В код также добавлены слушатели для различных событий - отмена окна выбора даты, щелчок на кнопке Cancel, щелчок на кнопке OK.

MaterialDatePicker

Выбор интервала дат через dateRangePicker()

Иногда нужно выбрать не конкретную дату, а некоторый интервал. В этом случае нужно заменить одну строчку кода.


//val builder = MaterialDatePicker.Builder.datePicker()
val builder = MaterialDatePicker.Builder.dateRangePicker()

Теперь выбор интервала делается двумя щелчками. Третий щелчок отменяет предыдущий выбранный интервал и начинает процесс заново. Кнопкой Cancel в этом окне является крестик в левом верхнем углу, а кнопкой OK выступает кнопка Save. Нажатие кнопки "Назад" вызовет событие закрытия диалогового окна для слушателя addOnCancelListener().

MaterialDatePicker

Так как теперь выбираются две даты, то немного исправим вывод значений.


picker.addOnPositiveButtonClickListener {
    Log.d("DatePicker", "Date: ${picker.headerText}, Date epoch value = ${it}")
    // другой вариант для работы с Pair<Long, Long>
    Log.d("DatePicker",
            "Date String = ${picker.headerText}, Date epoch values::${it
            .first}:: to :: ${it.second}")
}

TimePicker

Методы

MaterialDatePicker

Выбор интервала дат через dateRangePicker()

Реклама

Реклама