Improve UX of settings toggle with custom IconSwitch

[Sovan22]

This pr should close #121. It replaces the default Material 2 Switch in settings rows with a custom IconSwitch that supports displaying icons inside the thumb. The new implementation provides clearer visual feedback while maintaining accessibility and theming consistency.

[Ethran]

It looks ok, I will check the code letter.

[Copilot]

Pull Request Overview

This PR enhances the settings toggle user experience by replacing the default Material 2 Switch with a custom IconSwitch component that displays icons inside the thumb for clearer visual feedback.

• Replaced Material Switch with custom IconSwitch in SettingToggleRow
• Created new IconSwitch composable with animated thumb positioning and color transitions
• Added check/close icons inside the switch thumb to indicate on/off states

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Ethran]

Please fix the formatting, and if reasonable (copilot gives a lot of bad suggestions) other problems.

@rezad1393 please give your opinion about it, as you originally proposed the change.

[Sovan22]

Fixed the formatting. Copilot's third suggestion is not required as the current order with modifier first is correct.

[rezad1393]

@rezad1393 please give your opinion about it, as you originally proposed the change.

Am I missing something?
last release was for 5 days ago.
how do I test this ?

[Ethran]

@rezad1393 please give your opinion about it, as you originally proposed the change.

Am I missing something? last release was for 5 days ago. how do I test this ?

There is a screenshot above, I think it should be enough for now -- it's only visual change

[rezad1393]

@rezad1393 please give your opinion about it, as you originally proposed the change.

Am I missing something? last release was for 5 days ago. how do I test this ?

There is a screenshot above, I think it should be enough for now -- it's only visual change

oh.
I didn't realize. sorry.

my opinion about it:
it is better than current buttons. but...

E-ink color is not great and using color to differentiate is not a good idea for it. that does not mean color should not be used, just that when UX designer uses color on a normal colorful screen he can forget that on e-ink color it doesn't look like that at all and on black and white e-ink it has no color.

I can't test this but I think on B/W e-ink the buttons above look the same color wise (both very similar shades of grey) but the visual X and tick (if that is the name for it) show the user that the option is off or on.

p.s.
a good UX for buttons and toggles is the BOOX own setting for dictionary.

[Sovan22]

I just changed the track color. This is how it looks in monochrome color scheme. @rezad1393 If you want I can send a debug build of this and you can try it on

[rezad1393]

I just changed the track color. This is how it looks in monochrome color scheme. @rezad1393 If you want I can send a debug build of this and you can try it on

looks good.

btw did you see the attached image in previous top post?
Boox does it that way.

attached again here to see difference between off/on and options disabled.

[Sovan22]

@rezad1393 I guess this would work?

[rezad1393]

@rezad1393 I guess this would work?

that works great.
works for b/w and works for color.

because E-ink doesn't use light source for shade creation (it just reflects) using a white background is great on it.
doesn't use battery or hurt the eye or degrade the screen life , the opposite of OLED white.

another reason for not using dark or color background is that E-ink screen has a limited life span (number of pixel state changes - dark white and shades of grey).
so having white most of the time is best because on E-INK reading black on white is the best for books and using that for others lessens screen pixel state changes.

btw I don't know what that Icon library is (I am not a dev) but can you make sure it does not have animations?

[Sovan22]

@Ethran I have made the changes as mentioned by @rezad1393. Please review the code whenever you feel like

[rezad1393]

@Ethran I have made the changes as mentioned by @rezad1393. Please review the code whenever you feel like

I am curious about "e-ink friendly toggle switch"

isn't this app almost exclusive to Boox android e-ink devices ecosystem?
does it need to run good on none-e-ink?

EDIT:
never mind.
my bad.
I read that switch as between e-ink and non-eink and not off/on button.

[Ethran]

App is not exclusive to onyx devices, it can run on other android devices. BUT, the handwriting won't work properly on non-boox devices. I plan to implement something so that it can work on normal devices, but it's a long term plan.

[rezad1393]

App is not exclusive to onyx devices, it can run on other android devices. BUT, the handwriting won't work properly on non-boox devices. I plan to implement something so that it can work on normal devices, but it's a long term plan.

I don't know how much of boox sdk can be made separate from other part of the app so that you can make it work on other androids.

my suggestion is to make this boox (or e-ink) only because there are apps targeting none-e-ink devices.
having an open source app for note on e-ink is really great goal.

maybe add some of the other usefull features that the official notes app from boox has.
like shapes.

but this is your app and at the end it is your to decide what to do.

and thank you for this great app.( I hate proprietary apps)

[Ethran]

I added explicit flag to not use animation, and reordered logic in function. Also, moved function to separate file, and removed all default android switches with this one. Check if it is correct, and I think it can be merged.

[Sovan22]

Looks good!

[Ethran]

@Sovan22
Also, if you want, you can try improving the UI in other parts of the app — I’m not a big fan of UI work, so things are made to function rather than to look nice. But only if you have some free time for it.

[Sovan22]

Sure!