Brainstorming bottom navigation (for bigger screens)

App version: 2.2.0-beta2 (9f88e3c7c) from Google Play

Problem you may be having, or feature you want:
On big screens the side navigation can be hard to use.

Suggested solution:

Just creating a new discussion to into more detail @merlin @FeederPilot :slight_smile: I like the above proposal!

Just not a big fan of tabs - do we know how other apps deal with a multitude of screens that need to be hosted?

Screenshots / Drawings / Technical details:
To be prepared at some point.

3 Likes

I’ve been going through my apps to find some examples and one app I liked was the new, redesigned Goodreads app.

It has the standard max 5 buttons at the bottom but the right-most button isn’t a screen itself but a “more” button that opens a bottom drawer with 9 additional, less often used screens.

I think that’s a nice idea that could be a catchall drawer for less frequently used stuff like the settings, profile, stats, discover page, feed management and so on.


While we brainstorm what would end up being a partial redesign of the app it would be nice if folders or categories could be included in these thoughts. I feel like this is a feature that will come at one point or another and it would be smart to prepare the design for that.

2 Likes

Yes, I need this. But I would like an option to autohide when scrolling, just like the sidebar is out of the way until I call it. Some music players and other apps dont do this and it is kinda annoying xD

2 Likes

Regarding “do we know how other apps deal with a multitude of screens that need to be hosted?” - until I moted to AntennaPod I was using CastBox and they have something similar - bottom navigation w/ some sot of ‘tabs’ (they use buttons) - I felt it made quite sense but their distribution was (IMHO) not very optimal.

That’s quite interesting. That’d be different from what @merlin proposed (merging some screens, using tabs).
I’m not a fan of tabs, but I like the grouping of e.g. Queue (which we maybe should rename to Playlist indeed) and Playback history - it feels they fit together. Same for Podcasts and Add podcast.

Say we have space for 5 items, what about:

  • Home (would be great if it gets implemented - proposal)
  • Playlist (Queue, Playback History)
  • Tags/Groups/Folders (basic function implemented, would need improvements - tapping on this menu item I feel could open the list of tags, to go to their respective list of podcasts or playlists - more info)
  • Podcasts (Podcasts, Add podcast, Discover)
  • Episodes (New, All, Favourite)
  • More
    • Statistics
    • Downloads (Running, Completed, Log)
    • Settings

Am I forgetting any screens? (I’d love to get an Inbox also but don’t see it happening any time soon.)
Would you order/arrange them differently?

Settings would need to be added:

  • Sidebar VS bottom menu
  • Bottom menu settings (e.g. order, what to show/hide)
Why have a side-bottom switch

I think we can’t force all users to use this in one go. Hence the bottom-side switch. Firefox on mobile has done something similar: setting for having the toolbar (incl menu) at the top or bottom. A switch allows us to gather feedback over a longer period of time, and let people switch when they’re ready.

When there is consensus on the list (content & order), I could start working on some mockups. Of anyone can paste here screenshots of bottom navigations they liked or disliked, that’d be very helpful for making mock-ups :slight_smile:

2 Likes

@keunes When you say tags/groups/folders you mean hierarchical view? If not I don’t understand why it doesn’t go with podcasts screen?

1 Like

Fair point @Matth78. They could indeed be just listed/filtered under ‘Podcasts’. So that would only leave the use-case of having multiple playlists. Which then could then display as a list when tapping on Playlists. So I reckon the ‘tags’ can be removed indeed.

1 Like

I like the idea of “More” button - that indeed can be good ‘future proof’ solution. What I didn’t get though is your comment about not liking tabs… but then I see you’d group multiple features under single bottom navigation button - how would you implement it if not via tabs?

BTW Bottom navigation & tabs is used e.g. in Google Play Store - which should be a show case for correct design :slight_smile:

2 Likes

I don’t like 'em because they take vertical space, don’t look clean (ok, taste is subjective) and limit swiping options (cf inbox discussion).

By accepting the thing you don’t like: tabs :wink:

To be honest I never use the Play store that extensively that I ever had a look at their tabs. But maybe you’re right. Swiping doesn’t equal changing tabs (which is the major annoyance I have with the current Episodes screen). And also they take up less vertical space. Same for the tabs in Breez (which puts them in the top bar, which also saves a lot of space):

Conclusions from the hackathon discussion:

  • We think we should implement bottom navigation at some point. Because screens get bigger, because other apps are introducing it, and because Android 11 introduces swipe behaviour that doesn’t work well with our current side navigation.
  • However, it’s not a priority for the hackathon, and can be implemented separately from the Inbox, Home, etc
  • The setting that affects the side navigation, should also affect the bottom navigation:
    • Turning menu items/screens on/off should be consistent between the two navigation options
    • If we introduce reordering of menu items (though this, too, is a nice to have and not required for bottom navigation), this should also be persistent.
  • Bottom navigation should be an option, not forced (at least in the first year or so).
  • The jury is still out on whether or not to combine screens (e.g. All, Not played, Downloaded and Favourite Episodes). But as selected menu entries should be persistent between both navigation systems (side & bottom), the merging or separating of screens can be done independently.

I promised to make mock-ups both for a) the general bottom navigation, and for b) the second-level navigation/quick filtering for the episodes screen (tbc separately if implemented or not).

Problem is that there are a lot of screens, I think, regardless, we should combine screens where ever possible, to reduce complexity and the need to change screens that are very similar.

A few ideas on how to minimize screens:

  • integrate recently played into queue with a toolbar icon (replacing lock?) - as suggested by @keunes
  • do downloads and favourites through quickfilters in episodes
  • Discovery reachable from home (plus sign in the toolbar) or if no subscriptions

In general I don’t really like the bottom navigation as it takes up quite some of space, I think the real solution here is HOME from there you can navigate to basically all screens. Even more important is the customizability, there are different workflows and you done really need all screens, so you can customize home and just use the ones that best fit your use case (like for me I only need episodes and the queue, very simple).

As to wether or not the bottom navigation should be optional or the sidebar removed completely, I think both are not ideal solutions, I would hope for a innovative solution that can fit the same amount of items as the sidebar but is easy to research. But first step would be to do home and ideally alleviate the need for switching screens dramatically.

1 Like

Mock-ups & design draft shared in the GitHub issue: Common functions in bottom navigation bar? ¡ Issue #4376 ¡ AntennaPod/AntennaPod ¡ GitHub

Feedback most welcome here. This will most likely only be implemented after the switch from Material Design 2 to Material Design 3 has been made.

2 Likes

Looked at it quickly and seems really nice. I would take more time to look at it but right now I look forward to it. :smiley::+1:

Edit : just took more time and really like it. Especially the fact that user can chooser navigation items order. I don’t know any other app which allow you to do it but it’s nice to be able to.

1 Like

@keunes what about counters when using bottom navigation?

I guess there won’t be any? Should there be an option to display a badge counter over bottom items?

Maybe all screens for which there is a counter when using side navigation should display this number next to the screen title?

I think counters in the bottom navigation are very prominent. It would make sense for the inbox, but I don’t think there should be a permanent counter next to the queue, for example, that never goes away.

For the inbox it would be possible indeed. I opted for a tiny dot rather than displaying the number, but no strong opinion on that :slight_smile:

Love the design of the bottom nav bar!

1 Like

I can’t wait for this to be implemented! Where’s can I see the progress on the transition to material you?

It’s already merged, you can try the develop branch

1 Like

oooh, thanks! I just tried it on studio and its looking fantastic! I see the bottom navigation is still not implemented tho, or is there some setting I have to change?

1 Like