UI Redesign

[electr1fy0]

The functionality of Localsend is excellent. I haven't encountered any issues with transfer speed or failure in my usage of this app.

The Problem

However, the UI could be significantly improved:

• The Receive page is essentially useless. It serves no purpose and should just be removed in favour of the proposed solution.
• Overload of buttons with no caption which causes confusion on first sight.
• The color scheme is inconsistent with any other MD3 apps and looks quite ugly.
  For example, the active page indicator is very saturated and bright which is not how it should be.
  Shadows are weird as well.
• The Navigation and Status Bar are not transparent.
  (If you have trouble implementing it in flutter you can look at the open source app Paisa which has it properly implemented while using flutter)

The Redesign

I made this design mockup and I think it will be a major improvement:

- Introducing the Home Page:

This houses all the features needed to use the app for Sharing and Receiving files in a neater and simpler to understand UI.
The More Menu would contain:
~ Device info
~ Settings
~ Troubleshoot (Should't Troubleshoot be in Settings though?)
~ Help

• One-Hand-Friendly UI and larger buttons.

• Made better use of MD3 components. Fixed the Color accents.
  (I took a Neutral blue color generated by monet as the base color of the whole UI).

• The add text button has been replaced with a MD3 text box where you would directly paste whatever text you have in your clipboard without any extra interaction. The confirm (✔️) button adds the entered text to be shared.

• Single/Multiple Recipient Setting has been moved to Settings (as it should be).

• Navigation Bar and Status Bar are transparent.

• History button added to Home page.

• More Expressive Device icons. They also serve as OS identifiers removing the need of the text.

• The Refresh button refreshes everything (both WiFi and Hotspot). (Is there a problem with it? Do tell me.)

• 2 Column grid to save space. This also looks nicer if people have fewer devices to share to as the page will not be half empty all the time. The list should be scrollable for more number of devices.

Note

• Navigation Bar has been removed because Google's MD3 Guidelines don't recommend using Navigation Bar for:
  ~ Two buttons only
  ~ Settings or User Preferences Page

Both of these were being violated here.

• I could not figure out why there's an APK extraction feature built into a file Sharing app.

I would assume everyone who has shares an APK already has one stored in his Files app so he can take it from the 'Select File' button.
I just can't have a third button without ruining the appeal of the UI but if you really want to keep it, maybe put it in the More section? This is certainly not a primary feature to be front and centre imo.

• I should also make mockups of other pages (and a dark mode) but I just got too tired with this one.
  This design was inspired by Pixel's Notification panel and Sync for Reddit app, perhaps you can take a look.
• Also, please implement Android's Media picker. The current one is slow and looks very old.

Lastly, thanks for the app. Let's see it improve UI-wise as well.

[Tienisto]

Thanks.

there are 2 unimplemented features that will come in v1.9 or v1.10:

• Share directory
• Share via link (for users without having LocalSend installed)

Both features can be easily integrated into the current UI: Directory is just another "file type" button, Link sharing is just a third entry next to single/multiple recipients. How would it look like in your proposal?

• APK sharing was requested some times (both as issue and outside of Github) and it was easy to implement

I will look into Paisa, thanks for mentioning this app. One important thing to note is that I use Flutter theming with very little modifications. I don't care how Flutter implements shadows on each platform. I just use the default. Also, this app is available on Windows, MacOS, Linux, iOS and Android. I don't have time to optimize the UI for every platform. Maybe a "native" app is needed to fit your needs. The current code base is kept very simple.

[Tienisto]

I don't know if there is a media picker for Flutter yet that supports iOS and Android. https://pub.dev/packages/wechat_assets_picker is the most popular solution

[electr1fy0]

• I was referring to Android's own Photo picker which can (maybe?) be used instead of an in built one in the Android app.
  https://twitter.com/MishaalRahman/status/1549392947627671555?s=20

• I don't understand how Share via link is similar to a setting that toggles between whether to clear Selections or not.
  Please explain it a bit more.
  Also, what is the link for?

• I believe the current Localsend Design is based on Android's Design already. This only makes it cleaner and more modern. I don't expect it to look worse on other platforms tbh.

I made an improved mockup incorporating the said changes.

I also made another one knowing that you use a Landscape UI for larger windows and landscape. I didn't make any changes to the layout. The image shows a 16:9 window.

[prayag17]

Shouldn't the devices panel be rounded on all four sides on desktop?

[electr1fy0]

I don't think so.

It's scrollable UI and no rounded corners at the bottom suggest that it can be scrolled.
It also prevents it from looking cramped in case of multiple devices.

[imvanda]

I have to say, your design is amazing👍

[Tienisto]

Added to v2 roadmap: #345

[Pentaphon]

I have to agree, the UI design needs to be totally simplified and the filesize (26 MB) is absolutely huge given how basic this app actually is. There's probably a lot of stuff that can be taken out to make the app much smaller, faster and simpler to use.

[electr1fy0]

As I've (repeatedly🫣) mentioned in other issues, I think the macOS app doesn't even need all this UI.
It could literally just be a simple menu bar app.

Soduto is a good example.

I'm no dev but I think it's also easier to do Menu Bar apps for macOS. (hopefully even in Flutter🤐)
(ChatGPT says yes)

I think I'll make a dedicated issue for it later.

[Tienisto]

@Pentaphon As you may have noticed, this app is written in Flutter which means that a separate rendering engine is needed. The only solution to reduce the apk size is to develop a native Android app in Kotlin.

@electr1fy0 Regarding the menu bar app, this may be implemented in the future because there are just many other things to do. In Flutter, the UI only needs to be implemented once, so it is not an overhead regarding development. The "Menu bar mode" will be just another feature on top.

[Pentaphon]

The only solution to reduce the apk size is to develop a native Android app in Kotlin.

Probably a good long term goal, then.

[electr1fy0]

@Pentaphon Doubt it, the entire app has been made possible using Flutter with its good cross platform capabilities using the same codebase. It's quite an achievement imo.
I think someone else will need to make native apps for LocalSend for his desired platform using the LocalSend protocol.
That's where open source plays its role.😉

@Tienisto I'm fine with that as long as most (if not all) main features are also accessible from a Menu Bar list with a well organized hierarchy, and dealing with the Window UI is not necessary for basic functionalities.

[suman-somu]

I want to work on this issue, and have already started some changes. How should I proceed with this ?
how do i divide the issue ? should I make separate minor issues to this one and continue solving each.

[Tienisto]

@suman-somu You are free to contribute the way you want. This issue seem to be quite big, so it may be helpful if you fix minor issues one by one.

[mrvancor]

The size for Android can be reduced by splitting the APK per ABIs. The user can download for his ABI. Also, you can remove support for non 64-bit emulators (x86) which will also speed up the build a bit. Or you can remove x86 and x86_64 for release builds.

[electr1fy0]

As of 1.9.0, the following have already been implemented:

• Refresh button refreshes both Wi-Fi and Hotspot.
• Edge to Edge. [Bug: Status Bar items are white in light mode.]

[MMachado05]

Should this issue be closed? By 1.12, it seems like a lot of the UX decisions made in these mockups have been more-or-less implemented.

Of course, I can't view an older version of the iOS app, so maybe the current version isn't actually that different to what @electr1fy0 was originally proposing to change. I only say this because the most recent activity in this Issue was about 7 months ago.

[electr1fy0]

I’d say we’ve made progress but we’re not even close yet. The roadmap says that the UI redesign should be completed by v2.0.0

[MMachado05]

Ahhh gotcha; that's pretty exciting, as I already feel the UI is so good as it is! Can't wait to see the improvements!

[greuff]

I just came to say that I find the UI in the current state (1.13.0) very good as it is.

[Pentaphon]

I just came to say that I find the UI in the current state (1.13.0) very good as it is.

It's ok now compared to before but it's just not where it should be. I'm glad there's still more to be done to it.

[NoNamesfriend]

Has someone already started with this task? I could join in.

[Jnss98b]

As of 1.9.0, the following have already been implemented:

• Refresh button refreshes both Wi-Fi and Hotspot.
• Edge to Edge. [Bug: Status Bar items are white in light mode.]

Not sure if this is a recent regression but in 1.13.1 the settings page isn't edge to edge on android on large screens

[Pentaphon]

Doubt it, the entire app has been made possible using Flutter with its good cross platform capabilities using the same codebase. It's quite an achievement imo.

If the dev succeeds in making localsend-cli without Flutter, it may be possible to create native 3rd party apps for each platform and we may see a Kotlin or better substitute for the current localsend app.