Tab Bar: What It Is, Tab Panel in Mobile Applications

What Is a Tab Bar?

A Tab Bar is a graphical interface element located at the bottom of the screen in a mobile application. It provides quick access to 3–5 main sections of the app. Each section is represented by an icon and a text label. The user taps a tab to switch to the corresponding section. The Tab Bar remains visible on all screens within each section, providing a constant entry point.

Apple recommends using a Tab Bar for sections of equal importance. The Human Interface Guidelines (2026) state: "The Tab Bar displays 3–5 tabs. If more are needed, the last tab becomes a "More" item containing the rest." Google Material Design (2026) recommends Bottom Navigation for the same purpose — 3–5 items, with the active tab highlighted by color and animation.

Unlike the Top Tab Bar, the bottom panel is more convenient for one-handed operation — the thumb naturally reaches the bottom of the screen. A Nielsen Norman Group study (2025) showed that bottom navigation reduces task completion time by 22% compared to top navigation on smartphones with a 6-inch or larger screen.

UITabBarController in iOS

UITabBarController is a built-in iOS controller for organizing navigation via tabs. Each tab manages its own set of screens, typically organized in a UINavigationController. UITabBarController automatically creates a Tab Bar at the bottom of the screen with a system translucent background and switching animation.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

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

        homeVC.tabBarItem = UITabBarItem(
            title: "Home",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "Search",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "Profile",
            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]
    }
}

Each tab in the example contains a UINavigationController, allowing stack navigation inside the section. The tabBarItem configures the icon, title, and badge. The system automatically applies the SF Symbols style for icons — standard Apple symbols with dynamic type and multicolor support.

BottomNavigationView in Android

BottomNavigationView is an Android component from the Material Design Library that implements the bottom navigation panel. In Android 13+, NavigationBarView is used — its successor with improved animation and adaptive behavior. BottomNavigationView follows the Material Design 3 (Material You) specification and supports app theming, dynamic colors, and switching animations.

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)

        // Binding BottomNavigation to NavController
        navView.setupWithNavController(navController)

        // Setting up a badge on the notifications tab
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

The BottomNavigationView component supports Material Design 3 with three styles: default (label + icon), labeled (larger label), and unlabeled (icon only). The setupWithNavController method binds the panel to the Navigation Component, automatically updating the active tab when the screen changes. Badges are created via getOrCreateBadge and support numeric and dot indicators.

Badges and Indicators on Tab Bar

Badges are numeric or dot indicators on tab icons, displaying the number of notifications, new messages, or tasks. On iOS, badges are set via the badgeValue property on UITabBarItem. On Android, badges are managed via BadgeDrawable (Material 3) or getOrCreateBadge in NavigationBarView.

Badges are a powerful engagement tool: Localytics research (2025) showed that apps with badges have 18% higher retention on day 7. However, overusing badges (more than 3 at a time) reduces CTR by 12%. Apple and Google recommend showing badges only for relevant notifications and clearing them when the section is opened.

Tab Bar Customization: Icons, Colors, Animations

Both platforms provide extensive Tab Bar customization options. On iOS, you can change the background color, active tab tint color, label font, and add custom icons via SF Symbols or custom assets. On Android, customization includes Material 3 styles, switching animation, ripple effect, and dynamic colors based on the wallpaper.

// Tab Bar Customization in 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.

On Android, BottomNavigationView customization is done via XML attributes or programmatically. Material 3 introduces the concept of dynamic colors: the color palette is generated from the user's wallpaper and automatically applied to components. The developer can override colors through the theme, set custom indicator animation, and configure the ripple effect.

// BottomNavigationView Customization in 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")
    )
}

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

Best Practices for Bottom Navigation

When designing a Tab Bar, it is important to follow platform recommendations and usability research. Apple HIG: no more than 5 tabs, concise text, semantic icons. Material Design: 3–5 items, active item highlighted, badge counter no more than 99. NN Group (2025): bottom navigation should remain visible on all screens of a section, otherwise the user loses context.

Common mistakes: 6+ tabs (forces the use of "More" — reduces discoverability), reordering tabs during navigation (disorients users), hiding the Tab Bar on nested screens (loss of navigation anchor). Best practices include a fixed order, consistent icons and text labels, badges only for user actions (not marketing).

• 3–5 tabs — optimal number for quick selection without overload
• Fixed order — tabs should be stable, without dynamic reordering
• Icon + label — both elements are required for understanding the section
• Active tab — should visually differ by color, icon, or animation
• Badges — use for notifications, clear when opening the section