Total Material Design 3 (You) Revamp?

[Pentaphon]

Any chance we can get a Material Design 3 redesign of the UI? It's a simple UI but it could still use a refresh. It's a bit too 5.0 Lollipop.

[sfan5]

I can barely scrape by regarding design for the UI that mpv needs, so no I don't have time nor expertise to do a full redesign in whatever Google has come up with now.

[Pentaphon]

I can barely scrape by regarding design for the UI that mpv needs, so no I don't have time nor expertise to do a full redesign in whatever Google has come up with now.

Fair enough, but maybe you can leave it open so if somebody who wants to take on an easy Material design UI refresh can update your player for you with a PR? Maybe mark it "help wanted"?

[Marco-9456]

@sfan5 Are you still interested?, because I made in my free time a prototype in Figma of how the app would look like using m3 Components, it's still not complete, but if you're interested in it, I would be more than happy to continue it.

Take a look at it and tell me what you think: Figma

[sfan5]

This looks interesting but do you have a redesign in mind for the current main page? The file picker-centric UI is no more.

[Marco-9456]

Thanks for your reply! Regarding your question, the main page you see in the prototype is a file picker. It allows you to browse the media folders of the phone. The options to open the document tree and open a URL have been replaced by FAB buttons located in the bottom right corner. Additionally, the settings option has been replaced by a gear icon on the left side of the top app bar. I have also included a search button and a button to change the main page view. Please note that the prototype is not yet complete, but I will ping you later when I'm finished with it.

V01


V02


V03


Final


Final prototype:

Figma

Screen Record

https://github.com/mpv-android/mpv-android/assets/41828058/07bacb4c-659e-46d1-a2bd-93e25d25bca3

[Marco-9456]

@sfan5 I didn't get a reply from you, but I continued anyway, please let me know if you have any questions about the components or if you have something in mind that you want me to visualize.

[Pentaphon]

@Marco-9456 would you be able to revamp the player UI as well?

[Marco-9456]

For now i just did the main page, settings page, inside a folder, inside a folder(empty), added a 3 dots menu and a video details sheet that gets triggered when you long press on a video, on and of buttons, and the player UI will be done later, but i just don't want to do it completely without getting a feedback from sfan.

[Pentaphon]

@Marco-9456 i wouldn't expect you to do it without sfan's input. Thanks for your work.

[sfan5]

Thank you for your effort.

Regarding your question, the main page you see in the prototype is a file picker.

There are technical reasons why the file picker isn't the center point of the current design and I don't expect these circumstances to change. If you design without that in mind then that's not very helpful to me.

Your prototype also envisions a proper media library with proper thumbnails and edit capabilities. This is unlikely to come much for the same reason why the file picker is considered legacy.

Feel free to give a player UI redesign a try too, but note that I already have another design prototype in #554 which I haven't had time to look at.

[Marco-9456]

There are technical reasons why the file picker isn't the center point of the current design and I don't expect these circumstances to change. If you design without that in mind then that's not very helpful to me.

Ok, so what I understood is that you don't want the app to start directly into the file picker, right?

If that's the case, how about something like this?

Screenshot

Your prototype also envisions a proper media library with proper thumbnails and edit capabilities. This is unlikely to come much for the same reason why the file picker is considered legacy.

Thanks for the info. I wasn't aware of these restrictions, which is why I let my imagination run wild.

Feel free to give a player UI redesign a try too, but note that I already have another design prototype in #554 which I haven't had time to look at.

I'll do it at the end

---

Edit: this is what I came up with:

Screen record

https://github.com/mpv-android/mpv-android/assets/41828058/7e4507d1-30db-4df9-b523-c6284650294f

Screenshots


or try it out yourself, Figma

[Marco-9456]

Here is the redesigned player UI:

Screenshot

 

Screenrecord

[Pentaphon]

Here is the redesigned player UI:

Looks good except I would remove the circle around the play button and just make the play icon bigger.

[Marco-9456]

V2:

https://github.com/mpv-android/mpv-android/assets/41828058/ec15dc72-fc49-4162-8c74-44f9b0ff6602

[sfan5]

Ok, so what I understood is that you don't want the app to start directly into the file picker, right?

Correct.

If that's the case, how about something like this?

Yes, that looks workable.

Here is the redesigned player UI:

Looks great an and feels very consistent. Thanks. I can't promise that I will have any time at all to work on this in the future, but I might use some ideas to improve the current design.

[Pentaphon]

V2:

I still think the ring around the play button feels like excess visual clutter.

I also think the player UI should be more gesture oriented rather than tap oriented so the 10 back and 10 forward buttons can possibly go as well or be optional.

[Marco-9456]

Looks great an and feels very consistent. Thanks. I can't promise that I will have any time at all to work on this in the future, but I might use some ideas to improve the current design.

I'm glad you liked it, and yeah take your time, I totally understand that you might not have the time to implement it, the important thing is that you have something that you can work with now :)

Also, here is the player UI again with some little changes and a portrait view:

Portrait View

Landscape View

Note: all the the Components and fonts that where used in the prototype are from Material design 3 offical documantation, so tecnically the whole thing can be implemented following the m3 documantation:

Here are some resources that might help you to achieve the design:

• Components
• Google Fonts
• Jetpack Compose
• material-components-android
• Seal yt-dlp android GUI, has a great implementation of md3

Edit 06.28.22:

This will be the only place I update the hyperlink of the Figma prototype in, The following link will be updated every time I do changes to the prototype:

This is the Prototype with the latest changes.

[Marco-9456]

I still think the ring around the play button feels like excess visual clutter.

I changed it for you :)

I also think the player UI should be more gesture oriented rather than tap oriented so the 10 back and 10 forward buttons can possibly go as well or be optional.

The gestures will stay the same, the forward and backward buttons appear only when the user clicks on the running video or presses the pause button, if nobody likes this behavior, it can be removed or sfan might add an option in the settings page which lets the user customize how the player UI looks like or change the order of some buttons.

This is just a concept, how the app will look like at the end is sfan choice.

[da3dsoul1]

Wow, the prototype by Marc-9456 in figma looks so consistent, here's hoping for the possibility of it all being implemented in the main branch!

[khaled-0]

just a suggestion but how about BORROWING YouTube's layout for the player