Replacing the spinner in the navigation bar with a better material design approach

[octacode]

Present Scenario

The spinner in the navigation bar where the name of the server appears and from where we can switch between our local HDAs or to the Welcome to Amahi Server looks a bit wierd

We can replace it with just a text clicking on which shows up the AlertDialogBox which allows switching of the servers or maybe do something fancy like in case of the Gmail app.

Looking for suggestions

[mohitsvnit]

I would like to work on it

[octacode]

Thanks for volunteering, Can you propose a solution for this before you start working on it?

[mohitsvnit]

What is purpose of that spinner? In my mobile I can see only one item in it i.e. "Welcome to Amahi"

[mohitsvnit]

Ok. I got it. It's a way to switch between server. Why I am not able to see my server?
How about making it like gmail? We can use material design drawer design

[adi23arora]

@octacode This can be implemented as an expandable layout with list view. It won't overlap then and expand within the navigation drawer. What do you say?

[octacode]

Sounds like a plan to me, but won't the animation of expanding and contracting be a bit troublesome and add unneccesary overhead. My suggestion is that we do it the way it has been done in the Gmail App:

1. We can add a header on the navigation bar with the name of the server like this
   
   also below the header we'll have the Shares and the Apps like the current version.

2. On clicking the down arrow button a new list will replace the current list and this new list will contain the name of the HDAs, user can select the HDA from here. Just like this below
   

@cpg @csoni111 How does this sound to you?

Also guys who are struggling to set up the Amahi server. Please go through this article by @vik-y
https://viky.co.in/2017/05/20/install-amahi-server-for-development/

Thanks!

[cpg]

I don't really understand what's being proposed, but it looks weird to have that large logo.

also the "Signed in as:" is a little superfluous.

[octacode]

We can change the text to "HDA:" and about the sign we can decrease the height of header so that it doesn't look weird.

[csoni111]

1. The ActionBar on the top already has the amahi logo on the left of the title. If we remove that from top, what about other screens?
2. The API currently does not provide the logged in user's name.
3. The number count on the left of hda name looks odd. Something like an icon of HDA would look better (or the first letter of the name in a bubble like in gmail app).

[octacode]

1. We can make a new theme for the navigation Activity which won't have the action bar icon. While all the other screens will follow the present theme with logo.

2. I did it by mistake, we can show the HDAs active in the list. We do have the API to show the name of the HDAs

3. Good, this sounds better

[octacode]

Any takers for this?

[mohitsvnit]

What is finally decided? What needs to change in navigation drawer?

[adi23arora]

Can I work on this issue?

[octacode]

Please propose a UI flow for this before.

[adi23arora]

@octacode I am planning to implement it as a Material Navigation Drawer covering the action bar.

• As discussed earlier, like the Gmall App, we will have the HDAs list and the default menu items, on pressing the down arrow, menu items list will be replaced by the list of HDAs.
• As suggested by @csoni111, instead of those numbers, an icon with the first letter of each HDA name will be shown in the HDAs list and the selected HDA's icon will be displayed on the top.
• Amahi icon will be displayed in background with some transparency.