Navigation Drawer: Brainstorming the content

[tobiasKaminsky]

I have in lots of issues that a navigation drawer (sidebar) is wanted.
Here we should discuss (maybe with) mockups which functions should be in the navigation drawer and if it is really needed.
The list below is only a teaser of the real issues that should be linked to it, once they are created.

Here is some guideline when to use it and what to include in.
https://developer.android.com/design/patterns/navigation-drawer.html

Content:

• Accounts with Avatars: List of Accounts expanding after clicking "Accounts"
• Separation
• All Files
• On device (Ability to filter downloaded / offline available files #407)
• Favorites
• Recent
• Shared with you
• Shared with others
• Shared by link
• Transfers: Shows current transfer, failed transfers, possibility to resume (Layout for upload list (part of reliable uploads) #765)
• Separation
• Settings
  • Help
  • Feedback
  • Log

Then only "account refresh" and "sort" will stay in "three points" on the top right side.

[joeplus]

I am just posting the link to the updated guidelines based on material design. I think the future development should focus on implementing the current design Google suggests for Android apps.
http://www.google.com/design/spec/patterns/navigation-drawer.html
The guidelines include also some examples on how to handle different accounts within one app (basically taking the new GMail app as a reference point).

I think there is also a support library for devices which are not running Lollipop yet:
https://developer.android.com/tools/support-library/index.html

[jancborchardt]

(Offline/all files: #407): Although I think this should be in "three points"

That shouldn’t be in the »three points« because it is an entirely different view. The three points items should only be tools for the current view. It’s good for the files »Downloaded« or »On device« to be an entry in the sidebar.

Another entry for the sidebar is of course the account switcher, as visible in the guidelines pointed out by @joeplus.

[joeplus]

From top to bottom, my suggestions:

Accounts with Avatars
++++
My Files
Shared with me
Shared by me
Starred / Favourites
Recent
Offline / Kept in Sync
Transfers / Upload queue
Pictures / Albums - specific view
Camera Backup
Trash
++++
Log
Settings
Help & Feedback

[jancborchardt]

We should avoid the use of »Me« however. To keep it in line with the web interface:

• All Files
• Favorites
• Recent
• Shared with you
• Shared with others
• Shared by link
• On device
• Transfers

[tobiasKaminsky]

Updated according to your suggestions.
Next step would be to include this step by step. To get started easier I would suggest to just "move" all existing items to the correct place in the sidebar and later add new entries.

[jancborchardt]

Yep, good call.

@davivel is there prior work for this in a branch (I guess not), or is it best to start a new one?

[tobiasKaminsky]

Ladies and Gentleman, we now have a navigation drawer :)
This is just a dummy.
My plan is to move the existing functions to the drawer:

• Accounts with Avatars: Should it possible to change it here directly? I think yes.
• Settings
• Help
• Log

Feedback is more than welcome. Especially @jancborchardt as I not very good at design...
EDIT: Maybe we can also have small icons very every item?

[jancborchardt]

NICE! This is really really cool, seriously.

Design-wise, we should follow the Google Design guidelines for the navigation drawer.

For example more spacing. And having the account switcher drop down when you click on the name (we can add a settings icon right next to the name as a quick link for settings).

We can use the icons from core – I will list which when it’s not middle of the night like now. ;)

The ability to change avatars would be a nice addition, yes.
Help and Log should be items inside Settings (on the bottom), and not have their own dedicated items in the siebar. We shouldn’t cram too much in there. ;)

Best belated Christmas present ever! 💃

[tobiasKaminsky]

Regarding accounts: I want to do it this way:

(from http://theopentutorials.com/tutorials/android/listview/android-expandable-list-view-example)

Maybe "Help", "Log", "Feedback" can also be grouped by this?

[tobiasKaminsky]

There is a little problem regarding the "three lines (hamburger):

As you can see it is very full in the ActionBar.
Also, currently the owncloud icon is used to browse up the folder hierarchy.
But this is the same method, which is used for the hamburger.
And I have no solution found to use both. Beside that it would be very difficult to touch this very small hamburger.
So my current idea is to stop using the owncloud icon as "up" and start using it as toggle for the navigation drawer. For browsing there can be used the folder name as it is now.

[tobiasKaminsky]

Also there is a problem with android version < 3.0. On this versions there is no support for the "hamburger". It is just not there. But swiping from left to right still opens the drawer.

[tobiasKaminsky]

@davivel For your information :)
Feedback is welcome :)

