Toolbar: The App Toolbar in Android Applications

Author: IT Sectr Published: 2026-02-23 Reading time: 12 min

Toolbar (app toolbar) is an Android component that replaced ActionBar, displaying the screen title, navigation elements, and actions. Toolbar is part of the Material Design Library and is fully customizable: from a standard title to custom views and animated icons. Learn more about the component in the Material Design 3 specification.

Key Takeaways

  • Toolbar is a customizable Android toolbar, the successor to ActionBar from Material Design
  • ActionBar is the system bar that existed before Android 5.0, replaced by Toolbar
  • Material 3 — Top App Bar with four variants: Small, Center-aligned, Medium, Large
  • Menu — XML menu with action items, integrated into Toolbar via onCreateOptionsMenu
  • Customization — title, logo, navigation icon, custom views, and animations

What is Toolbar?

Toolbar is an Android component from the Material Design library (androidx.appcompat.widget.Toolbar) that provides a flexible toolbar for an app screen. Toolbar replaced the outdated ActionBar, giving developers full control over appearance and behavior. It can be placed anywhere in a layout, have custom child views, be animated, and adapt to different screen sizes.

Material Design 3 (2026) defines the Top App Bar — the evolution of Toolbar — with four variants: Small (compact, 48 dp), Center-aligned (centered title), Medium (enlarged title, 112 dp), and Large (large title, 168 dp). Each variant has its own scroll behavior: Small stays fixed, Medium and Large collapse to Small when scrolling content upward.

Toolbar displays three key zones: the navigation icon (left, usually a hamburger or Back arrow), the screen title (center or left), and action items (right — action icons, overflow menu). Toolbar can contain a logo, subtitle, custom Views (search view, switch), and the animated CollapsingToolbarLayout in combination with CoordinatorLayout.

ActionBar: History and Evolution

ActionBar is a system Android bar that appeared in Android 3.0 (API 11) as a replacement for the outdated Title Bar. ActionBar was tightly bound to Activity, had a fixed position at the top of the screen, and limited customization options. With the release of Android 5.0 (Lollipop, 2014) and the AppCompat library, Google introduced Toolbar as a flexible replacement.

The main shortcomings of ActionBar that Toolbar addressed: fixed position (only at the top), no animation support, difficulty with custom views, problems with CoordinatorLayout and CollapsingToolbarLayout. Google officially declared ActionBar deprecated in 2015 and recommends Toolbar for all new projects. Starting with Android 12 (2021), ActionBar is disabled by default in new Material 3 themes.

FeatureActionBarToolbar
PositionFixed topAnywhere in layout
CustomizationLimited (color, background)Full (views, styles, animations)
CollapsingNot supportedCollapsingToolbarLayout
AnimationSystem onlyAny (ObjectAnimator, Transition)
Material 3Not supportedSmall / Medium / Large App Bar

Setting Up Toolbar in Android

To use Toolbar you need to: (1) set a theme without ActionBar (Theme.Material3.NoActionBar or Theme.AppCompat.NoActionBar), (2) add Toolbar to the XML layout, (3) set it as ActionBar via setSupportActionBar. After that, Toolbar gets all ActionBar features: Menu handling, navigation icon, title from AndroidManifest.

xml
<!-- activity_main.xml with Toolbar -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>
kotlin
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val toolbar = findViewById<Toolbar>(R.id.toolbar)
        setSupportActionBar(toolbar)

        // Setting up navigation icon
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // Custom title
        supportActionBar?.title = "Home"
        supportActionBar?.subtitle = "Hello, user!"
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.toolbar_menu, menu)
        return true
    }
}

Integrating Menu in Toolbar

Toolbar integrates with the Android Menu system through onCreateOptionsMenu and onOptionsItemSelected callbacks. Menu defines action items — action icons displayed on the right side of the Toolbar. If action items don't fit, they automatically move to the overflow menu (three dots). The developer controls this via the app:showAsAction attribute: always, ifRoom, never.

xml
<!-- res/menu/toolbar_menu.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:icon="@drawable/ic_search"
        android:title="Search"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Notifications"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="Settings"
        app:showAsAction="never" />
