Set App Bar to bottom for Mobile

[iantrich]

Add an option to the user profile page that dictates the placement of the app bar: top/bottom

Considerations: If the app bar is placed at the bottom; fab buttons, toasts and dialogs should not overlap.

Spec: https://material.io/components/app-bars-bottom/

[iantrich]

Or maybe just leave this to custom-header...?

[Aasikki]

This needs more attention. Having the tabs at top for mobile is almost a ux crime at this point. There are workarounds like themes but these can break on updates as demonstrated by the 2023.4 update. Having something as important as a core ui element break is not fun and having official support would help a lot with that! Heck it would probably even save a couple phones from dropping and breaking too, from trying to stretch to reach the buttons at the top.

[MatzeG1t]

I agree this should be paid attention too since its even breaking with the material guidelines as I understand them.
https://m2.material.io/components/tabs#usage
https://m3.material.io/components/top-app-bar/guidelines

So tabs could be below the top bar or as @iantrich suggested at the bottom. Many android apps adapt to this "previsouly" iOS only pattern . e.g. Google Photos, TV, Search, Fit, LinkedIn, Medium etc pp

[pasphi]

I agree to the feature request. Please add functionality for having the navigationbar for the views in the dashboard on the bottom on mobile

[marcinbauer85]

Navigation is something we're experimenting with to redesign (hence also the recent card sorting settings test on Reddit). We know that top-tabs aren't the best solution for changing views, especially when you have more than 4-5. Moving them to the second line under the app bar won't really make a difference and will take valuable vertical space.
If you have any original ideas or examples of apps that have a layered navigation please share them.

[Aasikki]

Navigation is something we're experimenting with to redesign (hence also the recent card sorting settings test on Reddit). We know that top-tabs aren't the best solution for changing views, especially when you have more than 4-5. Moving them to the second line under the app bar won't really make a difference and will take valuable vertical space. If you have any original ideas or examples of apps that have a layered navigation please share them.

This material you theme had a pretty well implemented bottom navigation, check it out.
https://github.com/Nerwyn/material-you-theme

I do agree that tabs aren't ideal when you have lots of views so maybe the best option would be to have tabs similar to the material you theme, but also have some kind of overflow menu when you have too many views. Something like this bottom sheet could work https://m3.material.io/components/bottom-sheets/overview just need to figure out when to place the button to open it (and maybe open it by swiping up from the navigation bar).

That said, just moving the navigation bar to the bottom would already be a big improvement for mobile usability, even without any further changes. So maybe consider starting with that and then you can improve on it later :)

[pasphi]

The following is based on the assumption that the navigation bar is moved to the bottom.

see attachments
1: standard interface as up until now but navigation bar is on the bottom. number of views (icons) do fit into the width of the screen - no problem
2: more icons than the width of the screen. two arrows are indicating that by touching an icon and dragging the finger left/right, the icons will move to show more views that are hidden. similar to a side scroll. some kind of momentum based scrolling would make sense here
3: less desirable from a UI perspective in my opinion. only the current view icon is shown. the rest are hidden behind a pop-up menu that can be opened by the "arrow" up. A list of views appears as shown in the picture. the menu can be closed by either clicking anywhere else but the menu or on the "arrow down" on the top of the menu bar or the "arrow up" in the view bar. If the number of views in the menu exceed the screens height, a scrolling feature can be implemented as well.