How to Use Toolbar in Android: Simple Guide with Example

To use a Toolbar in Android, add it to your layout XML and set it as the app's action bar in your activity using setSupportActionBar(toolbar). This replaces the default action bar with your custom toolbar, allowing you to customize its appearance and behavior.

Syntax

The basic steps to use a Toolbar in Android are:

• Add a Toolbar widget in your activity's layout XML.
• In your activity's onCreate method, find the toolbar by its ID.
• Call setSupportActionBar(toolbar) to set it as the app's action bar.

This lets you customize the toolbar like a standard action bar.

xml

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

Output

A horizontal bar at the top of the screen styled with the primary color and white title text.

Example

This example shows how to add a toolbar in the layout and set it as the action bar in the activity.

kotlin

import androidx.appcompat.widget.Toolbar

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)

    supportActionBar?.title = "My Toolbar"
  }
}

Output

The app shows a top bar with the title 'My Toolbar' styled as the app's action bar.

Common Pitfalls

Common mistakes when using Toolbar include:

• Not calling setSupportActionBar(toolbar), so the toolbar does not behave as the action bar.
• Using Toolbar without the AppCompat theme, causing style issues.
• Forgetting to add the toolbar to the layout or using the wrong ID.

Always ensure your activity extends AppCompatActivity and your theme supports the toolbar.

kotlin

/* Wrong: Missing setSupportActionBar call */
class MainActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    // Toolbar found but not set as action bar
    val toolbar = findViewById<Toolbar>(R.id.toolbar)
    // Missing setSupportActionBar(toolbar)
  }
}

/* Right: Correctly setting toolbar */
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)
  }
}

Quick Reference

Toolbar Usage Tips:

• Use androidx.appcompat.widget.Toolbar for compatibility.
• Set toolbar as action bar with setSupportActionBar(toolbar).
• Customize toolbar title and menu via supportActionBar.
• Ensure your app theme inherits from Theme.AppCompat or similar.

Key Takeaways

Add Toolbar widget in your layout XML to create a custom top bar.

Call setSupportActionBar(toolbar) in your activity to use Toolbar as the action bar.

Ensure your activity extends AppCompatActivity and uses a compatible theme.

Customize Toolbar title and menu through supportActionBar after setting it.

Avoid forgetting setSupportActionBar to prevent Toolbar from not showing properly.