Material Design 3.1

[Martysh12]

Description

The Material 3 guidelines have been updated with a new slider design:

This new slider design is only available in MDC-Android, as of creating this issue.

Problem solved

No response

Other implementations

AFAIK, no other Android music players implement this slider.

Benefit

Implementing a fix will benefit the general design of the app, making it look more modern.

Duplicates

• [X] I have checked this feature request for duplicates.
• [X] I have checked that this feature is not implemented in the lastest version.
• [X] I have checked the Why Are These Features Missing? page.
• [X] I agree to the Contribution Guidelines.

[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.

[NMrocks]

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

[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]

[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 :)

[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.

[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

[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:

https://github.com/OxygenCobalt/Auxio/assets/65370175/75c02ba3-621f-4409-99b6-9454976048c5

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.

[HyperWinX]

This looks amazing!

[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]

Just following the examples set in material design @andr202.

[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.

[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.

[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]

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.

[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.

[e-zk]

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

[Martysh12]

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

[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.

[Martysh12]

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

[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.

[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

[OxygenCobalt]

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