Android studio timepicker style

Android TimePicker Example

October 06, 2017

Android TimePicker UI control can be used to let users pick time in android applications. Using TimePicker, applications can get valid and well formatted time. TimePicker control can be provided by using TimePickerDialog or TimePicker widget.

In this post, you can learn using TimePicker, TimePickerDialog, TimePicker widget, TimePicker material styles, TimePicker custom styles, TimePicker event handling, TimePicker clock mode, and TimePicker spinner mode.

Android TimePickerDialog Example

To show TimePicker using TimePickerDialog, you need to create a fragment by extending DialogFragment class and implementing onCreateDialog method. In onCreateDialog method, you need to instantiate TimePickerDialog setting current time and return it.

In the activity where you need to show TimePicker, you need to instantiated the Fragment and show it in response to user event such as button click.

TimePicker dialog fragment

Activity

TimePickerDialog example output

Android TimePickerDialog event handling

To handle TimePickerDialog events, you need to implement TimePickerDialog.OnTimeSetListener interface which has onTimeSet callback that gets called every time user picks time using TimePicker. You can add timeSetListener to TimePickerDialog by passing it to constructor as shown in the above dialog fragment code.

Instead of TimePickerDialog, you can use TimePicker widget to provide TimePicker control in your application. You can define TimePicker in layout xml using TimePicker element as shown below.

In the activity, you can get the TimePicker object and set time change listener by calling setOnTimeChangedListener method and passing TimePicker.OnTimeChangedListener instance to it. TimePicker.OnTimeChangedListener interface has one callback method onTimeChanged, in this method you can get user picked time.

Android TimePicker Modes

TimePicker can be used in two modes: clock and spinner mode. If you use material themes, the default TimePicker mode is clock. Above pictures show TimePicker in clock mode. You can change default setting using android:timePickerMode attribute. It takes clock or spinner as values. Below picture shows TimePicker in spinner mode.

Android TimePicker Custom Material Style

TimePicker material style application level

You can change time picker color by defining custom colors in your custom application theme as shown below and setting it as application theme. This color change impacts not only TimePicker but also other controls throughout the application.

To change colors of only TimePicker control throughout the application, you need to first define custom TimePicker style and set it as theme for time picker in your application theme as shown below.

Android provides Widget.Material.TimePicker and Widget.Material.Light.TimePicker material styles for TimePicker widget. You can customize and apply these styles to TimePicker as shown below.

Applying custom material to TimePicker.

Output of TimePicker custom material style.

Android TimePicker Spinner Custom Color

To change TimePicker spinner’s selection divider color, define colorControlNormal property in your custom style and apply it to TimePicker.

About

Android app development tutorials and web app development tutorials with programming examples and code samples.

Источник

Создаем красивый Date/Time/Data Picker в Android

Рано или поздно любой разработчик сталкивается с мыслью, что что-то в жизни нужно написать так, чтобы нравилось не заказчику, а самому себе. Решив, что наконец-то я созрел для написания приложения для Android, которым я сам бы пользовался с удовольствием — столкнулся с тем, что внешний вид вьюх в Android не очень-то и готов к воплощению моих красивых идей. И если обычные кнопки и TextView легко поддаются переделке, то вот с TimePicker-ом дела обстоят намного хуже. Творческая часть мозга взбунтовалась и решила, что если в приложении и будет Date/TimePicker, то такой, чтобы им было не только удобно, но и приятно пользоваться, иначе она (та самая творческая часть мозга) объявит бойкот и перестанет помогать.

Ну что же, вызов принят, напишем свой Picker с преферансом и куртизанками.

Именно такой Picker мы будем сооружать.

(Для тех кто просто хочет использовать виджет — ссылка на Git в конце статьи)

Первым делом пришлось ответить себе вопросы — а каким должен быть этот самый Picker и что он должен уметь делать?

Конечно, на вкус и цвет фломастеры разные, но если сравнить стилистику конкурирующих Picker-ов, то на мой взгляд выигрывает правый:

Time picker в Android(слева) и iOS (справа)

Пришлось отвечать для себя — а чем же привлекательнее правый Picker?

Ответ был не один:

Приятнее выглядит
Интуитивное переключение
Никаких лишних элементов

Но настроение хотело большего и поэтому сразу же были добавлены пункты, которые должны присутствовать в новом Picker’e.

Возможность легко менять размер без ущерба дизайну
Возможность указывать не только время но и… да вообще любую информацию
Все-таки должно быть более андроидным нежели яблочным

Итак, цели обозначены, приступим.

Палитра

Вообще все цвета палитры подбирались вручную перед каждым добавлением элемента. Цвета сравнивались и корректировались. В итоге получилась следующая палитра:

Названия цветов думаю сами за себя говорят, но в любом случае в коде будут пояснения, так что разобраться не составит труда.

Вставляем данный код в наш color.xml.

Создание Picker’а

Picker относится к View Элементам, значит создаем класс DataPicker:

Нам понадобятся следующие переменные:

В конструкторы возможны передачи параметров, стилей и т.д. Нам все эти излишки в рамках данной статьи не понадобятся.

Затем нам необходимо переопределить метод onSizeChanged:

Это нужно для того, чтобы при каждом изменении размера нашего холста все наши элементы прорисовывались правильно. Всегда зная размеры холста мы точно сможем заполнить все его области.

Следующим этапом необходимо определиться с возможностями нашего Picker’a. Первым делом он должен получать значения, которые необходимо отображать. Создадим для этого метод:

Для данного метода мне понадобился Handler. Дело в том, что размеры холста в момент создания равны 0 как по ширине, так и по высоте. В данном методе мы обращаемся к классу данных, в котором лежат наши значения и их параметры. Но на всякий случай проверяем, задан ли нашему холсту какой-нибудь размер. И если размер еще не определен, то просто немного отложим выполнение данной функции.

Класс со значениями и их параметрами выглядит так:

Следующая возможность, которая должна быть — это возможность изменения значения Picker’a путем скролла.

Переопределим для этого метод OnTouch:

Собственно метод выравнивания наших значений после остановки скроллинга:

Как мы видим, в прошлом методе мы использовали функцию onSelected, чтобы наш Picker сообщил о том, что пользователь выбрал какое-то значение.

Создадим для этого слушатель и определим события:

Когда все основные методы у нас определены, приступим к самому главному. Нам нужно отрисовать наш Picker на холсте. За отрисовку у нас отвечает метод onDraw:

Выглядеть это должно вот так:

С тенями уже получше:

Уже что-то интересное:

Так намного лучше:

Завершаем метод onDraw отловом ошибок и устанавливаем fps отрисовки:

Готово!

Удобство нашего Picker’a заключается в том, что мы можем их комбинировать для более удобного выбора значений.
Например, можно скомбинировать 4 компонента для выбора времени напоминания:

Дальше нашему Picker’у можно добавить обработку атрибутов, кастомные параметры, работу с адаптерами… Тут уже поле деятельности неисчерпаемо и в одной статье не разгуляться. Но если сообществу будет интересно продолжение — буду рад продолжить.

Источник

Android studio timepicker style

TimePicker

Методы

Новый внешний вид в Android 21 Lollipop