Android Studio：从Palette添加Toolbar的自定义方法及两种创建方式对比

Hey there! Great question—this is a super common point of confusion for Android developers, especially those who are just getting started with customizing UI components. Let's break this down step by step.

First, let's clarify what each method actually does under the hood:

• Android Studio Template Creation (e.g., selecting a "Toolbar" activity template)
  This method is a one-stop setup: it generates a pre-configured Toolbar in your layout, sets a NoActionBar theme in your manifest, and adds code to bind the Toolbar as the Activity's ActionBar. It's essentially using Android's official templates to automate all the boilerplate work for you.

• Dragging Toolbar from the Palette
  This only adds a raw Toolbar widget to your layout file—no theme configuration, no Activity binding, no boilerplate code. It's just like adding any other View (like a TextView or Button) to your layout; you have to handle all the setup yourself.

Let's weigh the pros and cons of each approach to help you choose the right one for your project:

Android Studio Template Creation #

Pros #

• Beginner-friendly: No need to worry about theme conflicts or binding code—everything works out of the box, which is perfect for prototyping or learning the basics.
• Standardized: Follows Android's official best practices, so you avoid common mistakes (like forgetting to disable the default ActionBar, leading to overlapping Toolbars).

Cons #

• Less flexible: The template generates fixed code and layout structures. If you want a highly customized Toolbar, you'll have to rewrite parts of the auto-generated code, which can feel restrictive.
• Hidden logic: New developers might not understand the underlying configuration (like why the NoActionBar theme is needed), making it harder to debug issues later.

Palette Drag-and-Drop #

Pros #

• Full control: You get to decide every aspect of the Toolbar's setup—from theme configuration to custom views. Ideal for advanced developers building unique UI experiences.
• Deep understanding: Manually setting up the Toolbar forces you to learn how it integrates with Android's theme system and Activity lifecycle, which builds stronger foundational knowledge.

Cons #

• Steeper learning curve: You need to know how to configure themes, bind the Toolbar to the Activity, and handle menu events on your own. Easy to make mistakes (like missing theme settings that cause the Toolbar to not appear).
• Slower setup: Requires writing all boilerplate code manually, which is less efficient for simple, standard Toolbars.

Now, let's walk through the step-by-step process to customize a Toolbar you've dragged from the Palette:

Step 1: Configure a NoActionBar Theme (Critical!) #

First, you need to disable the default system ActionBar to avoid overlapping with your custom Toolbar.

1. Open res/values/styles.xml (or themes.xml for newer projects) and create a theme that extends a NoActionBar parent:

<style name="AppTheme.CustomToolbar" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/your_primary_color</item>
    <item name="colorPrimaryDark">@color/your_primary_dark_color</item>
    <item name="colorAccent">@color/your_accent_color</item>
</style>

2. Assign this theme to your target Activity in AndroidManifest.xml:

<activity
    android:name=".YourTargetActivity"
    android:theme="@style/AppTheme.CustomToolbar"/>

Step 2: Set Basic Toolbar Properties in Layout #

You can configure core styling directly in your layout file:

<androidx.appcompat.widget.Toolbar
    android:id="@+id/my_custom_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize" <!-- Uses standard ActionBar height -->
    android:background="?attr/colorPrimary"
    android:elevation="4dp" <!-- Adds Material Design shadow -->
    app:title="My Custom Toolbar"
    app:titleTextColor="@android:color/white"
    app:subtitle="Optional Subtitle"
    app:subtitleTextColor="@android:color/darker_gray"/>

Step 3: Bind Toolbar to Activity (Optional) #

If you want your Toolbar to behave like a standard ActionBar (with menu support, back button, etc.), bind it in your Activity's onCreate method:

Kotlin #

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

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

    // Enable back button (optional)
    supportActionBar?.setDisplayHomeAsUpEnabled(true)
}

Java #

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

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

    // Enable back button (optional)
    if (getSupportActionBar() != null) {
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
}

Skip this step if you just want to use the Toolbar as a regular View (no ActionBar functionality).

Step 4: Add Custom Menu (Optional) #

To add menu items to your Toolbar:

1. Create a menu file in res/menu (e.g., menu_custom_toolbar.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"/>
    <item
        android:id="@+id/action_settings"
        android:title="Settings"
        android:icon="@drawable/ic_settings"
        app:showAsAction="ifRoom"/>
</menu>

2. Inflate the menu and handle clicks in your Activity:

Kotlin #

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

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_search -> {
            // Handle search click
            true
        }
        R.id.action_settings -> {
            // Handle settings click
            true
        }
        android.R.id.home -> {
            // Handle back button click
            onBackPressed()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

Java #

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

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == R.id.action_search) {
        // Handle search click
        return true;
    } else if (id == R.id.action_settings) {
        // Handle settings click
        return true;
    } else if (id == android.R.id.home) {
        // Handle back button click
        onBackPressed();
        return true;
    }
    return super.onOptionsItemSelected(item);
}

Step 5: Advanced Customization (Add Custom Views) #

You can nest custom views directly inside the Toolbar for unique layouts (like a search bar or profile icon):

<androidx.appcompat.widget.Toolbar
    android:id="@+id/my_custom_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary">

    <EditText
        android:id="@+id/toolbar_search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Search..."
        android:textColor="@android:color/white"/>

</androidx.appcompat.widget.Toolbar>

Then reference the custom view in your Activity code just like any other View.

内容的提问来源于stack exchange，提问作者MaNameFlash9