Complete Guide to Creating Buttons in Android Toolbar

Introduction

In Android app development, the Toolbar is a key component of Material Design, offering flexible customization options for adding buttons to enable user interactions. Based on high-scoring Stack Overflow answers and Android official documentation, this article systematically explains how to create buttons in the Toolbar, with optimizations for visual appeal inspired by iOS examples.

Dependency Configuration and Basic Setup

First, add the AppCompat support library dependency in the project's build.gradle file to ensure compatibility. Example code is as follows:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.3'
}

This step ensures the app can use Material Design components, including the Toolbar. Note that the version number can be adjusted based on project needs, but stable versions are recommended to avoid compatibility issues.

Color and Style Definition

Next, define the color theme for the Toolbar. Create a color.xml file to specify primary and dark colors:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="ColorPrimary">#FF5722</color>
    <color name="ColorPrimaryDark">#E64A19</color>
</resources>

Then, apply these colors in style.xml and set the theme to no-action-bar style:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/ColorPrimary</item>
        <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
    </style>
</resources>

This ensures the Toolbar is independent of the traditional ActionBar, facilitating customization. Color choices can reference Material Design guidelines to match the visual style of iOS examples.

Toolbar Layout Design

Create an independent Toolbar layout file, tool_bar.xml, defining its basic properties:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:elevation="4dp" />

Here, the elevation property adds a shadow effect, enhancing visual hierarchy similar to iOS's flat design. The layout should be embedded in the main Activity layout using the include tag, for example in main_activity.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <include
        android:id="@+id/tool_bar"
        layout="@layout/tool_bar" />
    <TextView
        android:layout_below="@+id/tool_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/TextDimTop"
        android:text="@string/hello_world" />
</RelativeLayout>

This modular design improves code maintainability, allowing Toolbar reuse in other interfaces.

Activity Integration and Menu Configuration

In MainActivity, initialize the Toolbar and set it as the ActionBar. The example uses Java code, but Kotlin is similar:

package com.example.hp1.materialtoolbar;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        setSupportActionBar(toolbar);
    }

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

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

Note that ActionBarActivity is deprecated; use AppCompatActivity instead. In onCreateOptionsMenu, the menu is inflated into the Toolbar; onOptionsItemSelected handles button click events, executing logic based on the ID.

Menu Item and Button Definition

Define button items in res/menu/menu_main.xml, using app:showAsAction to control display:

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_search"
        android:orderInCategory="200"
        android:title="Search"
        android:icon="@drawable/ic_search"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_user"
        android:orderInCategory="300"
        android:title="User"
        android:icon="@drawable/ic_user"
        app:showAsAction="ifRoom" />
</menu>

According to Android official documentation, the app:showAsAction attribute determines if a button appears in the Toolbar: ifRoom shows it as a button when space allows, otherwise it goes to the overflow menu; never always places it in the overflow. Use Material Icons for icons to ensure consistency.

Advanced Customization and Best Practices

Referencing Answer 2, custom views like Buttons can be added directly in the Toolbar layout, but this may violate Material Design guidelines. Prioritize menu items for platform consistency. For example, handle events in onOptionsItemSelected:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_search:
            // Execute search logic
            return true;
        case R.id.action_user:
            // Handle user action
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

To optimize performance, avoid nesting complex layouts in the Toolbar; use ifRoom to manage space intelligently and prevent overflow. During testing, ensure button layouts are reasonable across different screen sizes.

Conclusion

This article provides a step-by-step guide to creating buttons in the Android Toolbar, from dependency setup to event handling. By integrating iOS-inspired examples, developers can achieve aesthetically pleasing and functional interfaces. The key is understanding the menu system and Material Design principles, with potential extensions for dynamic button state modifications.