[tobiasKaminsky]

Has anybody an idea / url how I can get the user icon of an account?
My idea was to have the icon next to the account in the list...

[jancborchardt]

Well, the stuff that is in the »three dots« can go away:

• »Refresh account« can fully vanish in favor of pull to refresh. Yes, it’s not the full account – but currently there’s no real way to distinguish that anyway.
• »Settings« will be on the bottom of the sidebar
• »Sort« should either be in the settings, or above the file list (next to a to-be-introduced search bar).

The upload and new folder action should be behind a floating action button on the bottom right.

Pressing the hamburger icon as well as the ownCloud icon (and swiping from the left edge of screen) should reveal the sidebar. Navigation into parent folders can be done by pressing the folder name and navigating up in the dropdown, or by using the back button.

Does that sound good?

[tobiasKaminsky]

Wow.
These are real big changes.
But I like them :)
I will add them one after the other ;)

[jancborchardt]

Yup yup – the road to material design. :) cc @davivel

[tobiasKaminsky]

What is the lowest API we have to support?
This is relevant for the floating button...It seems it has to be API 21.

[tobiasKaminsky]

Currently state of the art:

[tobiasKaminsky]

Regarding "sort": Personally I think this can stay as the only item in the action bar.

[tobiasKaminsky]

By the way: All Files / On Device is also working :) :)

Sorting is for now an entry in the action bar.

[joeplus]

Fantastic work so far, huge improvement coming with this!

Regarding the user icon: Would it be possible to use the users avatar from the server or is there no method to retrieve it?

Regarding the different accounts: Why not stick to Google's suggestion?

Personally I really like it but that is open for discussion of course. I am not quite sure how difficult this is to implement since there is a support library from Google which should work all the way down to Android 2.1 (API Level 7).

[jancborchardt]

Yep, I’d agree with @joeplus that we should stick to the Material design and the look of the new Android Lollipop here. :)

[tobiasKaminsky]

But...For me I have different accounts, but no user icon.
Then they would look all the same?

[tobiasKaminsky]

Currently we use android-support-library v4.
Material design is only available in v7.
@davivel Is it possible to upgrade to v7?

[joeplus]

I guess so. The username and / or server would have to be shown as well under the image. So instead of "Jonothan Lee" and "[email protected]" it should probalby say "Tobi" and on the new line "10.0.2.2".

The images would still look the same for people who don't change them but has the advantage of showing the correct image for people who use them, like me and my family :-)

[Kernald]

Some design notes here (I'm aware it's a work in progress):

• the drawer should be displayed over the action bar (this means more space for it, nicer on the eye): http://www.google.com/design/spec/patterns/navigation-drawer.html
• the application icon shouldn't be displayed anymore on the action bar: http://www.google.com/design/spec/layout/structure.html#structure-app-bar
• if the user didn't set a profile picture, maybe generate one with the first letter of its username, like GMail does? This allows to assign a specific color to these accounts without pictures, to make them more identifiables

Moving to support v7 would allow to drop SherlockActionBar too, using ActionBarActivity.

[tobiasKaminsky]

Is there something that android/google provides for the account switching?
I have not found something so far... :/

[joeplus]

Didn't find anything from Google either. Some other lib/project on GitHub though but I guess you have already seen that. But I believe it requires API Level 10 at a minimum: https://github.com/neokree/MaterialNavigationDrawer

[tobiasKaminsky]

@davivel Can we just use the library @joeplus has referenced? This one also uses Calligraphy
Android-UI.

[davivel]

Coming back, sorry...

I'll have a look to the library.

[davivel]

Well, at first sight it uses other external library. I'd prefer not having chained dependencies in the project. Let's see if we can find some other option..

[davivel]

Let's do it.

A first version of the navigation drawer finally came the internal current sprint. @tobiasKaminsky, you already made the work!!

Before we dumbly repeat things, I need to ask you about the work you already did on it. Did you remove ActionBarSherlock in your work, or could you add the drawer without that step?

About the scope of what we want to achieve in this sprint (remember: QA will review it, so we need a closure), I would like to let some things out:

