feat: WidgetSmall redesign with material you dynamic color

[Rdkang]

Purpose / Description

The current small widget doesn't fit the style of the application or current versions of android material you theme

Fixes

• Fixes Themed Widgets #15084

Approach

Redesigned the widget and uses material you colors to fit

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration (SDK version(s), emulator or physical, etc)

Virtual pixel 3 on SDK 28 and pixel 7 on SDK 35

Learning (optional, can help others)

Describe the research stage

Links to blog posts, patterns, libraries or addons used to solve this problem

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

Screenshots

1. Widget

2. Widget when there are no cards to review it will be darker

3. Widget with monochrome material you theme chosen and themed icons

4. Widget with orange material you theme chosen and themed icons

5. Widget with green material you theme chosen and themed icons

Improvements

1. Better icon for the estimated time
2. Make the circle background for the numbers evenly padded around the text

Any feedback on the designs of the notification bubbles would be greatly appreciated :)

[welcome]

First PR! 🚀 We sincerely appreciate that you have taken the time to propose a change to AnkiDroid! Please have patience with us as we are all volunteers - we will get to this as soon as possible.

[mikehardy]

Interesting - looks like most of the work is in the icon specification?
Is there some way to preserve the visible difference between dev build and prod build like we have now with the red icon color vs the blue icon color?

Obviously the point of the change is to have the colors match theming - perhaps there is a way to badge the icon by layering a dev "sash" over it, similar to the badging plugin used by fastlane (underlying implementation here: https://github.com/HazAT/badge - perhaps it could be run during debug builds as a gradle step? Perhaps the generated badge could be in the debug src/res tree ? I'm not sure what is best)

[david-allison]

@mikehardy just to note: the red isn't a beta feature, it's an indicator of "you have pending reviews".

[mikehardy]

@mikehardy just to note: the red isn't a beta feature, it's an indicator of "you have pending reviews".

Ah interesting - that means that for the widgets at least there is currently no way to differentiate between "widgets built for the .debug build and connected to your .debug install (or perhaps parallel install!) vs the main / production ones?

That whole sentence reads like an assertion but the question mark is key - I'm not sure

[david-allison]

I don't believe there is a difference for the widgets between beta and stable.

I am concerned that we lose the distinction between 'done' and 'not done' with this PR. Some users love it:

https://www.reddit.com/r/Anki/comments/1h81z48/comment/m0rcsuq/?context=1

[Rdkang]

I don't believe there is a difference for the widgets between beta and stable.

I am concerned that we lose the distinction between 'done' and 'not done' with this PR. Some users love it:

https://www.reddit.com/r/Anki/comments/1h81z48/comment/m0rcsuq/?context=1

Screenshots

1. Widget

2. Widget when there are no cards to review it will be darker

The distinction is still implemented, as you can see in screenshot in 1 and 2. when there are no reviews the widget will have a darker version of the dynamic color.
I can make it a different style if you want @david-allison :)

[david-allison]

@Rdkang We (I) want a color which is pleasant to look at when the user has finished the reviews. Going from a [really nicely done] blue to a grey doesn't fill me with joy.

You have better design taste than me, whatever you feel works given the above guidance!

[Rdkang]

@Rdkang We (I) want a color which is pleasant to look at when the user has finished the reviews. Going from a [really nicely done] blue to a grey doesn't fill me with joy.

You have better design taste than me, whatever you feel works given the above guidance!

I agree with the color not bringing joy :)
So how about the star being a slightly darker shade when in finished state.

• Widget with green material you theme chosen and themed icons

1. finished state with darker star

2. finished state with darker star and darker border

Which one do you prefer @david-allison?

[david-allison]

Truthfully, I can't see a huge difference between option 1 and 2, slightly prefer option 1.

I would consider making the 'pending cards' state /slightly/ less 'fun'

But... tell me when YOU feel you're happy and ready for review 😄

[Rdkang]

Truthfully, I can't see a huge difference between option 1 and 2, slightly prefer option 1.

I would consider making the 'pending cards' state /slightly/ less 'fun'

But... tell me when YOU feel you're happy and ready for review 😄

I've made the pending card state a more colorful and fun look to draw your attention to the outstanding reviews. This helps you quickly see when reviews pending.
Once the reviews are finished, the widget is intended to fade into the background, allowing you to focus on other tasks

This is my thought process 😄, Let me know if this approach aligns with what you had in mind.
Otherwise i think this pull request is ready for review :)

[david-allison]

Screenshots (S21)

I have tested this on API 24 and it still works.

Looks great to me, thanks so much!!

---

One last-minute question, besides that it's a strong approve. Code quality is great

[david-allison]

Gong through a period of very low activity, sorry this sat!

[mikehardy]

Visually, looks great - thank you!

[david-allison]

Note

Invoice already submitted, no action needed, posting this for documentation purposes

Hi there @Rdkang! This is the OpenCollective Notice for PRs merged from 2025-01-01 through 2025-01-31

Starting 2025, we have updated our selection process for Open Collective, and you are eligible for compensation for your work, the process with details is here:

https://github.com/ankidroid/Anki-Android/wiki/OpenCollective-Payment-Process#how-to-get-paid

This note applies to all PRs merged for this month.

Please understand that our monthly budget is never guaranteed to cover all claims - the cap on payments-per-person may be lower, but we try to make our process as fair and transparent as possible, we just need your understanding.

Thanks!