Enhancing Android Bottom NavigationView with Custom Disabled Items

Introduction

In the dynamic landscape of Android app development, user interface plays a pivotal role in shaping the overall user experience. The BottomNavigationView has become a staple for navigation in Android applications, providing a sleek and intuitive way for users to switch between different sections of an app.

However, as developers, we often encounter scenarios where certain navigation options need to be temporarily disabled. The default appearance of disabled items might not always align with the app’s design language, and this is where customisation becomes crucial. In this article, we’ll delve into the process of enhancing the Android BottomNavigationView by creating a visually distinct and customisable representation for disabled items.

We will cover everything from setting up a new Android project to designing a custom layout for disabled items and integrating it seamlessly into the BottomNavigationView. By the end of this journey, you'll not only have a well-rounded understanding of the implementation process but also gain insights into the significance of UI customisation in delivering a polished and user-friendly app.

So, let’s embark on this exploration of elevating the user experience through thoughtful customisation of the BottomNavigationView.

Setting Up the Project

1. Create a New Android Project

• Use Android Studio to create a new project.

<!-- app/build.gradle -->
android {
    // ... other configurations
    defaultConfig {
        // ... other configurations
        vectorDrawables.useSupportLibrary = true
    }
}

1. Implementing BottomNavigationView

• Add the BottomNavigationView widget to the layout.
• Create menu items in the XML file for the navigation items.

<!-- res/layout/activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- Your other layout components -->

    <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_navigation_menu"/>
</RelativeLayout>ode

<!-- res/menu/bottom_navigation_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_item1"
        android:title="Item 1"
        android:icon="@drawable/ic_item1" />

    <!-- Add other menu items here -->

    <item
        android:id="@+id/menu_item_id_to_disable"
        android:title="Disabled Item"
        android:icon="@drawable/ic_disabled_item" />
</menu>

These snippets set up the foundation of our Android project and introduce the BottomNavigationView along with its menu items. In the next sections, we'll explore how to make a menu item disabled and create a custom layout for it.

Making a Menu Item Disabled

1. Find the Menu Item

• Use the findItem() method to get a reference to the desired menu item.

// MainActivity.java
import android.os.Bundle;
import androidx.annotation.NonNull;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import androidx.appcompat.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation);
        Menu menu = bottomNavigationView.getMenu();
        // Disable a specific menu item by ID
        MenuItem menuItem = menu.findItem(R.id.menu_item_id_to_disable);
        menuItem.setEnabled(false);
    }
}

These code snippets demonstrate how to find a specific menu item by its ID and disable it. The next sections will cover creating a custom layout for the disabled item and integrating it into the BottomNavigationView.

Creating a Custom Layout for Disabled Item

1. Design a Custom Layout

• Create a new XML layout file for the disabled item (e.g., layout_disabled_item.xml).
• Use a TextView with a drawable on top for customisation.

<!-- res/layout/layout_disabled_item.xml -->
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Disabled Item"
    android:drawableTop="@drawable/ic_disabled_item"
    android:gravity="center"
    style="@style/DisabledBottomNavigationItem" />

1. Define Styles for Disabled Bottom Navigation Items

• Create a style in the styles.xml file to customize the appearance of disabled items.

<!-- res/values/styles.xml -->
<style name="DisabledBottomNavigationItem">
    <!-- Customize the style properties for disabled items -->
    <item name="android:textColor">@color/disabledTextColor</item>
    <item name="android:background">@drawable/disabledBackground</item>
    <!-- Add other style properties as needed -->
</style>

These code snippets illustrate the process of creating a custom layout for the disabled item, incorporating a TextView with a drawable on top, and defining styles to customize the appearance. The next sections will cover how to integrate this custom layout with the disabled item in the BottomNavigationView.

Integrating Custom Layout with Disabled Item

1. Set Custom Layout for Disabled Item

• Use setActionView() to set the custom layout for the disabled item.

// MainActivity.java
import android.os.Bundle;
import androidx.annotation.NonNull;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import androidx.appcompat.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation);
        Menu menu = bottomNavigationView.getMenu();
        // Disable a specific menu item by ID
        MenuItem menuItem = menu.findItem(R.id.menu_item_id_to_disable);
        menuItem.setEnabled(false);
        // Set a custom layout for the disabled item
        menuItem.setActionView(R.layout.layout_disabled_item);
    }
}

1. Define Styles for Disabled Bottom Navigation Items

• Customize text color, background, and other style properties.

<!-- res/values/styles.xml -->
<style name="DisabledBottomNavigationItem">
    <!-- Customize the style properties for disabled items -->
    <item name="android:textColor">@color/disabledTextColor</item>
    <item name="android:background">@drawable/disabledBackground</item>
    <!-- Add other style properties as needed -->
</style>

These code snippets illustrate the process of setting a custom layout for the disabled item using setActionView() and defining styles for disabled bottom navigation items.

Run you code….and you’ll get the desired results!

Final Thoughts: Elevate Your App’s Navigation Experience!

Congratulations on successfully enhancing your Android app’s navigation with a customized BottomNavigationView! By now, you've not only mastered the art of making navigation more intuitive but also added a touch of uniqueness to your app's design.

If you found this guide valuable, don’t forget to explore more insights and tutorials on my Medium channel. Your feedback and questions are always welcome, fostering a community of continuous learning. Let’s connect, share experiences, and delve deeper into the world of Android app development.

👏 If you enjoyed this article, show your support with a round of applause. Your claps fuel the motivation to bring you more quality content. Let’s grow together! 🚀

Follow my Medium channel for regular updates, tutorials, and deep dives into the evolving landscape of mobile development. Your reachability and engagement make this community vibrant and enriching.

Thank you for being part of this journey. Until next time, happy coding!

Follow me on Medium | Read more articles