Bottom Navigation: fundamentos, BottomNavigationView e TabView

O que é Bottom Navigation?

Bottom Navigation é um padrão de navegação onde as seções principais do aplicativo são acessíveis através de um painel na parte inferior da tela. Este padrão se tornou um padrão de design mobile devido à sua facilidade de uso com uma mão. Ao contrário de um menu lateral (Drawer), o Bottom Navigation está sempre visível e não requer gestos adicionais para abrir.

Material Design 3 (2026) define a Navigation Bar como um componente com três estados: default (ícone + rótulo), labeled (rótulo ampliado, uma aba ativa) e unlabeled (apenas ícones). O Google recomenda a Navigation Bar para aplicativos com 3–5 seções equivalentes. Para 6+ seções — Navigation Drawer. No iOS SwiftUI, o TabView usa automaticamente um painel inferior com estilo do sistema.

Um estudo da UX Movement (2025) mostrou que o Bottom Navigation melhora o tempo de conclusão de tarefas em 27% em comparação com um menu deslizante, pois o usuário vê todas as seções disponíveis sem ações adicionais. O número de toques incorretos diminui em 34% graças aos grandes alvos de toque (mínimo 48x48 dp no Android, 44x44 pt no iOS).

BottomNavigationView no Android (Material 3)

BottomNavigationView no Android é um componente da Material 3 Library (com.google.android.material.navigation.NavigationBarView). Ele substituiu o antigo BottomNavigationView do Material 2 e adicionou suporte a cores dinâmicas do Material You, indicador animado de aba ativa e badges embutidos. O componente é configurado através de um menu XML e é totalmente compatível com o Navigation Component.

// Atividade com BottomNavigationView e NavHostFragment
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navView = findViewById<NavigationBarView>(R.id.nav_view)
        val navController = findNavController(R.id.nav_host_fragment)

        // Sincronização automática de navegação
        navView.setupWithNavController(navController)

        // Configuração do badge
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// Menu XML para Bottom Navigation (res/menu/bottom_nav_menu.xml)
// <?xml version="1.0" encoding="utf-8"?>
// <menu xmlns:android="http://schemas.android.com/apk/res/android">
//   <item android:id="@+id/navigation_home"
//     android:icon="@drawable/ic_home"
//     android:title="Início" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Chats" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Perfil" />
// </menu>

Material 3 NavigationBarView suporta três modos labelVisibilityMode: LABEL_VISIBILITY_AUTO (padrão — o rótulo é mostrado para a aba ativa), LABEL_VISIBILITY_LABELED (rótulos para todos), LABEL_VISIBILITY_UNLABELED (apenas ícones). O indicador animado de aba ativa é configurado através de itemActiveIndicatorStyle com um efeito ripple personalizado.

TabView no SwiftUI para iOS

TabView é um contêiner embutido do SwiftUI para criar navegação inferior. Cada aba é definida usando o modificador .tabItem com um ícone e texto. O TabView cria automaticamente um UITabBarController internamente e suporta todos os recursos nativos do painel: badges, cor do badge, animação de alternância e adaptação ao Dynamic Type.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("Início", systemImage: "house.fill")
                }
                .badge(3)

            SearchView()
                .tabItem {
                    Label("Pesquisar", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("Notificações", systemImage: "bell.fill")
                }
                .badge("12")

            ProfileView()
                .tabItem {
                    Label("Perfil", systemImage: "person.circle.fill")
                }
        }
    }
}

TabView suporta o modificador .badge (iOS 15+), que aceita Int (badge numérico) ou String (badge de texto). A cor do badge pode ser alterada através de .badgeProminence(.increased) — torna o badge mais brilhante. A animação de alternância de abas é configurada através de .tabViewStyle(.automatic) ou estilos personalizados. Para controle programático de alternância, @State com selection é usado.

Combinação de navegação inferior e em pilha

Bottom Navigation raramente é usado sozinho — cada aba geralmente contém um navegador de pilha (NavigationView/NavigationStack no SwiftUI, NavHostFragment no Android). Esta combinação oferece ao usuário tanto acesso rápido às seções (Tab) quanto navegação profunda dentro de cada seção (Stack). Esta é a arquitetura padrão para aplicativos de produção.

struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
            }
            .tabItem {
                Label("Início", systemImage: "house")
            }

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("Pesquisar", systemImage: "magnifyingglass")
            }
        }
    }
}

// Dentro de HomeView — navegação em pilha
struct HomeView: View {
    var body: some View {
        List(items) { item in
            NavigationLink("\(item.title)", value: item)
        }
        .navigationDestination(for: Item.self) { item in
            ItemDetailView(item: item)
        }
    }
}

No Android, a mesma combinação é implementada através de NavHostFragment para cada aba. O Navigation Component automatiza a criação da pilha de retorno para cada aba: ao alternar abas, o estado da pilha é preservado, e ao retornar — é restaurado. Isso proporciona uma UX perfeita, como nos aplicativos do sistema Google (Play Market, YouTube).

Material 3: cores dinâmicas e animações

Material 3 (Material You) introduz uma mudança chave no Bottom Navigation — cores dinâmicas geradas a partir do papel de parede do usuário. O sistema extrai as cores dominantes do papel de parede e cria uma paleta de 5 tons chave. O NavigationBarView aplica automaticamente estas cores: a aba ativa recebe a cor primária, as inativas — a variante onSurface.

A animação do indicador de aba ativa tornou-se suave: ao alternar, o indicador anima-se em direção à nova aba com interpolação. O efeito ripple ao toque usa a cor secundária. Bottom Navigation no Material 3 também suporta animações personalizadas através de itemActiveIndicatorStyle — o desenvolvedor pode definir a forma (oval, retângulo), margens e cor do indicador.

<!-- Estilo do indicador ativo do NavigationBarView -->
<style name="Widget.MyApp.NavigationBarView.ActiveIndicator"
    parent="Widget.Material3.NavigationBarView.ActiveIndicator">
    <item name="android:height">32dp</item>
    <item name="android:width">64dp</item>
    <item name="android:marginHorizontal">8dp</item>
    <item name="shapeAppearance">
        @style/ShapeAppearance.Material3.Corner.Full
    </item>
    <item name="color">@color/primary_container</item>
</style>

Recomendações UX para Bottom Navigation

Ao projetar Bottom Navigation, a pesquisa de usabilidade deve ser considerada. NN Group (2026): o painel inferior deve ter pelo menos 56 dp de altura, os alvos de toque — pelo menos 48 dp. O texto dos rótulos — máximo 12 caracteres (latim) ou 8 caracteres (cirílico). A aba ativa deve diferir não apenas na cor, mas também no estado do ícone (preenchido vs contorno).

Material Design 3 recomenda os seguintes padrões: 4 abas — ideal para fácil varredura; um ícone "+" no centro (FloatingActionButton) — para a ação principal; badges — apenas para contadores de ações do usuário. Evitar: usar Bottom Navigation com 2 abas (use Tab Layout em vez disso), alterar a ordem das abas dinamicamente, ocultar o painel em telas aninhadas.

• Altura — mínimo 56 dp para alcance confortável do polegar
• Contraste — a aba ativa deve ser distinguível (cor + preenchimento do ícone)
• Rótulos — curtos, 1-2 palavras, sem truncamento (não mais que 12 caracteres)
• Ordem — fixa, do mais importante ao menos importante
• Contadores — apenas para notificações do usuário, não para marketing