fix(preferences): Improve UI of IncrementerNumberRangePreferenceCompat

[Akira2206]

Purpose / Description

Updates the UI of IncrementerNumberRangePreferenceCompat to use Material Design components and fixes visibility issues across different themes.

Fixes

• Fixes Improve UI of IncrementerNumberRangePreferenceCompat #20005

Approach

• Replaced Button with MaterialButton (Elevated button) and EditText with TextInputLayout
• Added custom attributes (incrementerButtonBackground, incrementerInputBackground, incrementerIconColor) to attrs.xml and defined specific colors for light, plain, dark, and black themes
• Verified that disabled buttons fade out correctly (alpha 0.38). For enabled buttons, I aimed for a 3:1 contrast ratio. This was achieved in most cases, with exceptions to maintain visual hierarchy:
  • Light Theme (Icon vs Button)
  • Dark Theme (Button vs Dialog)

How Has This Been Tested?

WhatsApp.Video.2026-01-31.at.18.24.19.mp4

Enabled buttons:

Error text and disabled buttons:

Checklist

Please, go through these checks before submitting the PR.

• You have a descriptive commit message with a short title (first line, max 50 chars).
• You have commented your code, particularly in hard-to-understand areas
• You have performed a self-review of your own code
• UI changes: include screenshots of all affected screens (in particular showing any new or changed strings)
• UI Changes: You have tested your change using the Google Accessibility Scanner

[BrayanDSO]

As shown in your screenshots, the - and + buttons aren't aligned with the text input if the Invalid value warning is shown.

---

The rest looks great!

[Akira2206]

I'll fix the alignment, but @ZornHadNoChoice just suggested removing the buttons entirely here: #20005 (comment)

What should be done?

[david-allison]

Keep the buttons, this looks great to me aside from Brayan's comment

[david-allison]

This is AWESOME, thank you!!

Could you post 3 variants of the "light" theme with a different, (IMO: darker, still blue) colour for the icon colour, and the original

That's the only one which I mildly feel we can do better on, the rest are perfect

[Akira2206]

Fixed alignment of the buttons with text input:

In the original light theme, the icon color used is material_light_blue_500 (contrast: 2.37)
3 variants of the same color along with their contrast ratios:

material_light_blue_600 (2.81:1)

material_light_blue_700 (3.43:1)

material_light_blue_800 (4.31:1)

I prefer 600 because it matches the other dialog buttons, though 700 is safer for accessibility

[david-allison]

Mild preference for material_light_blue_700

Implementer's choice - let us know what you decide on and we'll merge

Thanks!!

[david-allison]

why not lateinit?

[Akira2206]

Since the fragment lives longer than the view we need to make bindingRef = null in onDestroyView(), and lateinit variables cannot be set to null

[david-allison]

by viewBinding(DialogIncrementerPreferenceBinding::bind) won't work in this circumstance?

[Akira2206]

I looked into it. Because we are creating the view from scratch in onCreateDialogView (inflating it manually to return binding.root), the ::bind method which expects an existing view won't work here it seems, so we have to handle the lifecycle manually

[david-allison]

Preferences are weird, cheers