Time picker customisation

Question

Project has the design of time picker dialog.

the design as follows

then default dialog design is like below

I want the top section of this time picker dialog should be same as the expected design.

I have tried following xml code. nothing helped.

  <TimePicker
        android:id="@+id/timePicker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numbersBackgroundColor="#ddd"
        android:overScrollMode="never"
        android:headerTimeTextAppearance="@drawable/bg_time"
        android:headerAmPmTextAppearance="@color/yellow"
        android:amPmBackgroundColor="@color/yellow"
        android:headerBackground="@android:color/transparent"
        />

And I have added following code to set the title color to transparent. so that I can put my view on the top section.

 android:headerTextColor = "@android:color/transparent"

but it says and threw the error

"Unknown Attribute android:headerTextColor"

. in the design part of the XML layout, it set the transparent color to title. but when I run the app it threw the error of

"Android resource linking failed".

score 0 · Answer 1 · answered Feb 28 '22 at 13:01

Use Material TimePicker to achieve the following design

 val picker = MaterialTimePicker.Builder()
            .setTimeFormat(TimeFormat.CLOCK_12H)
            .setHour(12)
            .setMinute(10)
            .setTitleText("Select Appointment time")
            .build()

To show dialog

picker.show(supportFragmentManager, picker.toString())

Using theme attributes and styles in res/values/styles.xml to change color according to your need:

<style name="Theme.App" parent="Theme.MaterialComponents.*">
    ...
    <item name="colorPrimary">@color/shrine_pink_100</item>
    <item name="colorOnPrimary">@color/shrine_pink_900</item>
    <item name="colorOnSurface">@color/shrine_pink_100</item>
    <item name="chipStyle">@style/Widget.App.Chip</item>
</style>

how can I use it on xml layout. because don't want dialog. it should be in fragment itself. — Noorul, Feb 28 '22 at 13:06
I don't think you can use it in xml, but you can make it fullscreen if that helps — Nitish, Feb 28 '22 at 13:12

score -1 · Answer 2 · answered Mar 09 '22 at 19:03

You need to create a custom style in themes.xml. And then set that theme/style to your time picker in xml. This is example of a style:

<style name="MyTimePickerWidgetStyle" parent="@android:style/Widget.Material.TimePicker">
    <item name="android:headerBackground">@color/stayGray</item>
    <item name="android:numbersTextColor">#fff</item>
    <item name="android:numbersInnerTextColor">#fff</item>
    <item name="android:numbersSelectorColor">@color/stayGray</item>
    <item name="android:amPmTextColor">#fff</item>
</style>

This is how you set style to time picker in xml.

<TimePicker
    android:id="@+id/timePickerGoal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/MyTimePickerWidgetStyle"
    style="@style/MyTimePickerWidgetStyle"/>

Time picker customisation

2 Answers2