Bottom Navigation: conceptos básicos, BottomNavigationView y TabView

¿Qué es Bottom Navigation?

Bottom Navigation es un patrón de navegación donde las secciones principales de la aplicación son accesibles mediante un panel en la parte inferior de la pantalla. Este patrón se ha convertido en un estándar del diseño móvil gracias a su facilidad de uso con una sola mano. A diferencia de un menú lateral (Drawer), Bottom Navigation siempre está visible y no requiere gestos adicionales para abrirse.

Material Design 3 (2026) define la Navigation Bar como un componente con tres estados: default (icono + etiqueta), labeled (etiqueta ampliada, una pestaña activa) y unlabeled (solo iconos). Google recomienda Navigation Bar para aplicaciones con 3–5 secciones equivalentes. Para 6+ secciones — Navigation Drawer. En iOS SwiftUI, TabView utiliza automáticamente un panel inferior con estilo del sistema.

Un estudio de UX Movement (2025) mostró que Bottom Navigation mejora el tiempo de finalización de tareas en un 27% en comparación con un menú deslizante, ya que el usuario ve todas las secciones disponibles sin acciones adicionales. El número de toques incorrectos se reduce en un 34% gracias a los grandes objetivos táctiles (mínimo 48x48 dp en Android, 44x44 pt en iOS).

BottomNavigationView en Android (Material 3)

BottomNavigationView en Android es un componente de Material 3 Library (com.google.android.material.navigation.NavigationBarView). Reemplazó el antiguo BottomNavigationView de Material 2 y añadió soporte para colores dinámicos de Material You, indicador animado de pestaña activa y distintivos integrados. El componente se configura mediante un menú XML y es totalmente compatible con Navigation Component.

// Actividad con BottomNavigationView y 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)

        // Sincronización automática de navegación
        navView.setupWithNavController(navController)

        // Configuración del distintivo
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// Menú 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="Inicio" />
//   <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 soporta tres modos labelVisibilityMode: LABEL_VISIBILITY_AUTO (por defecto — la etiqueta se muestra para la pestaña activa), LABEL_VISIBILITY_LABELED (etiquetas para todas), LABEL_VISIBILITY_UNLABELED (solo iconos). El indicador animado de pestaña activa se configura mediante itemActiveIndicatorStyle con un efecto ripple personalizado.

TabView en SwiftUI para iOS

TabView es un contenedor integrado de SwiftUI para crear navegación inferior. Cada pestaña se define mediante el modificador .tabItem con un icono y texto. TabView crea automáticamente un UITabBarController internamente y soporta todas las funciones nativas del panel: distintivos, color de distintivo, animación de cambio y adaptación a Dynamic Type.

import SwiftUI

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

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

            NotificationsView()
                .tabItem {
                    Label("Notificaciones", systemImage: "bell.fill")
                }
                .badge("12")

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

TabView soporta el modificador .badge (iOS 15+), que acepta Int (distintivo numérico) o String (distintivo de texto). El color del distintivo se puede cambiar mediante .badgeProminence(.increased) — hace que el distintivo sea más brillante. La animación de cambio de pestañas se configura mediante .tabViewStyle(.automatic) o estilos personalizados. Para el control programático de cambio se utiliza @State con selection.

Combinación de navegación inferior y apilada

Bottom Navigation rara vez se usa sola — cada pestaña suele contener un navegador apilado (NavigationView/NavigationStack en SwiftUI, NavHostFragment en Android). Esta combinación ofrece al usuario tanto acceso rápido a las secciones (Tab) como navegación profunda dentro de cada sección (Stack). Esta es la arquitectura estándar para aplicaciones de producción.

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

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

// Dentro de HomeView — navegación apilada
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)
        }
    }
}

En Android, la misma combinación se implementa mediante NavHostFragment para cada pestaña. Navigation Component automatiza la creación de la pila de retroceso para cada pestaña: al cambiar de pestaña, el estado de la pila se conserva, y al regresar — se restaura. Esto proporciona una experiencia de usuario fluida, como en las aplicaciones del sistema de Google (Play Market, YouTube).

Material 3: colores dinámicos y animaciones

Material 3 (Material You) introduce un cambio clave en Bottom Navigation — colores dinámicos generados a partir del fondo de pantalla del usuario. El sistema extrae los colores dominantes del fondo de pantalla y crea una paleta de 5 tonos clave. NavigationBarView aplica automáticamente estos colores: la pestaña activa recibe el color primario, las inactivas — la variante onSurface.

La animación del indicador de pestaña activa se ha vuelto fluida: al cambiar, el indicador se anima hacia la nueva pestaña con interpolación. El efecto ripple al tacto utiliza el color secundario. Bottom Navigation en Material 3 también soporta animaciones personalizadas mediante itemActiveIndicatorStyle — el desarrollador puede definir la forma (óvalo, rectángulo), los márgenes y el color del indicador.

<!-- Estilo del indicador activo de 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>

Recomendaciones UX para Bottom Navigation

Al diseñar Bottom Navigation, se debe considerar la investigación de usabilidad. NN Group (2026): el panel inferior debe tener al menos 56 dp de altura, los objetivos táctiles — al menos 48 dp. El texto de las etiquetas — máximo 12 caracteres (latín) o 8 caracteres (cirílico). La pestaña activa debe diferenciarse no solo por el color sino también por el estado del icono (relleno vs contorno).

Material Design 3 recomienda los siguientes patrones: 4 pestañas — óptimo para un escaneo fácil; un icono "+" en el centro (FloatingActionButton) — para la acción principal; distintivos — solo para contadores de acciones del usuario. Evitar: usar Bottom Navigation con 2 pestañas (mejor usar Tab Layout), cambiar el orden de las pestañas dinámicamente, ocultar el panel en pantallas anidadas.

• Altura — mínimo 56 dp para un alcance cómodo del pulgar
• Contraste — la pestaña activa debe ser distinguible (color + relleno del icono)
• Etiquetas — cortas, 1-2 palabras, sin truncamiento (no más de 12 caracteres)
• Orden — fijo, de más importante a menos importante
• Contadores — solo para notificaciones del usuario, no para marketing