Tab Bar: qué es, panel de pestañas en aplicaciones móviles

¿Qué es un Tab Bar?

Un Tab Bar (barra de pestañas) es un elemento de interfaz gráfica ubicado en la parte inferior de la pantalla de una aplicación móvil. Proporciona acceso rápido a 3–5 secciones principales de la aplicación. Cada sección está representada por un icono y una etiqueta de texto. El usuario toca una pestaña para cambiar a la sección correspondiente. La Tab Bar permanece visible en todas las pantallas dentro de cada sección, proporcionando un punto de entrada constante.

Apple recomienda usar una Tab Bar para secciones de igual importancia. Las Directrices de Interfaz Humana (2026) indican: «La Tab Bar muestra de 3 a 5 pestañas. Si se necesitan más, la última pestaña se convierte en un elemento «Más» que contiene el resto». Material Design de Google (2026) recomienda Bottom Navigation para el mismo propósito: de 3 a 5 elementos, con la pestaña activa resaltada por color y animación.

A diferencia de la barra de pestañas superior, el panel inferior es más cómodo para operar con una sola mano: el pulgar llega naturalmente a la parte inferior de la pantalla. Un estudio del Nielsen Norman Group (2025) mostró que la navegación inferior reduce el tiempo de finalización de tareas en un 22% en comparación con la navegación superior en teléfonos inteligentes con pantalla de 6 pulgadas o más.

UITabBarController en iOS

UITabBarController es un controlador integrado de iOS para organizar la navegación mediante pestañas. Cada pestaña gestiona su propio conjunto de pantallas, normalmente organizadas en un UINavigationController. UITabBarController crea automáticamente una Tab Bar en la parte inferior de la pantalla con un fondo translúcido del sistema y animación de cambio.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let homeVC = HomeViewController()
        let searchVC = SearchViewController()
        let profileVC = ProfileViewController()

        homeVC.tabBarItem = UITabBarItem(
            title: "Inicio",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Buscar",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "Perfil",
            image: UIImage(systemName: "person.circle.fill"),
            tag: 2
        )

        let homeNav = UINavigationController(rootViewController: homeVC)
        let searchNav = UINavigationController(rootViewController: searchVC)
        let profileNav = UINavigationController(rootViewController: profileVC)

        viewControllers = [homeNav, searchNav, profileNav]
    }
}

Cada pestaña del ejemplo contiene un UINavigationController, lo que permite la navegación por pila dentro de la sección. El tabBarItem configura el icono, el título y el badge. El sistema aplica automáticamente el estilo SF Symbols para los iconos, símbolos estándar de Apple con soporte de tipo dinámico y multicolor.

BottomNavigationView en Android

BottomNavigationView es un componente de Android de Material Design Library que implementa el panel de navegación inferior. En Android 13+ se utiliza NavigationBarView, su sucesor con animación mejorada y comportamiento adaptativo. BottomNavigationView sigue la especificación Material Design 3 (Material You) y admite temas de aplicación, colores dinámicos y animaciones de cambio.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val navView: NavigationBarView = binding.navView
        val navController = findNavController(R.id.nav_host_fragment)

        // Vinculación de BottomNavigation con NavController
        navView.setupWithNavController(navController)

        // Configuración de un badge en la pestaña de notificaciones
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

El componente BottomNavigationView admite Material Design 3 con tres estilos: default (etiqueta + icono), labeled (etiqueta más grande) y unlabeled (solo icono). El método setupWithNavController vincula el panel con el Navigation Component, actualizando automáticamente la pestaña activa al cambiar de pantalla. Los badges se crean mediante getOrCreateBadge y admiten indicadores numéricos y de punto.

Badges e Indicadores en Tab Bar

Los Badges son indicadores numéricos o de punto en los iconos de las pestañas, que muestran la cantidad de notificaciones, mensajes nuevos o tareas. En iOS, el badge se establece mediante la propiedad badgeValue en UITabBarItem. En Android, los badges se gestionan mediante BadgeDrawable (Material 3) o getOrCreateBadge en NavigationBarView.

Los badges son una poderosa herramienta de participación: la investigación de Localytics (2025) mostró que las aplicaciones con badges tienen una retención un 18% mayor en el día 7. Sin embargo, el uso excesivo de badges (más de 3 a la vez) reduce el CTR en un 12%. Apple y Google recomiendan mostrar badges solo para notificaciones relevantes y borrarlos al abrir la sección.

Personalización del Tab Bar: Iconos, Colores, Animaciones

Ambas plataformas ofrecen amplias opciones de personalización del Tab Bar. En iOS, se puede cambiar el color de fondo, el color tint de la pestaña activa, la fuente de la etiqueta y añadir iconos personalizados mediante SF Symbols o assets propios. En Android, la personalización incluye estilos de Material 3, animación de cambio, efecto ripple y colores dinámicos basados en el fondo de pantalla.

// Personalización del Tab Bar en iOS
let appearance = UITabBarAppearance()
appearance.backgroundColor = .systemBackground
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
    .foregroundColor: UIColor.secondaryLabel,
    .font: UIFont.systemFont(ofSize: 11)
]
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
    .foregroundColor: UIColor.systemBlue,
    .font: UIFont.boldSystemFont(ofSize: 12)
]
tabBar.standardAppearance = appearance.

En Android, la personalización de BottomNavigationView se realiza mediante atributos XML o mediante programación. Material 3 introduce el concepto de colores dinámicos: la paleta de colores se genera a partir del fondo de pantalla del usuario y se aplica automáticamente a los componentes. El desarrollador puede sobrescribir los colores a través del tema, establecer una animación de indicador personalizada y configurar el efecto ripple.

// Personalización de BottomNavigationView en Android
val navView = findViewById<NavigationBarView>(R.id.nav_view)

with (navView) {
    labelVisibilityMode = NavigationBarView.LABEL_VISIBILITY_LABELED
    itemActiveIndicatorStyle = R.style.CustomIndicator
    itemRippleColor = ColorStateList.valueOf(
        Color.valueOf("#FFE0B2")
    )
}

// En XML: app:menu="@menu/bottom_nav_menu"
// En XML: app:itemActiveIndicatorStyle="@style/Widget.Material3.BottomNavigationView.ActiveIndicator"

Mejores Prácticas de Navegación Inferior

Al diseñar un Tab Bar, es importante seguir las recomendaciones de la plataforma y las investigaciones de usabilidad. Apple HIG: no más de 5 pestañas, texto conciso, iconos semánticos. Material Design: de 3 a 5 elementos, elemento activo resaltado, contador de badge no superior a 99. NN Group (2025): la navegación inferior debe permanecer visible en todas las pantallas de una sección, de lo contrario el usuario pierde el contexto.

Errores comunes: 6 o más pestañas (obliga a usar «Más» — reduce la descubribilidad), cambiar el orden de las pestañas durante la navegación (desorienta al usuario), ocultar la Tab Bar en pantallas anidadas (pérdida del anclaje de navegación). Las mejores prácticas incluyen un orden fijo, iconos y etiquetas de texto consistentes, badges solo para acciones del usuario (no para marketing).

• 3–5 pestañas — número óptimo para selección rápida sin sobrecarga
• Orden fijo — las pestañas deben ser estables, sin reordenación dinámica
• Icono + etiqueta — ambos elementos son necesarios para entender la sección
• Pestaña activa — debe diferenciarse visualmente por color, icono o animación
• Badges — usar para notificaciones, borrar al abrir la sección