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.

[sanjitchak]

My proposed UI flow. @octacode Pardon me for my handwriting. Didn't know any other way to propose it.

[sanjitchak]

How is this looking? @octacode @cpg

[cpg]

Personally, I don't like it. It looks like a button, not some selector.

I don't know if it complies with material design, but it would feel to me that it does not.

[adi23arora]

@sanjitchak I have been working on this, just waiting for any feedback or confirmation on the user interface I have proposed, which complies with Material Design too.

Waiting for any feedback from @cpg or @octacode.

[sanjitchak]

@cpg Thanks! for your opinion. And yep, it was very stupid of me to use a button there. I will change it to something of a selector and compile it with Material Design

[sanjitchak]

@adi23arora It's ok. You can work on your idea and I can work on my own and show it directly.

Rest, leave the decision to mentors to select the better design and enjoy coding.

[adi23arora]

@sanjitchak I don't think its wise to do that. It's not a competition and there are many more issues to be solved and problems to be addressed.

The best approach is to first propose a solution to the problem you are addressing, in this case you can propose a UI and then seek feedback from maintainers. And if they liked your proposed solution, you can go implement it.

That was just my personal suggestion, rest is up to you.

[sanjitchak]

@adi23arora I am really sorry for making it look like a competition, which I didn't mean to.

I thought that showing it directly after proposing my UI Flow before, may save some time of Mentors to think, as they are already very busy.

So, I made it and just showed.

[cpg]

Let's all collaborate. Maybe @octacode can chime in when he comes back.

I mentioned in private that the small video/animation is very useful and the earlier description was a little too abstract, so it was a little confusing.

I would like to know what @adi23arora has implemented, because @sanjitchak has working code at this time, however the circumstances may have been.

So, I would say @adi23arora, could you and @octacode provide advice and guidance to make sure a sensible solution takes place? If @sanjitchak's code is close, let's just improve on that and benefit from the advice and working together.

[octacode]

Great job there @sanjitchak, looks like you already have most of the coding part done. However this is not we agreed on.

Comment - 7 to Comment - 11 clearly states what we agreed upon.

To summarize

1. Just like the Gmail app, on pressing the down arrow button a new list will replace the current list and this new list will contain the name of the HDAs and as proposed by @csoni111 in his comment along with the name on the left there will be the first letter of the name in a bubble (again like in the gmail app).
2. Keeping the Amahi dice as a header alone seemed a bit superfluous. So we can decrease the height of the header compared to what has been shown here.

[sanjitchak]

Thanks! @cpg for clearing the misunderstanding.
I agree with @cpg for @adi23arora and @octacode to provide guidance. @adi23arora, you are quite experienced than me. So, would you mind guiding me? I would highly appreciate it. Let's collaborate.

And thank you for those encouraging words @octacode, I really appreciate it. I will certainly try to implement it like that Gmail app list.

[sanjitchak]

How is this looking? @cpg @octacode @adi23arora

[arihant-001]

@sanjitchak, I think you need to change font size for hda name to 14sp with medium weight. You should follow these material design guidelines

[sanjitchak]

@ArihantJain456 Ok sure

[mohitsvnit]

@sanjitchak 2 amahi logo in same screen doesn't look good. Maybe @cpg or @octacode can suggest something. @octacode suggested to change theme for navigation drawer in this comment.

[sanjitchak]

@mohitsvnit Yep, removed it when the drawer is opened.

[arihant-001]

@sanjitchak, I don't think that @octacode suggested to hide amahi icon on opening of Navigation drawer. Instead, he suggested that the icon will not be there in navigation activity's action bar at all . Please read all comments carefully from the starting of discussion.

[sanjitchak]

@ArihantJain456 yep, you are right. And I removed it completely before. But then I thought of adding an icon at least when the drawer is closed as it was looking a bit empty.

Never mind, I will remove it completely then.

[sanjitchak]

@ArihantJain456 Thanks! for those guidelines. How is this looking?

[adi23arora]

@sanjitchak This interface in https://github.com/amahi/android/issues/300#issuecomment-374392053 is a bit close to what asked for. But there's still scope for some improvements in the UI part. Here's something I have worked on.

It's not complete yet. But you can use it as a reference if it helps in any way.

[sanjitchak]

@adi23arora yep, I agree. I still need to make improvements in the UI.

Thanks! for the reference.

[sanjitchak]

@adi23arora This looks close enough. What do you say? Kept font small due to material UI guidelines

[adi23arora]

@sanjitchak It still needs some work on the UI/UX part. Please pay some attention to user experience, like how a user will feel interacting with this UI.

Here are some changes I can suggest:

1. Change the background color of navigation header. This separates it from the navigation menu.
2. Add transparency to the Amahi Logo in the background (refer https://github.com/amahi/android/issues/300#issuecomment-374404369) or just make it as in https://github.com/amahi/android/issues/300#issuecomment-369889371.
3. Why is the Shares centered?
4. On switching to servers list, change the down-arrow to up-arrow and vice versa on switching back to shares. (refer https://github.com/amahi/android/issues/300#issuecomment-374404369)
5. Instead of highlighting the "select server switcher" on click, you can use the ripple effect.

[octacode]

@sanjitchak please use this as a reference https://github.com/amahi/android/issues/300#issuecomment-374404369

[sanjitchak]

@octacode yep was already working on it.

@adi23arora Thanks for your feedback. Made changes as told. Shares was centered to meet material UI guidelines. But, then each item in a material UI has an icon, so, added amahi logo. Please, feel free to say anything about feeling something amiss. I highly appreciate your feedback.

[octacode]

The big amahi dice doesn't looks good in the background. We should reduce the height of the header also you should add a black overlay on the header, might look better.

[adi23arora]

@octacode Instead of an overlay, we can just add some transparency to the Amahi dice as done in https://github.com/amahi/android/issues/300#issuecomment-374404369.

[sanjitchak]

@octacode @adi23arora
Well, i guess, in the end, I made it adhere to material guidelines. How does it look?

[adi23arora]

@sanjitchak You should have waited for a feedback from @octacode. I didn't comment for long because I was unsure about this change.

Adapting to Material Design Guidelines is fine but changes should not defeat the purpose of a particular UI component. The Amahi Dice logo should not be placed in that circular drawable. If you take a look at Gmail app, you might understand the purpose of that component.

That down arrow is a bit distracting, possibly due to-

• Large size, try to keep it small and minimal.
• It is highlighted to the front, try to blend it with the UI, by keeping the color same as text color.

[sanjitchak]

@adi23arora Well, I can still make changes to the code according to your feedback. Raised a PR so that we all can collaborate properly and see the changes I am making to the code. And if @octacode merged the code then you can also contribute too, with your own ideas.

And yes, that circle in that Gmail app is for showing profile photo. Let's see what @octacode suggests.

[sanjitchak]

Changed Navigation Drawer Arrow. @adi23arora

[chirag-jn]

Since the spinner is already replaced, this issue isn't relevant anymore! Solved in PR #380