After Android 3.0, Google introduced the ActionBar to unify the navigation bar style of Android apps. However, ActionBar is difficult to be customized, which limits developers to a large extent. For example, title text size and spacing are difficult to be personalized, so many developers give up the use of ActionBar and use ordinary ViewGroup to encapsulate their App Bar. Or use the ActionBarSherlock library from the mighty JakeWharton.

Later, after The emergence of Material Design on Google I/O in 2014, there was a trend towards style unification in the market. The Support Library soon introduced the Toolbar control, a customized ViewGroup, To improve the use of ActionBar, App Bar ushered in the spring again.

The basic use

The first step is to hide the existing ActionBar in the Theme in two ways:


	<item name="windowActionBar">false</item>
	<item name="android:windowNoTitle">true</item>
	......
Copy the code

or

.Copy the code

Add v7 package in the second step, layout of the Toolbar controls (note in builde. Gradle file to add support. V7 package dependency: compile ‘com. Android. Support: appcompat – v7:23.3.0’), such as:



Copy the code

Third, replace the ActionBar with a Toolbar object in the Activity code:

Toolbar mToolbarTb = (Toolbar) findViewById(R.id.tb_toolbar);
setSupportActionBar(mToolbarTb);Copy the code

The effect is as follows:

Logo, title, subTitle, navigationIcon, etc., can be controlled using the App: XXX property and Java code. TitleTextAppearance and subtitleTextAppearance can also be used to control the title color and size, as in:


	<item name="android:textSize">18sp</item>
	<item name="android:textColor">@android:color/white</item>
Copy the code

In line with ActionBar usage, create a new search. XML file in the Menu resource directory and add menu contents such as:




    

Copy the code

Add to the Java code add the corresponding Menu Item for the Toolbar and set the click event, as in:

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

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_search:
            //TODO search
            break;
    }
    return super.onOptionsItemSelected(item);
}Copy the code

The effect is as follows:

As shown in the figure, the color of the overflow button is black, so how to change it to white matching the theme color? This can be changed by modifying the Theme and popupTheme properties of the Toolbar, adding the following properties to the Toolbar:



Copy the code

Another option is to use the actionMenuTextColor property in the Theme to set the font color for the Menu Item, as in:


    <item name="android:actionMenuTextColor">@android:color/white</item>
    <item name="overlapAnchor">false</item>
Copy the code

The relevant theme Settings in the Toolbar are as follows:

generalCopy the code

It is also common to group the Toolbar related attributes in a style, such as:

<! <item name=" Android :itemBackground">@android:color/white</item> <! <item name=" Android :textColorPrimary">@android:color/black</item> <! <item name="overlapAnchor">false</item>Copy the code

The effect of this setting is shown below:

Up Enable

In activities such as the second-level interface, you can display a back button on the left side of the Toolbar with the following Settings:

getSupportActionBar().setDisplayHomeAsUpEnabled(true);Copy the code

Then listen for the click event of the back button via Android.r.HOME, for example, to return to the parent Activity:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            finish();
            break;
    }
    return super.onOptionsItemSelected(item);
}Copy the code

Of course, you can also do this by setting the navigation icon click event for the Toolbar:

mToolbarTb.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { finish(); }});Copy the code

The following information is displayed:

As for the navigation of the back button icon, can pass mToolbarTb. SetNavigationIcon method or app: navigationIcon attribute to modify.

The title centered

As we said earlier, the Toolbar is a customized ViewGroup, so place a TextView control inside the Toolbar as the center Title, and hide the Toolbar Title to center the Toolbar Title. For example:



    

Copy the code

We set the style property of the TextView to be consistent with actionbar. Title, and then remove the Toolbar’s own Title. Using app: Title =”” in the layout will not work and will display the ActionBar Title. So hide the ActionBar title in your code:

getSupportActionBar().setDisplayShowTitleEnabled(false);
Copy the code

The effect is as follows:

Fragments used in

It can be inconvenient to use the same Toolbar in a Fragment when different tabs display different fragments and each Tab has a different Toolbar title and Menu. We can add our own toolbars to the layout of each Fragment and control them individually within the Fragment.

This is different from using toolbars in activities. To replace the ActionBar, add an object to the setSupportActionBar method:

((AppCompatActivity)getActivity()).setSupportActionBar((Toolbar) mContentView.findViewById(R.id.tb_toolbar));
Copy the code

To add OptionsMenu, call setHasOptionsMenu(true). Method to ensure that the onCreateOptionsMenu() method is called and that the onCreateOptionsMenu() method has a MenuInflater parameter:

@Override public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) { super.onCreateOptionsMenu(menu, inflater);  inflater.inflate(R.menu.search, menu); }Copy the code

The relevant knowledge

More introduction about Toolar can learn from the website, link is: Adding the App Bar | Android Developers. As can be seen from its usage, the Toolbar is an alternative solution to ActionBar, so many usages can be referred to ActionBar. You can learn the related usage of ActionBar from Guo God’s translation:

  • Android ActionBar fully resolved, using the official recommended best navigation bar (top)

  • Android ActionBar fully resolved, using the official recommended best navigation bar (bottom)