moritz-weber / mucke

mucke - android music player
GNU General Public License v3.0
224 stars 10 forks source link

Landscape orientation / full scalability of the UI #137

Open chris-blues opened 1 year ago

chris-blues commented 1 year ago

It would be nice, if the app would support landscape orientation. It is running on my RaspberryPi running LineageOS which only has a landscape orientated screen attached to it. The app looks pretty silly, using only a 1/4 of the screen width.

20230827_115146

moritz-weber commented 1 year ago

Yeah, this looks ridiculous 😅 Allowing landscape mode actually is the default behavior. It doesn't look good though, and getting it to a satisfying point will be a lot of work. In my opinion even Spotify doesn't do this well.

I'd love to work on this, but there are more important issues regarding the functionality of the app.

Since I'm not a UI/UX designer, any help here is welcome.

chris-blues commented 1 year ago

Yeah, no hurry! This can wait!

I have a lot on my plate these days, but maybe I could take a look at the styling side. I'm not a UI designer or sth. But I did a few websites with CSS and stuff and maybe I can find some tweaks for this. I would imagine, that the artwork side of things could become awkward in landscape mode... How is it done anyway? Also CSS?

BTW, my RaspberryPi 3b+ doesn't seem to scan anything. I could find the log, which just stops and starts over again. I guess 1GB of RAM just isn't enough for an Android with a few apps... too bad! But many apps fail to work right on this machine. But that's quite a different topic...

Good night and all the best!

moritz-weber commented 1 year ago

mucke is developed with Flutter: https://flutter.dev/ It uses no CSS at all. The whole thing is based on a widget tree that I actually find quite intuitive to work with. To get an idea, you can check out the presentation folder: https://github.com/moritz-weber/mucke/tree/master/src/lib/presentation

As a side note, I think that the styling side is not very complicated. We mainly use a simple set of colors and mostly standard components. I think the difficulty is in designing the layouts for the different form factors. Smartphone landscape is one thing, but a bigger screen might require a completely different layout to make sensible use of the available space.

Edit: This looks like a good starting point to read up on this topic: https://docs.flutter.dev/ui/layout/responsive/building-adaptive-apps