Toolbar, AppBar & Menus

Every Android screen needs a title bar of some kind — a place to show the screen's name, offer a back button, and surface the handful of actions the user reaches for most (search, sort, settings). Older tutorials call this the ActionBar. Modern Android uses the Toolbar widget instead — a regular View you place inside your own layout and fully control. This lesson builds RecipeBox's main screen Toolbar, its menu of actions, and covers the widgets that commonly live inside it.

Toolbar Replaces the Old ActionBar

The classic ActionBar was tied to the window itself — hard to restyle, hard to reposition, and awkward to animate. Toolbar fixes this by being an ordinary View: it lives inside your XML layout like any other widget, so it can be resized, colored, animated, or even hidden on scroll. To use it as the screen's action bar, you add it to the layout, then hand it to the Activity with setSupportActionBar().

Worked Example: RecipeBox's Main Screen Toolbar

RecipeBox's recipe-list screen declares a Toolbar at the top of its layout, showing the app name plus a search icon:

<!-- res/layout/activity_recipe_list.xml (excerpt) -->
<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/recipe_green"
    app:title="RecipeBox"
    app:titleTextColor="@android:color/white" />

// RecipeListActivity.java
public class RecipeListActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recipe_list);

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

Defining a Menu Resource

The actions that appear in the Toolbar (or its overflow) are declared once, as a menu resource XML file under res/menu/, rather than built up in Java:

<!-- res/menu/menu_main.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:title="Search"
        android:icon="@drawable/ic_search"
        app:showAsAction="always"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

    <item
        android:id="@+id/action_sort"
        android:title="Sort Recipes"
        app:showAsAction="never" />

</menu>

Inflating the Menu & Handling Clicks

Two Activity callbacks turn that XML into visible, clickable items: onCreateOptionsMenu() inflates the resource, and onOptionsItemSelected() reacts to whichever item was tapped:

// RecipeListActivity.java (continued)
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
    int id = item.getItemId();

    if (id == R.id.action_sort) {
        showSortDialog();
        return true;
    }

    return super.onOptionsItemSelected(item);
}

private void showSortDialog() {
    // Presents "By Name" / "By Prep Time" / "By Category" choices
    // and re-sorts the RecyclerView's List<Recipe> accordingly.
}

The Overflow Menu & app:showAsAction

A Toolbar only has so much width. Items marked to always show compete for that space; everything else collapses into the overflow menu — the three-dot icon on the right. The app:showAsAction attribute on each menu item controls this:

Value	Behavior	When to Use
always	Shown directly in the Toolbar, no matter what.	The one or two actions used constantly — RecipeBox's search icon.
ifRoom	Shown in the Toolbar only if space remains after higher-priority items.	Secondary but still common actions, when screen width allows.
never	Always collapsed into the overflow menu.	Infrequent actions — RecipeBox's "Sort Recipes", or "Settings".

Embedding a SearchView

RecipeBox's search icon uses app:actionViewClass="androidx.appcompat.widget.SearchView" (declared above in menu_main.xml). Tapping the icon expands it into a full text field right inside the Toolbar, letting the user filter recipes by title without leaving the screen:

// RecipeListActivity.java (continued)
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);

    MenuItem searchItem = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) searchItem.getActionView();
    searchView.setQueryHint("Search recipes...");
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
        @Override
        public boolean onQueryTextChange(String newText) {
            filterRecipes(newText);
            return true;
        }

        @Override
        public boolean onQueryTextSubmit(String query) {
            return false;
        }
    });

    return true;
}

BottomAppBar: An Alternative Placement

Material Components also offers BottomAppBar — a toolbar-like bar anchored to the bottom of the screen instead of the top, often paired with a centered FloatingActionButton. It's a reasonable alternative when the primary action should sit within easy thumb reach on large phones, though RecipeBox itself keeps its Toolbar at the top for now, in line with the app's simple, list-first navigation.