[FR] move header text to top app bar

[Lexvox]

Problem

On the home page the Gramophone header takes up quite a bit of space of the UI. I get that yall want to get the name of the app out there, however 'advertising' to the people already using the app is hardly necessary.

Also it creates a bit of visual imbalance with a huge black (or whatever background your material u has) hole up top, directly followed by the Gramophone text and tabs, which create an unnecessary visual cluster.

Solution

Either by default or a settings option, remove the header text and move the category tabs up next to the search icon. (alt 1) In case of overflow of the tabs into the search icon add a gradient overflow over the category as shown in alt 2 below.

Conclusion

Removing the header text would remove the current visual imbalance and free up additional space for the interactive elements of the app, removing essentially functionless visual clutter.

This is very much high level nitpicking but it's the only little prick in my eye in an otherwise very clean and minimal app so at this point, a big kudos to the devs for an outstanding job. 🤘 It very much looks like it just belongs. The stock pixel music app we never got.

[nift4]

It won't be removed because that's a top app bar: https://m3.material.io/components/top-app-bar/guidelines There also won't be an option for toggling because one of our principles is that Gramophone is not a UI design DIY kit :D however I'm open to making it smaller (using center or small style from m3 guidelines)

[Lexvox]

Small and left aligned would probably be the way to go then, as center aligned would again create visual imbalance, due to the right aligned search and 3 dot icons.

Alternatively, instead of the text, the Gramophone logo could be used as well.

I've included an outline version of the logo, to serve as an example how a line based icon would look like, since most of the icons in the app follow this same style. Lmk if ur interested in the .svg.