material-components / material-components/material-components-android

[TimePickerDialog] Dynamic Theme at runtime

Open
#2,633 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

feature request Widget: TimePicker
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

Similar to https://github.com/material-components/material-components-android/issues/2586 just for TimePickerDialog.

We're targeting B2B and they want to brand the app at runtime with corporate colors.

Meaning every single color can be changed at runtime. In order to achieve this I don't use any styles or themes in order to tint my views. In order to spot any views that are not using the runtime tint, I have the following theme:

  <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="colorOnPrimary">#FF62FF00</item>
    <item name="colorOnSecondary">#FF62FF00</item>
    <item name="colorPrimary">#FF62FF00</item>
    <item name="colorPrimaryDark">#FF62FF00</item>
    <item name="colorSecondary">#FF62FF00</item>
    <item name="android:navigationBarColor">#FF62FF00</item>
    <item name="android:textColor">#FF62FF00</item>
  </style>

With this theme I can spot views that are not behaving easily as things are shown in an aggressive green.


Right now, every component from Material can easily be tinted by subclassing and setting various properties:

  • rippleColor
  • iconTint
  • backgroundTintList

We are already successfully using Fab, BottomNavigation, Toolbars, Buttons etc.


TimePickerDialog can't be themed at runtime. Ideally, I'd like to tint the following 'Views':

  • all text colors
  • clock color
  • selected/unselected state (am/pm)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the linked issue 2586 and inspecting the existing TimePickerDialog implementation. Identify how its text, clock, and AM/PM selected-state colors are sourced at runtime. Done means those areas can be changed through runtime tinting without relying on static styles or themes.

Written by the indexing model from the issue text.

Assessment

Tech stack
android
Domain
design, mobile
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.