Material Design 3.1

[Martysh12]

Material Design 3.1

[OxygenCobalt]

Starting work on this under a general move to "Material Design 3.1", which has a bunch of visual and color tweaks. As part of this, I'm also working on a new icon:

[OxygenCobalt]

Just following the examples set in material design @andr202.

[OxygenCobalt]

Widget 10 looks solid @Martysh12. Holding on anything circular for the same reason I hold on text-based widgets. The maintenance burden is just too heavy and will grow heavier as more and more people request more and more widgets.

[OxygenCobalt]

This requires me to update MDC, which is somewhat risky since they changed their elevation overlay system and I need to update themes/code to handle that. Thanks for letting me know.

[OxygenCobalt]

Also experimenting with text centering/resizing to make things more visually prioritized. Not sure about this. Also assumes #448. The toolbar changes and moving the "more" button are certain, text centering probably isn't.

[KraXen72]

i really hope the un-rounded mode for album covers stays as an option.
Other than that, even though I prefer the current design and think that Google has once again outdone themselves in worsening their design language (all downhill after md 2 but w/e), it doesen't look half bad.
I would re-consider the skip/backward buttons not having a backgroun color, i think right now, there are too many emphasized elements, especially with the way you can now swipe to skip/back songs.

[KraXen72]

also, while the centered text is nice for shorter titles, i feel it would still be better if it was left aligned, the 3 dots where they were and the heart on the right side in the same height as the text

long title: (heart would be in the same place, just didn't draw it.)

[OxygenCobalt]

Un-round mode is staying @KraXen72. I've just had it enabled right now since I'm trying to make a "maximally M3" design and then gracefully reducing it when round mode is off. I still don't like round album art.

As for the more button, I'm sorry to say but it's going back to the song. This is kind of due to the new bottom sheet transition that I implemented from the M3.1 spec:

screen-20240419-125447.mp4

Without the automatic inset padding, the "Now Playing" header ends up needing to be shrunk and centered to not look visually jarring with the playback bar transition. Hence, the more button needed to be moved.

[andr202]

Un-round mode is staying @KraXen72. I've just had it enabled right now since I'm trying to make a "maximally M3" design and then gracefully reducing it when round mode is off. I still don't like round album art.

As for the more button, I'm sorry to say but it's going back to the song. This is kind of due to the new bottom sheet transition that I implemented from the M3.1 spec:

screen-20240419-125447.mp4
Without the automatic inset padding, the "Now Playing" header ends up needing to be shrunk and centered to not look visually jarring with the playback bar transition. Hence, the more button needed to be moved.

are background colors for the next and previous buttons really necessary? it seems so extra.

[OxygenCobalt]

Okay, I guess you are right @KraXen72. They aren't consistent in those guidelines. But it's also not explicitly forbidden in the spec, and the pattern of a central brightly filled icon surrounded by dimly filled icons is a common pattern in a lot of the examples. Additionally, increasing the icon sizes without adding those containers makes it look jarring IMO. I also don't want to leave them as-is, since the new thicker slider makes the tiny and non-hierarchical buttons look frankly out of date.

[Martysh12]

I made some mockups of the new widgets, any feedback?

[OxygenCobalt]

Those look legitimately incredible @Martysh12. The only issues lie in that I can't dynamically overlay text onto the Widget image without risking illegibility, but I also can't cram it all into the same bar without squishing the text and making it too ellipsized to be readable or reducing controls. Widget 4 seems like a good tweak to make to the very thin widget. Out of the larger widgets, Widget 1 and Widget 3 are the best (but suffer from the issues I described). See how you can tweak those.

[OxygenCobalt]

The consistency remains the concern. If people have muscle memory for "previous, play, next", I want to maintain that muscle memory in the widget. I like "stylish" UI as much as anyone else, but it must be balanced with usability.

[e-zk]

@Martysh12 just wanted to say good work these widgets do indeed look incredible.

[OxygenCobalt]

No, the visual is enough. I'll have to tweak it to work in the limitations of android widgets @Martysh12, so measurements/exports won't help.

[OxygenCobalt]

@KraXen72 will let you know that the current wide widget is staying, this one is only going to be for 3x4-ish widgets.

[NMrocks]

See also: New progress indicator designs
For the progress bar below the mini player

[OxygenCobalt]

[Martysh12]

I feel like the 3 playback controls (the ones with the background) are a bit too big, other than that everything looks really good!

[NMrocks]

+1 to Martysh12's comment. Additionally, the slider doesn't really follow the Material 3 spec. The thick slider track looks kinda nice and modern IMO, which this implementation omits

Edit: reference image: range slider in Seal (this is probably too thick for the size of the slider handles, but you get the idea)

[OxygenCobalt]

I'm not going to compromise I think on the buttons (I've been wanting to re-emphasize then for awhile now), but I did slightly shrink them

[NMrocks]

It seems you are right and the previous larger buttons looked better (😅), the icons are now occupying way too much space within the button. The slider looks nice however :)

[NMrocks]

The centred text looks really nice. Just one minor thing though: I feel like the "Now Playing" text is a bit too small, otherwise it looks fantastic

[HyperWinX]

This looks amazing!

[KraXen72]

i do agree with @andr202 , it really seems weird to have the rewind/skip buttons with backgrounds. you can see even google themselves isn't consistent and in the screenshot you provided, they're using the old progress bar

[Martysh12]

@OxygenCobalt Will the widget be redesigned as well?

[OxygenCobalt]

Slightly @Martysh12. I think I'm going to add even larger widget designs with bigger text/buttons, highlight the skip buttons, and make sure it's all colored correctly.

[Martysh12]

Alright, I fixed the text illegibility issues and added a new widget type! What do you think?

[OxygenCobalt]

I'm not feeling any of these widgets, to be honest. It's like either I pick a confusing button layout or I pick a really jarring way to display song information.

Can you try a layout like this @Martysh12? This was my original plan to make widgets of that size look better. It's basic but it works.

[Martysh12]

Alright, yeah, I'll try this layout out tomorrow (as it's getting pretty late).
Though I don't really understand why you feel like the button layout is confusing / the song information is jarring. Would you mind elaborating on that?

[OxygenCobalt]

I like maintaining a simple, linear button layout of repeat, previous, play, next, shuffle. It's consistent and expected by muscle memory.

As for the jarring song information, just putting a box around it ends up obscuring the cover and making it somewhat hard to read I'm not really sure how to make it work.

@Martysh12

[Martysh12]

Hmm, I see.
I'll try to fix my designs tomorrow. Though, it would be nice to have multiple widgets for different button layouts / styles (along with the usual previous-play-next layout).

[Martysh12]

I've been looking through the Android UI Kit and one of the notification templates seems to use this kind of layout... Maybe it's not that bad?

[OxygenCobalt]

Actually, realized that the widget layout I told you earlier actually wont work now that I think about it. I think this idea I photobashed will work though:

The song information won't actually interfere much, at least from my heuristics. Can you translate this into a design @Martysh12?

[Martysh12]

Sure, I'll also see what I can do about the circular widgets.

[Martysh12]

@OxygenCobalt Alright, the button layout should be more familiar now (and I also added a light version for each widget)

[Martysh12]

@OxygenCobalt Alrighty, do you need the measurements / design files?

[KraXen72]

@Martysh12 the designs look great! i like the widget 10 as well. can you show how it would look, if it was in a 1.4:4 height:width aspect ratio?

[Martysh12]

@KraXen72 Here you go, hope this is what you meant

[KraXen72]

i'm using niagara launcher and the widget has a non-standard size, like this:

i don't know if it's going to look like in your screenshot, but it's atleast given me an idea of it