-
-
Notifications
You must be signed in to change notification settings - Fork 133
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Material Design 3.1 #743
Comments
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. |
See also: New progress indicator designs |
I feel like the 3 playback controls (the ones with the background) are a bit too big, other than that everything looks really good! |
+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) |
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 :) |
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. |
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 |
i really hope the un-rounded mode for album covers stays as an option. |
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.mp4Without 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. |
This looks amazing! |
are background colors for the next and previous buttons really necessary? it seems so extra. |
Just following the examples set in material design @andr202. |
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 |
@OxygenCobalt Will the widget be redesigned as well? |
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. |
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. |
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. |
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. |
Alright, yeah, I'll try this layout out tomorrow (as it's getting pretty late). |
I like maintaining a simple, linear button layout of 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. |
Hmm, I see. |
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. |
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? |
Sure, I'll also see what I can do about the circular widgets. |
@Martysh12 just wanted to say good work these widgets do indeed look incredible. |
@OxygenCobalt Alright, the button layout should be more familiar now (and I also added a light version for each widget) |
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 Alrighty, do you need the measurements / design files? |
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. |
@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? |
@KraXen72 Here you go, hope this is what you meant |
@KraXen72 will let you know that the current wide widget is staying, this one is only going to be for 3x4-ish widgets. |
Finally doing real predictive back screen-20240704-130401.mp4 |
Going to hard-accelerate this |
@OxygenCobalt, would it be possible to change the disc number indicator as well? Currently it blends in a bit too much with the track items: If you scroll through a large list of tracks, it's easy to miss this indicator. I made an alternative design for this, which contrasts more with the track items. The divider at the top of the track list is replaced with a bolder |
Description
The Material 3 guidelines have been updated with a new slider design:
![lqc3vjs7- 1P Types-continuous](https://private-user-images.githubusercontent.com/49569238/316159547-60d35f90-575d-48dd-8b23-741b50836af1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjY4MTg1MjYsIm5iZiI6MTcyNjgxODIyNiwicGF0aCI6Ii80OTU2OTIzOC8zMTYxNTk1NDctNjBkMzVmOTAtNTc1ZC00OGRkLThiMjMtNzQxYjUwODM2YWYxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTIwVDA3NDM0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTU1OTk0ZmIzMDBhZTg3YmQ5Y2E1MzY5YmJmYzViYTcxMjFhYmQyMGQyM2JiYjJjNjY2MmNiYzdkYTE0MDdjNjgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.ihZENUL58j3oiJibl9H0aIcvtk2rRGRCHM3oIvlq7cQ)
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
The text was updated successfully, but these errors were encountered: