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 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 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.
| Feature | ActionBar | Toolbar |
|---|---|---|
| Position | Fixed top | Anywhere in layout |
| Customization | Limited (color, background) | Full (views, styles, animations) |
| Collapsing | Not supported | CollapsingToolbarLayout |
| Animation | System only | Any (ObjectAnimator, Transition) |
| Material 3 | Not supported | Small / Medium / Large App Bar |
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.
<!-- 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>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
}
}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.
<!-- 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>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 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).
<!-- 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>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.
// 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
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.
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.
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).
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.
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
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.
Read also