Android TimePicker Dialog Styling

Android TimePicker Dialog is a sub class of AlertDialog , containing an timepicker Widget for selecting time  the time can be selected in hours and minute format.

TimePicker Dialog has two mode spinner and clock , In the previous tutorial we have seen basic example of TimePicker , In this article we will see how to style timepicker dialog

XML Layout

1. Create XML Layout activity_main.xml , this will be set as content view for launcher Activity (MainActivity.kt) .
2. Add Button to your layout file

file : activity_main.xml

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

    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:id="@+id/selectedTime"
              android:textSize="22sp"
              android:gravity="center"/>

    <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Select Time"
            android:id="@+id/selectTime"/>

</LinearLayout>

TimePicker Dialog Styling

Create a style "MyTimePickerLight" tag and extend it android:Widget.Material.Light.TimePicker , Add below attribute to style tag . Below Image is self explanatory .

file : style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:timePickerStyle">@style/MyTimePickerLight</item>
    </style>

    <!-- Dark Time Picker-->
    <style name="MyTimePickerDark" parent="android:Widget.Material.TimePicker">
        <item name="android:headerBackground">#FF5722</item>
        <item name="android:numbersTextColor">#673AB7</item>
        <item name="android:numbersSelectorColor">#FFEB3B</item>
        <item name="android:numbersBackgroundColor">#61E761</item>
        <item name="android:background">#FFC107</item>
    </style>

    <!-- Light Time Picker-->
    <style name="MyTimePickerLight" parent="android:Widget.Material.Light.TimePicker">
        <item name="android:headerBackground">#FF5722</item>
        <item name="android:numbersTextColor">#673AB7</item>
        <item name="android:numbersSelectorColor">#FFEB3B</item>
        <item name="android:numbersBackgroundColor">#61E761</item>
        <item name="android:background">#FFC107</item>
    </style>

</resources>

Light And Dark Theme For TimePicker Dialog

1. For Light Theme extend your custom style to android:Widget.Material.Light.TimePicker .
   Inside the Base theme tag set the android:timePickerStyle property to MyTimePickerDark

<item name="android:timePickerStyle">@style/MyTimePickerDark</item>

2. For Dark Theme extend your custom style to android:Widget.Material.TimePicker
  Inside the Base theme tag set the set the android:timePickerStyle property to MyTimePickerLight

<item name="android:timePickerStyle">@style/MyTimePickerLight</item>

Activity

Create a koltin class MainActivity.kt and extend it to AppCompatActivity class .
Override onCreate function and set the content of this MainActivity with above defined xml layout (activity_main.xml).
On Button Click show TimePickerDialog.

file : MainActivity.kt

package com.tutorialsbuzz.AndroidTimePIckerAdvacce

import android.app.TimePickerDialog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TimePicker
import kotlinx.android.synthetic.main.activity_main.*
import java.util.*

class MainActivity : AppCompatActivity() {

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

        val mTimePicker: TimePickerDialog
        val mcurrentTime = Calendar.getInstance()
        val hour = mcurrentTime.get(Calendar.HOUR_OF_DAY)
        val minute = mcurrentTime.get(Calendar.MINUTE)


        mTimePicker = TimePickerDialog(this, object : TimePickerDialog.OnTimeSetListener {
            override fun onTimeSet(view: TimePicker?, hourOfDay: Int, minute: Int) {
                selectedTime.setText(String.format("%d : %d", hourOfDay, minute))
            }
        }, hour, minute, false)


        selectTime.setOnClickListener({ v ->
            mTimePicker.show()
        })
    }
}

DOWNLOAD CODE