i couldnt customized time pickers according to thi...

# compose

[Hasan Tunçay]

i couldnt customized time pickers according to this design,

[jamshedalamqaderi]

I think you should reply on single thread.

[Hasan Tunçay]

yep

[jamshedalamqaderi]

Is this the actual design that you want to customize?

[Hasan Tunçay]

yes this was actual design , i have tried it with material design 2-3 but i couldnt, than i found a lib 3rd part but it couldnt solve my problem, my last option was to design a new timepicker from scratch ,

[Hasan Tunçay]

do you know any way , with materila 2-3 or another lib?

[jamshedalamqaderi]

You can customize the appearance of the time picker by adjusting its settings. Wrap the time picker component with MaterialTheme and then modify the color scheme according to your preferences. Approach it as if you are making these changes at the top root level during the initialization of MaterialTheme. For reference on which color properties are available, you can visit the following link
https://m3.material.io/components/time-pickers/specs

[jamshedalamqaderi]

You can follow the link to change the color based on time picker specs

[Hasan Tunçay]

i have read all of them

[jamshedalamqaderi]

Have you checked this color parameter

TimePicker(state = timeState, colors = TimePickerDefaults.colors())

[Alejandro Rios]

Can you please no reply in the main channel, you can continue in the thread

[Hasan Tunçay]

I tried all of these but I couldn't make it suitable for the design. The simplest example is there is a background color separation between the top and bottom sides, material lib does not provide this.

[jamshedalamqaderi]

If colors argument doesn't help you then keep it as default then change the color scheme in here

val timeState = rememberTimePickerState()
    MaterialTheme(
        colorScheme = lightColorScheme(
            primary = Color.Red
        )
    ) {
        TimePicker(state = timeState, colors = TimePickerDefaults.colors())
    }

[Hasan Tunçay]

