'Time picker customisation

Project has the design of time picker dialog.

the design as follows

design image

then default dialog design is like below

default design

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".

androidxmlkotlintimepicker


Solution 1:[1]

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>

enter image description here

Solution 2:[2]

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"/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nitish
Solution 2 blazc

Related Questions