Buttom Navigation Bar for Android


#1

I will like to request for a Buttom Navigation Bar for Android apps as defined by the material design guideline.


Something similar to what currently is provided in the IOS apps in dropsource.

Main behaviour:

Scrolling
The bottom navigation bar can appear and disappear dynamically upon scrolling:

Scrolling downward hides the bottom navigation bar
Scrolling upward reveals it

Thanks


#2

Bumping this post up myself.

We really really really NEED Button Navigation for my android apps.

You have it for IOS please give one for Android too.
Navigation has become one my main limiting features of android development in dropsource.
I’ve tried using view and icons and duplicating on every page. Its not practical and always give up on it


#3

@seanhoots Does the Pager View with its tabs on top help with this by chance?


#4

Unfortunately it doesn’t. The Pager View are for tabbing. If you could bring the pager view tabs at the bottom of the page then maybe it will have worked a bit. But at the top, it makes it even hard for users to reach to easily navigate.

We desperately need the bottom navigation for Android.
I’m actually not sure why Dropsource created one for IOS but didn’t create one for Android.
Currently if anyone creates an IOS app and wants to replicate the design to have a consistent look, they won’t be able to do it.
Using workarounds its just too tedious and doesn’t really work well.


#5

Yeah I agree with you on the divergence of IOS and Android designs.

My main question to you and dropsource is what navigation design pattern do you recommend for android apps.
Because currently there is not navigation drawer and no buttom navigation bar.
So can you guys suggest some design patterns for achieving navigation in android?

I’ve seen a number of apps being developed with dropsource and so far navigation has been one of the weakest design points.
Haven’t found any clean design yet so will be helpful if you guys give us some guidelines or design patterns for navigation in android apps developed with dropsource.


#6

There are many times where iOS and Android design patterns diverge so the need for consistent User Interface experiences cross platform using only native classes isn’t the easiest thing to achieve. You’ll notice that many dual platform apps out in the stores today take 1 of 2 choice approaches… use native tooling which diverges each UX to be consistent with its respective design patterns, or custom tooling is built out to ensure a consistent design across platforms. Much of this stems from earlier design schemes due to many Android phones “still” relying on the 3 button (back, menu, app drawer) hardware designs. This is why before there was a BottomNavigationBar there were top menu navigation and with that came tabs. iOS has held a UITabBar in its foundational UIKit since very early on. Dropsource didn’t have to create a tab bar to gain a tab bar in Dropsource’s iOS side. We got that functionality out of the box. Material design has introduced the BottomNavigationBar class to Android.

I will add the inclusion of the BottomNavigationBar tool to our feature requests tracker. I agree it would be helpful and handy to have. It’s a powerful tool for quick-navigation of screens.


#7

Yes sir, and for the record, adding a bottom bar and drawer functionality would open up the ability to have 2 more options for navigations means on the Android side.

For linear traversals, using Goto Page actions with the inherited Android “back button” is the most widely used. This is true in iOS as well with the UINavigationController class and it’s built-in back < button.

For lateral traversal, iOS Tab Bar and Android Pager Views allow for context to shift from a surface level with the GoTo Page actions moving into depth. Adding BottomNavBar to Android would effectively shift the idea of Android Tabs to the bottom of the screen. I agree that it’s a more comfortable experience for 1 handed operations. I have this added to the feature requests tracker.

side note: Android’s side “Drawers” aka Hamburger Menus are a class available on the Android side but have been publicly rejected by Apple’s design team and the Human Interface Guidelines. This is a pretty neat read on this topic from the iOS perspective https://uxplanet.org/tab-bars-are-the-new-hamburger-menus-9138891e98f4


#8

My issue is not about the transitioning. What i’m asking for is presentation of the menu items.

How do i present menu items to my users without a navigation bar or a drawer (i’m not a big fun of drawers though)?

I think this link actually advocates for having a bottom navigation bar as well. I’m not a fun of the Hamburger Menu style myself and the reason i’ve been focusing on the bottom navigation bar.


#9

Presenting menu items could be achieved within pages using means like the drop down menu (awesome implementation you showed us in that post of yours), and things like show/hide buttons, tables/collection views, etc.

Some utilize alerts as a “fork in the road” style modal for presenting options and taking action based on selection chosen.


#10

I’m referring to navigation menu items.
From the article you shared it was stated that the navigation should mostly always be visible allowing the user to be aware of where they are?
I’m not sure how one is going to use drop down menus, tables/collection views, show/hide buttons for navigation menu.

Below is a snapshot from part of the article you showed. Both Google and Apple agree on having a bottom navigation bar


#11

I’m offering options available now in Dropsource. I agree that a BottomNavBar on the Android side would be helpful. It’s not currently in Dropsource but I’ve added it to the Feature Requests Tracker so that engineering is aware of the interest in its use for sure.

I’m grateful you’re bringing these items up. We capture all of this. Thank you.


#12

Quick question, are you guys able to add an option to have the Pager View display the tabs at the bottom instead of always at the top?


#13

@seanhoots That’s a neat thought there. I don’t know what sort of freedom Android’s native class gives us in that respect.

@scheatham @cchute expanding on seanhoots comment above here, I’m not sure its capability but In lieu of having the BottomNavigationBar Class feature on Android currently, do you think it even possible to easily have an option to move the View Pager “tab” bar portion to the bottom of the screen? Conceptualizing that, it seems like a slick way to create an “Android Tab Bar”.

It might be hard-baked into the native class so much that this isn’t easily possible but I wasn’t sure.


#17

A little update here… we’ve been talking behind the scenes about the possibility of this. Engineering is going to research a bit into this idea of repositioning the tabs. Thanks for bringing it up.


#29

Hi @seanhoots,

I have a follow up. We researched your idea of adding an option to shift the tab bar portion of the Pager View to the bottom of the page and engineering has found a way to make this a reality in the platform. We’re adding this into the workload for the next (2.15) release schedule which means it should be an added feature to the element in the next couple weeks.

Thanks very much for working with us and bringing your ideas forward. We are excited to include this UX addition into the platform.

I’ll deliver details when this releases and I’m also looking forward to trying it out too.


#30

Thanks Wade for pushing through this feature.

Also if possible let them add ability to have both the Icon and text on a tab, just like the way the IOS version works.
Currently you can either choose only text or only Icon.

Thanks again.


#31

Pinging @cchute on this side request into the feature.


#32

An update on the timeline of the feature where we add the option for the View Pager bar to live at the bottom of the Page instead of just the top. There’s more to test before we release this feature and we have a scheduled 2.15 deployment commencing tomorrow (Nov 28, 2018). This feature will not have completed engineering/QA before that deadline. We will have a 2.15.1 update coming out in a week or 2 and the plan is to include this in that.

@seanhoots I know you were interested in timeline for this so I wanted to keep you updated as I got new info.