</menu>
kotlin
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_search -> {
            Toast.makeText(this, "Search", Toast.LENGTH_SHORT).show()
            true
        }
        R.id.action_notifications -> {
            openNotifications()
            true
        }
        R.id.action_settings -> {
            openSettings()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

Material 3: Center and Large Top App Bar

Material 3 introduces four Top App Bar variants: Small (compact, 48 dp), Center-aligned (centered title), Medium (112 dp with enlarged title), and Large (168 dp with large title). Medium and Large App Bars support collapsible behavior — when scrolling content upward, they smoothly collapse to Small. The animation is controlled via CoordinatorLayout and AppBarLayout.

Center-aligned Top App Bar is a new Material 3 variant where the title is positioned at the center of the bar. This style is often used in Google apps (Play Store, YouTube) and is recommended for screens with a minimal number of action items. Small Top App Bar is the classic Toolbar, compatible with older Android versions. Medium and Large are suitable for screens where the title is a key element (profile, home page).

xml
<!-- Material 3 Large Top App Bar with CollapsingToolbarLayout -->
<CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="168dp"
            app:contentScrim="?attr/colorPrimary"
            app:titleEnabled="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </CollapsingToolbarLayout>
    </AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="Screen content..." />
    </NestedScrollView>
</CoordinatorLayout>

Advanced Toolbar Customization

Toolbar supports full customization: height changes, show/hide animations, custom child Views, logo, navigation icon, PopupMenu, and integration with CoordinatorLayout. For scroll-based hide animation, AppBarLayout is used with flags scroll, enterAlways, snap. For parallax image effect under the Toolbar — CollapsingToolbarLayout with mode parallax.

Logo and subtitle are set via setLogo and setSubtitle methods. The navigation icon is configured via setNavigationIcon and setNavigationOnClickListener. Custom Views are added via addView directly into the Toolbar. For SearchView, use MenuItem with actionViewClass. For dark theme, colors from Material 3 attributes are applied automatically.

kotlin
// Advanced Toolbar Customization
with (toolbar) {
    // Logo and title
    setLogo(R.drawable.ic_logo)
    setTitle("My App")
    setSubtitle("Version 2.0")

    // Navigation icon with handler
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // Custom view — Switch for theme
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

    // Custom PopupMenu
    setOnMenuItemClickListener { item ->
        Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
        true
    }
}

Frequently Asked Questions

What is the difference between Toolbar and ActionBar?

ActionBar is a system bar from Android 3.0–4.4 with limited customization. Toolbar is a flexible Material Design component that can be placed anywhere in a layout, animated, and filled with custom views. Toolbar completely replaces ActionBar via setSupportActionBar.

How to hide Toolbar on scroll?

Use CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Set the scroll flag for Toolbar in layout_scrollBehavior. When scrolling down, Toolbar hides; when scrolling up, it appears with animation. In Material 3, Medium/Large Top App Bar collapses to Small.

How many action items can be placed in Toolbar?

The limitation is the physical screen width. 2–4 action items (icons) are recommended. The rest move to the overflow menu (three dots). Configure via app:showAsAction: always (always show), ifRoom (if space allows), never (in overflow).

How to add SearchView to Toolbar?

SearchView is added as an action view in the Menu. In XML menu: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView automatically collapses to a search icon and expands on tap. Supports voice search and autocomplete via SearchRecentSuggestionsProvider.

What is CollapsingToolbarLayout?

CollapsingToolbarLayout is a container for Toolbar that animates collapsing when scrolling content. Used with CoordinatorLayout and AppBarLayout. Supports modes: pin (fixed), parallax (parallax effect). Ideal for screens with a header image (profile, detail page).

Summary

  • Toolbar is a flexible Android toolbar that replaced ActionBar and is fully integrated with Material Design
  • Material 3 Top App Bar — four variants: Small, Center-aligned, Medium, Large with different scroll behaviors
  • ActionBar is a deprecated system bar, limited in customization and animation
  • Menu and action items — integration via XML menu with always/ifRoom/never flags for visibility control
  • CollapsingToolbarLayout — animated collapsing of Toolbar on scroll for screens with a header image
  • Customization — logo, subtitle, custom Views, SearchView, PopupMenu, and Material 3 colors
  • SearchView — built-in action view for search with voice input and autocomplete

We will develop a mobile application turnkey

IT Sectr creates iOS and Android applications for startups and businesses since 2017. We will advise you and propose the best solution.

Discuss the project

Read also