Time Pickers

From de Google Material Design documentation

A time picker adjusts to a user’s preferred time setting, i.e. the 12-hour or 24-hour format.

A dialog picker is used to select a single time (hours:minutes) on mobile.

How to add?

I. In your build.gradle add latest appcompat library.

dependencies {  
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version

II. Make your activity extend android.support.v7.app.AppCompatActivity and implement the TimePickerDialog.OnTimeSetListener interface.

public class MainActivity extends AppCompatActivity  
    implements TimePickerDialog.OnTimeSetListener

III. Create your TimePickerDialog setting a context, the implementation of the listener, the start hour of the day, minute and a boolean indicating if the dialog should show a 24h. format or not.

TimePickerDialog timePickerDialog = new TimePickerDialog(  
    context, listener, startHour, startMinute, is24HourFormat);

IV. Show your dialog with the method show of TimePickerDialog.


How to style?

I. Declare custom drawable.xml for the dialog background.

<?xml version="1.0" encoding="utf-8"?>  
<!-- From: support/v7/appcompat/res/drawable/abc_dialog_material_background_light.xml -->  
<inset xmlns:android="http://schemas.android.com/apk/res/android"  

    <shape android:shape="rectangle">
        <corners android:radius="2dp" />
        <solid android:color="@color/indigo" />


II. Declare a custom styles in your styles.xml file.

    <style name="MyDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="colorControlNormal">@color/indigo</item>
        <item name="colorControlActivated">@color/pink</item>
        <item name="textColorAlertDialogListItem">@color/indigo</item>
        <item name="colorAccent">@color/pink</item>
        <item name="android:textColorPrimary">@color/indigo</item>
        <item name="android:windowBackground">@drawable/background_dialog</item>

III. Set your custom style as a parameter of the DatePickerDialog.

TimePickerDialog timePickerDialog = new TimePickerDialog(  
    context, R.style.MyDialogTheme, listener, 
    startHour, startMinute, is24HourFormat);

IV. Show your TimePickerDialog with the show method.


Time Picker with dark theme

I. Use R.style.Theme_AppCompat_Dialog_Alerttheme for the style parameter in the TimePickerDialog constructor.

TimePickerDialog dialog = new TimePickerDialog(  
    context, R.style.Theme_AppCompat_Dialog_Alert, 
    listener, startingHour, startingMinute, is24HourFormat);

Note: You can use your custom style setting its parent with the Theme.AppCompat.Light.Dialog.Alert value