The Toolbar is a control that Google introduced in Android 5.0(LOLLIPOP). The Toolbar is a complete replacement for the ActionBar that Google introduced in Android 3.0. Given the Toolbar, how can it not fulfill certain requirements?

use

System version >= 5.0

Subject to inherit @ android: style/Theme. The Material, so we the Activity of the title bar. The default is android widget. The Toolbar, if you need to use the Toolbar in the layout, The theme needs to be set to NoActionBar style and the code calls the method setActionBar(Android.Widget.toolbar), as in:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_layout)
    Toolbar toolbar = findViewById(R.id.toolbar)
    setActionBar(toolbar)
}
Copy the code

System version < 5.0

Said before, the Toolbar is 5.0 to roll out a control, 5.0 the following system is unable to use, and Google introduced a backward compatibility library v7 – compat, using android. Support. V7. Widget. The Toolbar, use the steps below:

  1. Introduce into the projectcom.android.support:appcompat-v7:version-code
  2. Theme to inheritTheme.AppCompat
  3. The Activity inheritanceAppCompatActivity

So we the Activity of the title bar. The default is android support. V7. Widget. The Toolbar, if you need to use the Toolbar in the layout, the subject needs to be set into NoActionBar patterns, And code method is called setSupportActionBar (android. Support. V7. Widget. The Toolbar), such as:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_layout)
    Toolbar toolbar = findViewById(R.id.toolbar)
    setSupportActionBar(toolbar)
}
Copy the code

The following lists the implementations for different requirements scenarios

The title centered

Get the first child View in the Toolbar and reset LayoutParams as shown in the following example:

protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Toolbar toolbar = findViewById(R.id.toolbar);
    View titleView = toolbar.getChildAt(0);

    Toolbar.LayoutParams layoutParams = new Toolbar.LayoutParams
    (Toolbar.LayoutParams.WRAP_CONTENT,
                    Toolbar.LayoutParams.WRAP_CONTENT, Gravity.CENTER);
    titleView.setLayoutParams(layoutParams);
}
Copy the code

The above code resets LayoutParams by embedding the Toolbar component with a TextView that displays the title, or by calling the tools.addView (View) method and adding your own controls to display the title. If you use toolbars in your layout, you can center the Toolbar TAB by adding a display title control directly to the layout.

Friendship remind: if there is no Toolbar component embedded display title TextView, must call the ActionBar. SetDisplayShowTitleEnabled titles (false) method.

Change the header font size and color

This requirement is primarily a workaround when using the Toolbar component to display the title by default

Code sets

// Change the color
Toolbar.setTitleTextColor(@ColorInt int color)
// Change the color and size
Toolbar.setTitleTextAppearance(Context context, @StyleRes int resId)
Copy the code

Theme Settings

  • The system version is >= 6.0, and the Theme is theme.material

    Directly set the property android:titleTextColor, size Settings refer to system version >= 5.0

  • System version >= 5.0, Theme.Material

    Android :textColorPrimary allows you to change the color

    Themes are non-NoActionBar style

    Set the property Android :actionBarStyle, and then define the property Android :titleTextStyle in the defined actionBarStyle. This property is called TextAppearance, which defines the font size and color

    Theme NoActionBar style (Toolbar for layout)

    Set properties for android: toolbarStyle, and then defined in meaning toolbarStyle style attribute android: titleTextAppearance, can define the font size and color

  • System version < 5.0, Theme.AppCompat

    At present, the development needs to take into account the low version, so in actual development, the above two situations are basically not used, so this method can be compatible with the scheme mentioned above

    Themes are non-NoActionBar style

    Set the property actionBarStyle, and then define the property titleTextStyle in the defined actionBarStyle. This property is called TextAppearance, which defines the font size and color

    Theme NoActionBar style (Toolbar for layout)

    Set the property toolbarStyle, and then define the property titleTextAppearance in the defined toolbarStyle style, which defines the font size and color

Add other views and center them

Please refer to the title center solution mentioned at the beginning of this article

Back button

Show return icon

Code calls the method ActionBar. SetDisplayHomeAsUpEnabled (true)

ActionBar.setDisplayHomeAsUpEnabled(true);
Copy the code

Change return icon

Call the ActionBar. SetDisplayHomeAsUpEnabled (true) method after the default display icon dial is shown in the diagram below:

Code calls the Toolbar. SetNavigationIcon () method is a custom icon, theme homeAsUpIndicator setting attributes

Listen for the return button click event

Directly on the code:

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // onBackPress()}});Copy the code

or

// Override the Activity method
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (item.getItemId() == android.R.id.home) {
        // onBackPress()
        return true;
    }
    return super.onOptionsItemSelected(item);
}
Copy the code

Used in the layout, set the property navigationIcon

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:navigationIcon="@drawable/ic_close_black_24dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
Copy the code

Add an operation button in the upper right corner

You can also add a custom View in the same way as in the center of the scene title, just change the direction to right. This is not the focus, but the following is an elegant way

Whether it’s an icon button or a text button, you can do this by setting the Activity to menu. We won’t talk about menu here, but we’ll talk about how to change the style of the button when it’s plain text.

In the theme, set actionButtonStyle to customize the appearance. If you just want to change the color of the text, set actionMenuTextColor. If you want to set the size of the text, go to actionMenuTextAppearance.

Modify the OverflowButton style

When using action Menu, click the button to expand more options, as shown in the following icon:

See this familiar three black spots, is not instantly know what is something. So how do I change this icon? Still set the theme, set properties actionOverflowButtonStyle can change the icon of your design by designers.

highly

Accordingly, everyone has noticed that the default Toolbar height (56dp) is not the size we designed (88px), as usual, setting the theme style and property actionBarSize

conclusion

So far, this article doesn’t cover all of the Toolbar style Settings, but it does list some common requirement scenarios in development. If you have other design requirements that you don’t know how to implement or don’t know how to implement, feel free to leave a comment. Finally, here is a picture: