BottomNavigationView display both icons and text labels at all times

The Android BottomNavigationView is a fundamental component for modern mobile applications, offering a persistent and easily accessible navigation scheme at the bottom of the screen. However, a common challenge developers and designers face is its default behavior, which often hides text labels for inactive items, leading to a less intuitive user experience. Many applications require the BottomNavigationView display both icons and text labels at all times to ensure maximum clarity and accessibility. This article will delve into why this behavior occurs and, more importantly, provide a comprehensive guide on how to configure your BottomNavigationView to consistently show both icons and text labels, enhancing usability across your app.

Understanding BottomNavigationView’s Default Behavior

By default, the BottomNavigationView in Android Material Design components is designed with a “shifting” behavior, especially when it contains more than three items. In this shifting mode, only the selected item displays both its icon and text label, while unselected items show only their icons. If the navigation view has three or fewer items, it typically defaults to a “fixed” behavior where all items display both icons and labels. This design choice is rooted in an effort to save screen real estate and reduce visual clutter, adhering to certain Material Design guidelines for mobile navigation.

The key property controlling this behavior is labelVisibilityMode. This attribute dictates how the text labels are displayed for the items within the BottomNavigationView. Understanding its various states — auto, selected, labeled, and unlabeled — is crucial for customizing your navigation. The auto mode is the default, which intelligently switches between shifting (for 4+ items) and fixed (for 3 or fewer items) behavior. While this can be efficient, it often clashes with the desire for persistent labels that remain visible regardless of selection state or item count.

For many applications, particularly those with a complex information architecture or a user base that benefits from explicit labels, relying on icons alone can lead to confusion. Research consistently shows that combining icons with descriptive text labels significantly improves comprehension and reduces cognitive load, especially for users who might not be familiar with standard iconographic representations. Therefore, overriding the default shifting mode to ensure BottomNavigationView display both icons and text labels at all times becomes a critical user experience consideration.

Why Displaying Both Icons and Text Labels is Crucial for UX

Ensuring that the BottomNavigationView display both icons and text labels at all times is not merely a stylistic choice; it’s a fundamental aspect of good user experience (UX) and accessibility. Text labels provide explicit meaning, removing ambiguity that icons alone might introduce. For instance, a “heart” icon could mean “favorites,” “likes,” or “health,” depending on the app’s context. A clear label eliminates this guesswork, making navigation intuitive and reducing user frustration. This is particularly vital for users with cognitive disabilities or those who are new to the application.

From an accessibility standpoint, persistent labels are indispensable. Screen readers can easily interpret text labels, providing a more comprehensive and accessible experience for visually impaired users. Relying solely on icons can create barriers, as screen reader descriptions of icons might not always convey the intended meaning accurately. By consistently showing both icons and labels, you inherently build a more inclusive application. According to a study published by Nielsen Norman Group, using both icons and text labels together leads to faster recognition and fewer errors for users navigating interfaces, reinforcing the value of explicit labeling.

Moreover, consistent labeling contributes to a more predictable and trustworthy interface. When users know exactly what each navigation item represents without needing to tap or guess, their confidence in the app increases. This predictability fosters a smoother user journey, reducing the learning curve and improving overall user satisfaction. The fixed mode behavior, where all items are labeled, is often the preferred choice for applications prioritizing clarity and ease of use over minimalistic aesthetics, especially when dealing with a limited number of primary navigation destinations. This approach aligns with Android development best practices for creating intuitive interfaces.

Implementing Persistent Labels: Step-by-Step Guide

To ensure your BottomNavigationView display both icons and text labels at all times, you need to explicitly set its labelVisibilityMode property. This overrides the default “auto” behavior, forcing all items to show their labels regardless of how many items are present or which item is selected. This straightforward modification is a powerful way to enhance clarity and user understanding within your application’s Android navigation bar.

The simplest and most recommended way to achieve persistent labels is by modifying your layout XML. By setting app:labelVisibilityMode=“labeled” directly in your BottomNavigationView declaration, you instruct the component to always display the text associated with each navigation item. This approach is declarative and easy to maintain, ensuring consistency across your UI. For dynamic adjustments or specific scenarios, you can also set this property programmatically in your Kotlin or Java code, though the XML method is usually sufficient for most use cases requiring fixed mode labels.

XML Configuration for Persistent Labels

Open your layout file (e.g., activity_main.xml or fragment_main.xml) where your BottomNavigationView is declared. Add or modify the app:labelVisibilityMode attribute:

<com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" app:menu="@menu/bottom_nav_menu" app:labelVisibilityMode="labeled" /> 

Programmatic Approach (Kotlin/Java)

While less common for this specific requirement, you can also set the visibility mode programmatically in your Activity or Fragment:

1. First, get a reference to your BottomNavigationView in your onCreate or onCreateView method.
2. Then, set the itemLabelVisibilityMode property to BottomNavigationView.ITEM_LABEL_VISIBILITY_LABELED.

// Kotlin val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottom_navigation) bottomNavigationView.labelVisibilityMode = BottomNavigationView.LABEL_VISIBILITY_LABELED // Java BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation); bottomNavigationView.setLabelVisibilityMode(BottomNavigationView.LABEL_VISIBILITY_LABELED); 

Common Pitfalls and Troubleshooting

One common issue arises if you are using an older version of the Material Components library. Ensure your build.gradle (Module: app) includes a recent version of the Material Components library (e.g., implementation ‘com.google.android.material:material:1.x.x’). Older versions might not support labelVisibilityMode or behave differently. Always check the official Android Developers documentation for BottomNavigationView for the latest recommendations and API changes. Another consideration is the length of your labels; excessively long Question & Answer :

I am using android.support.design.widget.BottomNavigationView from design support library version 25

compile 'com.android.support:design:25.0.0' <android.support.design.widget.BottomNavigationView android:id="@+id/bottomBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_gravity="center" app:itemBackground="@color/colorPrimary" app:menu="@menu/bottom_navigation_main" android:forceHasOverlappingRendering="true"/> 

When there are only three actions in @menu/bottom_navigation_main, it displays both icons and text labels at all times.

What is the way to display both icons and text labels at all the time when there are more than three actions.

For anyone still looking for a solution and doesn’t want to rely on third party libraries or runtime reflection, BottomNavigationView in Support Library 28/Jetpack natively supports always having text label.

This is the method you’re looking for.

Or in XML, app:labelVisibilityMode="labeled"