• No Material Design consideration for the first version; this includes the styling of the accounts selector and the floating action button.
• We were considering not moving the account selection at all for the first version; but if it's working for you, we could consider include it.
• Android 2.x and 3.x are not supported anymore; if this works there, fine; it doesn't work there, fine; if it's ugly there, just look to other side :)
• Only entries that really go to some view may be in the drawer. For instance, the 'On device' you show in the last picture has no target right now. There's no need to remove it, it's OK let it commented so that it does not appear. Our list right now includes:
  -> Files (or 'All Files', whatever is prefered)
  -> Settings
  -> Logs (only visible in APK built in debug mode, such as the current option in the action bar menu).

About Material Design stuff: it's coming. I will create some issues about how we'd like to take the first steps there. Let's keep the issues small so that they are easier to go 'til the end.

[jancborchardt]

Great to see the progress here! Please share screenshots as soon as you can so we can iterate. :)

[tobiasKaminsky]

@davivel
I have updated my (old) local navigation_drawer branch.
ActionBarSherlock is still in my branch.
Account selection is working for me. But currently a new created account is only shown after a restart of the app. (but this should be some minor changes).
I do not know about the support of 2.x and 3.x, but I doubt it ;)
On Device vs all Files is already working.

I have seen that @masensio is working currently on navigationDrawer in owncloud/android.
What should I do with my branch on my local pc? Push it as a new branch?

[davivel]

Yes, please. Maybe we need to change our strategy. The work of María in that branch started getting rid of ActionBarSherlock and we're still with it - we found some unexpected dependencies when added the Android Support Library with the ActionBar.

So, if your drawer is already working even with ActionBarSherlock, maybe we can take it as the starting point and getting rid of ActionBarSherlock with #692 .

[davivel]

@tobiasKaminsky , I removed our navigation_drawer branch. We will keep locally our changes about ActionBarSherlock and study if merging them with your navigation_drawer, or just moving them to the first branch about Material Design.

[tobiasKaminsky]

I have updated my branch and committed it directly here.
"On device vs all files" is working
Reloading account list after creating a new account is also working

Next step for me is to implement the account avatar or at least a circle in a calculated color of the username. (there is already some code in it, trying to do this).

[tobiasKaminsky]

PR is #987

Currently state:

Remaining problem: Color calculation is not the same as in /core as Integer.parseInt is not working the same in JavaScript and Java.

[masensio]

Hi @tobiasKaminsky,

we will review your contribution to add it to the app.
Thanks a lot for the navigation drawer implementation.

[davivel]

@tobiasKaminsky , it's great to see the progress of the account selection. @jancborchardt, maybe you would like to make some comments on that design?

From our side, we need to apply some QA to this right now, before it grows too much. We need to grant that the introduction of both the navigation drawer layout and the action bar don't result in unexpected behaviours or bugs in different Android versions.

We don't want to interfere the progress of the account selection, so we will proceed next way: I will create a separate branch from navigationDrawer_update called navigationDrawer_basic. In it we will hide the account list; unfortunately we don't have enough QA power to test all of it before ending the current sprint, so we will hide it for this _basic branch in order to keep the scope of tests under control. The work on the account list, or on other navigation drawer entries, may go on in navigationDrawer_update.

cc @masensio and @purigarcia

[jancborchardt]

It's very cool! I would just not duplicate the ownCloud logo there, and instead of having a separate line for the name, just show the name behind "Account".

Also, we should really get Material design in so this looks proper modern :)

[tobiasKaminsky]

The lower ownCloud logo should be replaced by the avatar of the current account.
If it is not there I want to use the rectangle with the first letter.
Do you agree?

Regarding Material design: What is missing in the drawer?

[Kernald]

The fonts, colors and margins will need a little bit of work to be Material-Design compliant. Also, using icons for every entry would look much better.

See here for details.

[Kernald]

And Google just releases a design support library. It's worth taking a look.

[jancborchardt]

Any updates on this, especially the Material-style account switcher, the Favorites entry and the »Shared« entries? @AndyScherzinger @tobiasKaminsky @LukeOwncloud @Kernald

[AndyScherzinger]

Not yet. I think we can revive the account switcher implementation done by @tobiasKaminsky and I can rework the drawer implementation for the UI side of the issue. So yeah I kind of have it on my personal roadmap UI wise -what do you say @tobiasKaminsky should I open a new branch (from master) to revive your already been done efforts?

[tobiasKaminsky]

So...we did the next step: account switching is back: #1537
What else is missing here?

[tobiasKaminsky]

Closing as this issue is just to big and should be separated in smaller ones if necessary.