# UI Pattern Evolution -- FAB-in-Bottom-Nav

DevFeed: [UI Pattern Evolution -- FAB-in-Bottom-Nav](<https://devfeed.tech/articles/ui-pattern-evolution-fab-in-bottom-nav-22709.md>)

Original publisher: [Read original article](<https://medium.com/android-ui-patterns/ui-pattern-evolution-fab-in-bottom-nav-6aaa34b9cc59?source=rss----75dfb6474397---4>)

Author: Juhani Lehtimäki

Published: 2018-01-10T14:19:30Z

Content type: opinion

Language: en

Sources: [Android UI Patterns - Medium](<https://devfeed.tech/sources/android-ui-patterns-medium.md>)

Topics: [ui](<https://devfeed.tech/topics/ui.md>), [navigation](<https://devfeed.tech/topics/navigation.md>), [Material Design](<https://devfeed.tech/topics/material-design.md>), [Android](<https://devfeed.tech/topics/android.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [bottom-navigation](<https://devfeed.tech/tags/bottom-navigation.md>), [design](<https://devfeed.tech/tags/design.md>), [design-patterns](<https://devfeed.tech/tags/design-patterns.md>), [material-design](<https://devfeed.tech/tags/material-design.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ux](<https://devfeed.tech/tags/ux.md>)

## AI overview

This article discusses how established Android UI patterns evolve, focusing on placing a floating action button in a bottom navigation bar. It explains the intended roles of FABs and bottom navigation, the rationale for making a persistent action accessible across top-level screens, and the tension between navigation and action elements. The supplied text ends mid-sentence, so the discussion of anti-patterns is incomplete.

## Source excerpt

I've been writing about Android UI Patterns now for nearly 10 years. In the Android ecosystem existing patterns evolve and new patterns emerge from the work designers and developers do on the platform. Established pattern evolution is one of the most fascinating things to follow for couple of reasons: It points out that design patterns are not design rules. Patterns are solutions to problems. Solutions are not absolute. You are free to think what you can do with an established pattern to better solve your specific issue. You don't need to stop where the Material Design Guidelines end. However, to break the rules you should know the rules. Break them when you have a reason to. A designer proposing an alternative to an established pattern should be able to answer the question "why?". So before you decide to throw out the conventional FAB, take a look at what the FAB actually is and where it's meant to be used. FAB in Bottom Navigation FAB is the main action on the current screen. The default positioning to the bottom right enforces this thinking with users. But what if you have an action that you want to be reachable from anywhere from your top level screens? One option would be to repeat the button on each screen. In these cases you should make sure to keep the FAB constantly visible to indicate that it has not changed. But there's another option. Place the FAB on the bottom navigation bar. The bottom navigation pattern is also very well defined in the Material Design guidelines. It's worth taking a look before diving in. The bottom navigation is used to navigate between your top-level content. Your main action might logically feel to be on the same level than the other top-level content. However, making one of the navigation items an action does not feel right. All content accessible from the bottom navigation should be on the same level in your app hierarchy. FAB is already a well-established pattern and users can be expected to understand it. FAB triggers an actio