timepicker(
    colors = TimePickerDefaults.colors(
        activeBackgroundColor = Color.White,
        inactiveBackgroundColor = Color.White,
        inactiveTextColor = timePickerTextUnselected,
        activeTextColor = fontLightColor,
        borderColor = Color.Transparent,
        inactivePeriodBackground = Color.Transparent,
        headerTextColor = Color.Transparent,
        selectorColor = backGroundStart,
        selectorTextColor = fontLightColor

    ),

[Hasan Tunçay]

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TimePickerDialog(
    state: TimePickerState,
    onConfirm: () -> Unit,
    onCancel: () -> Unit
) {
    AlertDialog(
        onDismissRequest = { onCancel() },
        containerColor = timePickerContainer,
        text = {
            TimePicker(
                state = state,
                colors = TimePickerDefaults.colors(
                    clockDialColor = Color.White,
                    clockDialSelectedContentColor = fontLightColor,
                    clockDialUnselectedContentColor = timePickerTextUnselected,
                    selectorColor = backGroundStart,
                    containerColor = Color.Yellow,
                    periodSelectorBorderColor = Color.Transparent,
                    periodSelectorSelectedContainerColor = Color.White,
                    periodSelectorUnselectedContainerColor = Color.White,
                    periodSelectorSelectedContentColor = timePickerTextUnselected,
                    periodSelectorUnselectedContentColor = Color.White,
                    timeSelectorSelectedContainerColor = Color.White,
                    timeSelectorUnselectedContainerColor = Color.White,
                    timeSelectorSelectedContentColor = fontLightColor,
                    timeSelectorUnselectedContentColor = timePickerTextUnselected
                )
            )
        },

        confirmButton = {
            confirmButton() { onConfirm() }

        }
    )
}

[jamshedalamqaderi]

not that way

[jamshedalamqaderi]

val timeState = rememberTimePickerState()
    MaterialTheme(
        colorScheme = lightColorScheme(
            primary = Color.Red
        )
    ) {
        TimePicker(state = timeState, colors = TimePickerDefaults.colors())
    }

You have to change the colors like this if you want full customization

[jamshedalamqaderi]

This is an example

[Hasan Tunçay]

yes i did now can you chhange separtor : dots color?

[Hasan Tunçay]

Screenshot 2024-03-15 at 17.08.13.png

[Hasan Tunçay]

this dots

[jamshedalamqaderi]

Check out the properties what they are using.

[Hasan Tunçay]

ExperimentalMaterial3Api
@Stable
object TimePickerDefaults {

    /**
     * Default colors used by a [TimePicker] in different states
     *
     * @param clockDialColor The color of the clock dial.
     * @param clockDialSelectedContentColor the color of the numbers of the clock dial when they
     * are selected or overlapping with the selector
     * @param clockDialUnselectedContentColor the color of the numbers of the clock dial when they
     * are unselected
     * @param selectorColor The color of the clock dial selector.
     * @param containerColor The container color of the time picker.
     * @param periodSelectorBorderColor the color used for the border of the AM/PM toggle.
     * @param periodSelectorSelectedContainerColor the color used for the selected container of
     * the AM/PM toggle
     * @param periodSelectorUnselectedContainerColor the color used for the unselected container
     * of the AM/PM toggle
     * @param periodSelectorSelectedContentColor color used for the selected content of
     * the AM/PM toggle
     * @param periodSelectorUnselectedContentColor color used for the unselected content
     * of the AM/PM toggle
     * @param timeSelectorSelectedContainerColor color used for the selected container of the
     * display buttons to switch between hour and minutes
     * @param timeSelectorUnselectedContainerColor color used for the unselected container of the
     * display buttons to switch between hour and minutes
     * @param timeSelectorSelectedContentColor color used for the selected content of the display
     * buttons to switch between hour and minutes
     * @param timeSelectorUnselectedContentColor color used for the unselected content of the
     * display buttons to switch between hour and minutes
     */
    @Composable
    fun colors(
        clockDialColor: Color = ClockDialColor.toColor(),
        clockDialSelectedContentColor: Color = ClockDialSelectedLabelTextColor.toColor(),
        clockDialUnselectedContentColor: Color = ClockDialUnselectedLabelTextColor.toColor(),
        selectorColor: Color = ClockDialSelectorHandleContainerColor.toColor(),
        containerColor: Color = ContainerColor.toColor(),
        periodSelectorBorderColor: Color = PeriodSelectorOutlineColor.toColor(),
        periodSelectorSelectedContainerColor: Color =
            PeriodSelectorSelectedContainerColor.toColor(),
        periodSelectorUnselectedContainerColor: Color = Color.Transparent,
        periodSelectorSelectedContentColor: Color =
            PeriodSelectorSelectedLabelTextColor.toColor(),
        periodSelectorUnselectedContentColor: Color =
            PeriodSelectorUnselectedLabelTextColor.toColor(),
        timeSelectorSelectedContainerColor: Color =
            TimeSelectorSelectedContainerColor.toColor(),
        timeSelectorUnselectedContainerColor: Color =
            TimeSelectorUnselectedContainerColor.toColor(),
        timeSelectorSelectedContentColor: Color =
            TimeSelectorSelectedLabelTextColor.toColor(),
        timeSelectorUnselectedContentColor: Color =
            TimeSelectorUnselectedLabelTextColor.toColor(),
    ) = TimePickerColors(
        clockDialColor = clockDialColor,
        clockDialSelectedContentColor = clockDialSelectedContentColor,
        clockDialUnselectedContentColor = clockDialUnselectedContentColor,
        selectorColor = selectorColor,
        containerColor = containerColor,
        periodSelectorBorderColor = periodSelectorBorderColor,
        periodSelectorSelectedContainerColor = periodSelectorSelectedContainerColor,
        periodSelectorUnselectedContainerColor = periodSelectorUnselectedContainerColor,
        periodSelectorSelectedContentColor = periodSelectorSelectedContentColor,
        periodSelectorUnselectedContentColor = periodSelectorUnselectedContentColor,
        timeSelectorSelectedContainerColor = timeSelectorSelectedContainerColor,
        timeSelectorUnselectedContainerColor = timeSelectorUnselectedContainerColor,
        timeSelectorSelectedContentColor = timeSelectorSelectedContentColor,
        timeSelectorUnselectedContentColor = timeSelectorUnselectedContentColor
    )

    /** Default layout type, uses the screen dimensions to choose an appropriate layout. */
    @ReadOnlyComposable
    @Composable
    fun layoutType(): TimePickerLayoutType = defaultTimePickerLayoutType
}

[Hasan Tunçay]

you cant because i think they forgat it

[Casey Brooks]

Here’s the exact line of code displaying that text, which further references this token. It looks those dots are ultimtely using the value of MaterialTheme.colors.onSurface, so try setting that value in a local MaterialTheme which wraps only the TimePicker

[Hasan Tunçay]

thanks i ll check this , this is internal so we cant change it directly but it may be override , or i can find indirect way to change some features

[Casey Brooks]

Basically much everything in the Material libs is not hardcoded, but is derived from your MaterialTheme. There’s lots of internal properties and things bounce around the code, but it ultimately terminates at a property that’s either directly passed to the Composable or referenced from the MaterialTheme. And since you can provide themes locally as well as globally, you can always find a way to change a color, it just might not be the most intuitive at first.

For example, try something like this:

MaterialTheme { // main app theme, configure how you want
   // ... other composable UI code

   MaterialTheme( // override theme locally
      colors = MaterialTheme.colors.copy(
         onSurface = Color.Green // set whatever color you need the separator and related text to be
      )
   ) { 
      TimePicker(state)
   }
}