Android Toolbar Example – Setup and Customization Guide

The Android Toolbar is the modern, flexible replacement for the traditional ActionBar. It offers extended control over appearance, actions, navigation, branding, and interaction patterns in your app’s UI. This guide explains how to implement, customize, and handle toolbar events in your Android project with clear examples.

What Is Android Toolbar?

A Toolbar is a versatile UI widget that can act as:

• The app’s primary navigation bar
• A host for action menu items
• A layout container for custom views
• A replacement for the legacy ActionBar

It provides greater control over view hierarchies and integrates seamlessly with modern Material design components.

Why Use Toolbar Instead of ActionBar

Toolbar is preferred because:

• It’s a regular ViewGroup and can be placed anywhere in layouts
• Allows custom layouts inside the bar
• Supports theming and dynamic behavior
• Works better with CoordinatorLayout and MaterialComponents

Adding Toolbar to Your Layout

In your Activity layout (activity_main.xml):

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/primaryColor"
    app:titleTextColor="@color/white"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Place the Toolbar at the top of your layout root.

Setting Toolbar in Your Activity

In your Activity (Java):

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Toolbar Example");

This replaces the default ActionBar with your custom toolbar.

Adding Menu Items to Toolbar

Create a menu file toolbar_menu.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_search"
        android:title="Search"
        android:icon="@drawable/ic_search"
        android:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_settings"
        android:title="Settings"
        android:icon="@drawable/ic_settings"
        android:showAsAction="never"/>
</menu>

Inflate this menu in your Activity:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.toolbar_menu, menu);
    return true;
}

Handling Toolbar Menu Clicks

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_search:
            // Handle search action
            return true;
        case R.id.action_settings:
            // Handle settings action
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

Adding Navigation (Back Button)

If you want the toolbar to act as an “Up/Back” button:

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationIcon(R.drawable.ic_back);
toolbar.setNavigationOnClickListener(v -> finish());

This improves navigation consistency across your app.

Custom Toolbar Views

You can add any custom view inside the toolbar:

<androidx.appcompat.widget.Toolbar
    ...>

    <TextView
        android:id="@+id/toolbarTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Custom Title"
        android:textColor="@color/white"/>
</androidx.appcompat.widget.Toolbar>

Access the custom view in your Activity:

TextView toolbarTitle = toolbar.findViewById(R.id.toolbarTitle);

Custom views help you tailor branding and interaction exactly as required.

Styling and Theming Toolbar

Define toolbar style in styles.xml:

<style name="ToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:textColorPrimary">@color/white</item>
    <item name="android:background">@color/primaryColor</item>
</style>

Then apply it in your Toolbar:

app:popupTheme="@style/ToolbarTheme"

Integrating Toolbar with DrawerLayout

To use Toolbar with a navigation drawer:

DrawerLayout drawer = findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
    this, drawer, toolbar, R.string.open, R.string.close);
drawer.addDrawerListener(toggle);
toggle.syncState();

This ensures smooth interaction between toolbar and drawer gestures.

Best Practices

From real engineering experience:

• Use Toolbar instead of legacy ActionBar
• Define colors in a centralized theme file
• Keep actions minimal and relevant
• Use icons with content descriptions (accessibility)
• Handle menu clicks with clear intent logic

These practices improve usability and maintainability.

Common Issues and Fixes

Toolbar not showing menu icons?

• Make sure you called setSupportActionBar(toolbar)
• Ensure icons are vector-compatible (android:showAsAction)

Custom view layout clipped?

• Use correct layout params and wrap content
• Avoid hardcoded heights

Conclusion

Android Toolbar is a fundamental UI pattern for modern applications. It provides control, flexibility, and clear interaction design for navigation and actions. Implementing it cleanly using the steps above ensures a consistent, maintainable user interface that adheres to modern Android design standards.