https://kotlinlang.org logo
#compose
Title
# compose
h

Hasan Tunçay

03/15/2024, 1:50 PM
i couldnt customized time pickers according to this design,
j

jamshedalamqaderi

03/15/2024, 1:50 PM
I think you should reply on single thread.
h

Hasan Tunçay

03/15/2024, 1:51 PM
yep
j

jamshedalamqaderi

03/15/2024, 1:51 PM
Is this the actual design that you want to customize?
h

Hasan Tunçay

03/15/2024, 1:53 PM
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 ,
🧵 1
do you know any way , with materila 2-3 or another lib?
j

jamshedalamqaderi

03/15/2024, 1:56 PM
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
You can follow the link to change the color based on time picker specs
h

Hasan Tunçay

03/15/2024, 1:57 PM
i have read all of them
j

jamshedalamqaderi

03/15/2024, 1:58 PM
Have you checked this color parameter
Copy code
TimePicker(state = timeState, colors = TimePickerDefaults.colors())
a

Alejandro Rios

03/15/2024, 1:59 PM
Can you please no reply in the main channel, you can continue in the thread
🙌 1
h

Hasan Tunçay

03/15/2024, 2:00 PM
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.
j

jamshedalamqaderi

03/15/2024, 2:00 PM
If colors argument doesn't help you then keep it as default then change the color scheme in here
Copy code
val timeState = rememberTimePickerState()
    MaterialTheme(
        colorScheme = lightColorScheme(
            primary = Color.Red
        )
    ) {
        TimePicker(state = timeState, colors = TimePickerDefaults.colors())
    }
h

Hasan Tunçay

03/15/2024, 2:01 PM
Copy code
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

    ),
Copy code
@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() }

        }
    )
}
j

jamshedalamqaderi

03/15/2024, 2:02 PM
not that way
Copy code
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
This is an example
h

Hasan Tunçay

03/15/2024, 2:07 PM
yes i did now can you chhange separtor : dots color?
Screenshot 2024-03-15 at 17.08.13.png
this dots
j

jamshedalamqaderi

03/15/2024, 2:08 PM
Check out the properties what they are using.
h

Hasan Tunçay

03/15/2024, 2:09 PM
Copy code
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
}
you cant because i think they forgat it
c

Casey Brooks

03/15/2024, 2:16 PM
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
h

Hasan Tunçay

03/15/2024, 2:32 PM
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
c

Casey Brooks

03/15/2024, 2:38 PM
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:
Copy code
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)
   }
}
2 Views