Using Android Navigation Bar Customization

The navigation bar in Android is an essential component that provides users with system-level navigation controls. Android allows for customization of the navigation bar, including changing its appearance, adding or removing buttons, and modifying its behavior. In this tutorial, we'll explore the various ways to customize the navigation bar on Android devices.

Prerequisites

To follow along with this tutorial, you'll need:

• An Android device with Android version 5.0 (Lollipop) or above.
• Basic knowledge of Android development using Java or Kotlin.
• Android Studio installed on your computer.

Table of Contents

1. Enabling the Navigation Bar
2. Hiding the Navigation Bar
3. Modifying the Navigation Bar Appearance
4. Adding Action Buttons to the Navigation Bar
5. Customizing the Navigation Bar Behavior
6. Handling Navigation Bar Click Events

1. Enabling the Navigation Bar

By default, most Android devices have the navigation bar enabled. However, if you're working with a device or emulator without a navigation bar, you can enable it by following these steps:

1. Open the device's settings.
2. Navigate to the "System" or "Display" settings, depending on the device.
3. Look for the "Navigation Bar" option and enable it if it's turned off.

2. Hiding the Navigation Bar

If you want to hide the navigation bar in specific scenarios, such as full-screen applications or immersive experiences, you can do so programmatically. Follow these steps to hide the navigation bar:

1. Open your Android project in Android Studio.
2. Navigate to the activity or fragment where you want to hide the navigation bar.
3. Add the following code snippet in the onCreate method of your activity or the onCreateView method of your fragment:

// For Java
View decorView = getWindow().getDecorView();
int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
decorView.setSystemUiVisibility(uiOptions);

// For Kotlin
val decorView = window.decorView
val uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
decorView.systemUiVisibility = uiOptions

By setting the appropriate flags, the navigation bar will be hidden until the user interacts with the screen.

3. Modifying the Navigation Bar Appearance

Android allows you to modify the appearance of the navigation bar, including its background color, button icons, and size. To customize the navigation bar appearance, follow these steps:

1. In your project's res directory, create a new directory named values.
2. Inside the values directory, create a new XML file named styles.xml if it doesn't exist already.
3. Open the styles.xml file and add the following code:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:navigationBarColor">@color/colorPrimary</item>
    </style>
</resources>

In the above code snippet, colorPrimary can be replaced with the desired color for the navigation bar background.

4. Apply the newly created theme to your activity or application by adding the following line to the corresponding element in the AndroidManifest.xml file:

android:theme="@style/AppTheme"

After completing these steps, the navigation bar in your application will have the desired background color.

4. Adding Action Buttons to the Navigation Bar

Android allows you to add additional action buttons to the navigation bar, providing quick access to specific functionalities. To add action buttons, follow these steps:

1. Open your activity or fragment where you want to add action buttons.
2. In the XML layout file of that activity or fragment, add the following code to define the action buttons:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/navigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/navigation_menu"
    />

3. Create a new XML resource file named navigation_menu.xml under the res/menu directory.
4. Open the navigation_menu.xml file and add the desired action buttons using the <item> tag:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_home"
        android:icon="@drawable/ic_home"
        android:title="@string/home" />
    <!-- Add more items as needed -->
</menu>

Replace ic_home with the desired icon for each action button.

5. In your activity or fragment, add the following code to handle the selection of action buttons:

// For Java
BottomNavigationView navigationView = findViewById(R.id.navigationView);
navigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        // Handle button clicks here
        return true;
    }
});

// For Kotlin
val navigationView = findViewById<BottomNavigationView>(R.id.navigationView)
navigationView.setOnNavigationItemSelectedListener { item ->
    // Handle button clicks here
    true
}

Using the onNavigationItemSelected callback, you can perform actions based on the selected action button.

5. Customizing the Navigation Bar Behavior

Android provides various customization options for the navigation bar behavior. For example, you can control how the navigation bar reacts when the user interacts with the screen. To customize the navigation bar behavior, follow these steps:

1. Open your activity or fragment where you want to customize the navigation bar behavior.
2. In the onCreate method of your activity or the onCreateView method of your fragment, add the following code:

// For Java
View decorView = getWindow().getDecorView();
int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
                | View.SYSTEM_UI_FLAG_FULLSCREEN;
decorView.setSystemUiVisibility(uiOptions);

// For Kotlin
val decorView = window.decorView
val uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or
                View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY or
                View.SYSTEM_UI_FLAG_FULLSCREEN
decorView.systemUiVisibility = uiOptions

The above code will hide the navigation bar and make it reappear when the user interacts with the screen.

6. Handling Navigation Bar Click Events

To handle click events on the navigation bar buttons, follow these steps:

1. Inside your activity or fragment, implement the NavigationView.OnNavigationItemSelectedListener interface.
2. Override the onNavigationItemSelected method and add your custom logic for each button click:

// For Java
public class MainActivity extends AppCompatActivity implements
        BottomNavigationView.OnNavigationItemSelectedListener {
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // Your code
        BottomNavigationView navigationView = findViewById(R.id.navigationView);
        navigationView.setOnNavigationItemSelectedListener(this);
    }
    
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_home:
                // Handle home button click
                return true;
            // Add more cases for each button
        }
        return false;
    }
}

// For Kotlin
class MainActivity : AppCompatActivity(), BottomNavigationView.OnNavigationItemSelectedListener {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        // Your code
        val navigationView = findViewById<BottomNavigationView>(R.id.navigationView)
        navigationView.setOnNavigationItemSelectedListener(this)
    }
    
    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
            R.id.action_home -> {
                // Handle home button click
                return true
            }
            // Add more cases for each button
        }
        return false
    }
}

By implementing the OnNavigationItemSelectedListener, you can handle the button clicks inside the onNavigationItemSelected method.

Congratulations! You now have a comprehensive guide on Android navigation bar customization. You can explore further documentation and experiment with various customization options to suit your application's needs.