While working on the Jetpack Social improvements we discovered the Compose Switch component does not have the same colors or size when compared to the View-based SwitchCompat used throughout the app.

This problem is not that bad when using a full-Compose screen but it was very noticeable when using a Compose component inside a View-based layout, such as in this PR #18708.

Since we are moving towards using Compose more in our codebase and we want to do it gradually, it would be great if we were able to mix Compose and non-Compose components in the same screen for now.

This PR tries to solve the visual differences by:

• creating a Compose-based WPSwitch, which uses the same Switch colors from the View-based counterpart;
• creating a View-based WPSwitchCompat, which extends SwitchCompat and matches the size and visual design of the Compose-based counterpart (e.g.: thumb and track edge-aligned).

The solution is not 100% perfect but it works for our usage.

Some known drawbacks:

• WPSwitchPreference (used in Preference screens) uses Switch so it was not changed, but I don't see us using Compose in those screens in the near future and the difference between that Switch and WPSwitch is difficult to notice when they are not used beside each other.
• WPSwitchCompat drawables and dimensions match the current Switch Composable from androidx.compose.material so we will need to revisit it every time we update the compose.material lib.
• The WPSwitchCompat introduces small padding (7dp) on its right side, which is not really that noticeable (especially because the original SwitchCompat already had different visual padding when it's on vs off) but it's there to match Compose's Switch padding automatically added to make the component touch target have 48dp.

Here's WPSwitch composable preview, which compares against the view-based WPSwitchCompat to make sure they closely match visually.

Light mode	Dark mode

To test:

• Check the WPSwitch preview and run it on a few devices to make sure they look the same across Android OS versions
• Go to non-preference screens that used SwitchCompat and make sure they work normally:
  • comment_notifications_bottom_sheet.xml
  • edit_post_settings_fragment.xml
  • followed_sites_dialog.xml
  • notifications_settings_switch.xml
  • number_picker_dialog.xml
  • plugin_detail_activity.xml
  • related_posts_dialog.xml
  • toolbar_switch.xml
  • wppref_view.xml

Regression Notes

1. Potential unintended areas of impact
   Breaking existing Switch buttons around the app

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   Manual testing.

3. What automated tests I added (or what prevented me from doing so)
   N/A

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

• Portrait and landscape orientations.
• Light and dark modes.
• Fonts: Larger, smaller and bold text.
• High contrast.
• Talkback.
• Languages with large words or with letters/accents not frequently used in English.
• Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
• Large and small screen sizes. (Tablet and smaller phones)
• Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)