[Feature Request] A bunch of UI suggestions (some of them have been done by me)

[LittleYe233]

Motivation

Well, UI layouts have no common convention so my implementation may only fit my preference, but I think there may still be something worth changed. Therefore, I will give some hints of my personal suggestions on UI design with some screenshots from my modified version of this app. Layout bounds in developer options are shown for debugging, and there are at least one screenshot for every part of changes for reference.

List of major changes

Home page

• Use MaterialTheme.typography.headlineLarge.lineHeight to replace the "magic number" of line height of welcome text. It is just for consistency of typography style, but not all these numbers are fixed since there are too many of them :)
• Set a bit larger vertical gap between welcome text and album rows.
• Remove colons from album row titles (a little bit uncommon for titles ...?)
• Use headlineSmall for album row titles (inherited a little from YouTube Music).

TopBarWithSearch()

• Add a horizontal gap between icon and header text.
• Replace the default search bar (the input field) to a search icon. (I think the icon does the job perfectly, and the bar usually shows too short in width but too long in height so it seems a bit weird; BUT I have too little experience of Android development to implement it beautifully, so it may have more to improve).

Artist page

• Remove vertical gap of artist name of artist cards, since some CJK characters will be covered by the border in the original version.

Radio page, Playlist page and Settings pages

• Add the gap as well.

Artist detail page

• Remove colon.
• Use a smaller font for "Discography".

Album detail page

• Use a smaller font for album artists (the original version may be the same size as the song titles!).
• Add vertical gap.

Some other ideas that I have not already implemented yet

• Do not automatically focus on the user name input field when navigates to that setting page.
• "Play all" or "Shuffle all" button. (issue Add a button to play all from search results #41)
• Always use white / lighter font for lyrics (maybe it is only my fault; I found black texts for lyrics floating on the animation or blurred background images are hard to read than white texts; maybe a blurred album image followed by a desaturated / color mix filter can also fit white texts).
• An rearrangement of "Now playing" page (the control buttons are too large, etc.).

---

I know that this project is under a big update and rewrites, and these suggestions are in my personal view, so they may not to be PR-ed. But I am glad that they can become some tips and also glad to PR my changes as well.

[CraftWorksMC]

First of all, thank you for taking the time to draft out the ui changes!
I agree with basically all of the proposed changes, and definitely something I should've looked more into when first building it out. And I do agree that there maybe are quite a lot of magic numbers all over the app, I think in the future i should go back and fix spacing and corner radiuses to be more consistent.

Do not automatically focus on the user name input field when navigates to that setting page.

This has been bugging me for a while so it will definately be fixed in the coming days when i get a change to work on this.

"Play all" or "Shuffle all" button.

Not really too sure on how to implement it ui-wise to be honest, I was thinking of keeping the same style as the playlists and albums play and shuffle buttons, but not too sure how to make them fit nicely in the search ui.

Always use white / lighter font for lyrics

Right now the text changes to dark if the background colors are too light, else there wouldn't be enough contrast. What I feel could be done better is tweaking the luminance percantage the color inversion takes place. Else we could always darken the background colors to leave enough contrast for white lyrics.

An rearrangement of "Now playing" page

This was planned to be worked on more, to better fit with both Material 3 Expressive and other music apps (in terms of sizing and spacing), especially on older devices with smaller screens.


I'm also thinking of changing the artists page, as the artist's name is hard to read in certain scenarios, and don't really like artist picture being blurred.

If you’d like to make a PR with the changes you’ve already implemented, I’d be happy to merge it as soon as possible! It would be really appreciated!

[LittleYe233]

"Play all" or "Shuffle all" button.

Not really too sure on how to implement it ui-wise to be honest, I was thinking of keeping the same style as the playlists and albums play and shuffle buttons, but not too sure how to make them fit nicely in the search ui.

I think it may have no need to open a new issue, so I just write down here.

I think your design of these buttons on those pages are good enough and can be straightforward used in songs screen, just make them between the top search bar and the song list and always stick to top when scrolling up the list. A more common design is probably a floating "Play All" button at the right bottom corner of the screen, but in my imagination it is not very good for future features and breaks the existing style, just like you have said. If you do not dislike this suggestion, I can try to port that style to the song screen.