Use Material Design in Android app #78

Closed
opened 2025-11-07 08:25:39 -06:00 by GiteaMirror · 9 comments
Owner

Originally created by @carlylemiii on GitHub (Aug 22, 2017).

The app currently uses a navigation bar along the top. This doesn't jibe with Material Design guidelines, which DO now support navigation buttons, but they should be along the bottom.

https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-usage

Making this design change would be more visually appearing, be more usable for the end user with a larger screen (really, the point of these navigation buttons anyway), and it would be more in line with the iOS counterpart. All in all, this would be a great change to make.

"Settings" might belong in an overflow button, or in a sidebar (hamburger button menu), not sure. You'd have to make the right call there.

Originally created by @carlylemiii on GitHub (Aug 22, 2017). The app currently uses a navigation bar along the top. This doesn't jibe with Material Design guidelines, which DO now support navigation buttons, but they should be along the bottom. https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-usage Making this design change would be more visually appearing, be more usable for the end user with a larger screen (really, the point of these navigation buttons anyway), and it would be more in line with the iOS counterpart. All in all, this would be a great change to make. "Settings" might belong in an overflow button, or in a sidebar (hamburger button menu), not sure. You'd have to make the right call there.
Author
Owner

@Nxt3 commented on GitHub (Sep 12, 2017):

It's because the Dev is using Xamarin. It sucks :(

@Nxt3 commented on GitHub (Sep 12, 2017): It's because the Dev is using Xamarin. It sucks :(
Author
Owner

@mathearts commented on GitHub (Sep 21, 2017):

But Xamarin allows for material design-like theme: https://developer.xamarin.com/guides/android/user_interface/android-designer/part_4_-_material_design_features/

@mathearts commented on GitHub (Sep 21, 2017): But Xamarin allows for material design-like theme: https://developer.xamarin.com/guides/android/user_interface/android-designer/part_4_-_material_design_features/
Author
Owner

@kspearrin commented on GitHub (Sep 21, 2017):

@carlylemiii I'm not an Android user, but I thought the navigation at the top was the Android standard? Is the bottom nav something new?

@kspearrin commented on GitHub (Sep 21, 2017): @carlylemiii I'm not an Android user, but I thought the navigation at the top was the Android standard? Is the bottom nav something new?
Author
Owner

@carlylemiii commented on GitHub (Sep 21, 2017):

Re-looking through the specs, I guess it's fine as is actually, but I've not seen it implemented with icons on top besides in Bitwarden.

https://imgur.com/a/YQu2I

The bottom is a newer addition to the guidelines because as devices are getting larger, the bottom of a screen is more easily reached than the top.

I also just thought it would be cool for iOS and Android to match in that regard.

@carlylemiii commented on GitHub (Sep 21, 2017): Re-looking through the specs, I guess it's fine as is actually, but I've not seen it implemented with icons on top besides in Bitwarden. https://imgur.com/a/YQu2I The bottom is a newer addition to the guidelines because as devices are getting larger, the bottom of a screen is more easily reached than the top. I also just thought it would be cool for iOS and Android to match in that regard.
Author
Owner

@kspearrin commented on GitHub (Sep 21, 2017):

I like it at the bottom better too. We could whip up a custom control implementing the bottom navigation but I would rather wait for Xamarin.Forms to create some official implementation for TabbedPage (what we're using now).

@kspearrin commented on GitHub (Sep 21, 2017): I like it at the bottom better too. We could whip up a custom control implementing the bottom navigation but I would rather wait for Xamarin.Forms to create some official implementation for [TabbedPage](https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/tabbed-page/) (what we're using now).
Author
Owner

@owendaprile commented on GitHub (Sep 21, 2017):

One thing is that the header should just say bitwarden and not the name of the tab you're on.

@owendaprile commented on GitHub (Sep 21, 2017): One thing is that the header should just say bitwarden and not the name of the tab you're on.
Author
Owner

@Nxt3 commented on GitHub (Sep 21, 2017):

and the title of the toolbar shouldn't "move" with swiping between tabs.

I think the smartest thing would be to follow Material Design for the toolbar in that the title is static ("Bitwarden"), and there is a bottom navigation bar with the tabs; disable swiping between tabs if you use a bottom bar.

@Nxt3 commented on GitHub (Sep 21, 2017): and the title of the toolbar shouldn't "move" with swiping between tabs. I think the smartest thing would be to follow Material Design for the toolbar in that the title is static ("Bitwarden"), and there is a bottom navigation bar with the tabs; disable swiping between tabs if you use a bottom bar.
Author
Owner

@owendaprile commented on GitHub (Sep 21, 2017):

Also think about using a Floating Action Button to add an entry from anywhere.

@owendaprile commented on GitHub (Sep 21, 2017): Also think about using a Floating Action Button to add an entry from anywhere.
Author
Owner

@kspearrin commented on GitHub (Dec 29, 2017):

Next version uses a new bottom navigation view. Check it out on play store beta.

@kspearrin commented on GitHub (Dec 29, 2017): Next version uses a new bottom navigation view. Check it out on play store beta.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/android#78