The use of Toolbar in the navigation bar in Android

Toolbar series article navigation

When we make APP pages, we often need to add a navigation bar to the head to display the title of the page, the back button, or there are some other buttons on the right. Of course, there will be more advanced content such as tags and search. If you have a long development time, students should know ActionBar, but this is outdated, because it is difficult to customize and looks ugly. Later, we got used to writing a layout to replace it, and introducing it using include, but in this way, either all pages had to be written by themselves, or each of them looked different and was not compatible. Later, we learned how to write this navigation with custom controls. At this time, we were a little more advanced, but we considered our technical skills. But don't worry about it now. The official Toolbar can basically meet our navigation bar needs. Below we introduce some basic usage of Toolbar.

1. Toolbar introduction method

Define a style without ActionBar in styles.xml, the code is as follows:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"/>

Of course, we can also use the following code to hide the Actionbar

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowNoTitle">true</item>
</style>

Compared with the new project that comes with it, the line windowNoTitle is added. I generally like to use the second one.

No matter which one is used, next we need to configure this AppTheme theme to the application node of AndroidManifest.xml
```
android:theme="@style/AppTheme">
```

Next we need to add a ToolBar control to the layout. Since Toolbar is used, linear layout should be used for the outer layout and set to the vertical direction. The code is as follows

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tl_head"/>
</LinearLayout>

Here I am using androidx. If you haven’t upgraded to androidx yet, the introduction is android.support.v7.widget.Toolbar, but you can just hit Toolbar directly.

Finally, our Activity should inherit from AppCompatActivity. New projects generally inherit from AppCompatActivity by default. Just make sure. Then we initialize our Toolbar control, this is not code. Then call setSupportActionBar to set. The entire Activity code is as follows:

public class MainActivity extends AppCompatActivity {

    private Toolbar tl_head;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tl_head = findViewById(R.id.tl_head);
        setSupportActionBar(tl_head);
    }
}

So our Toolbar will be displayed.

2.Toolbar common attributes

At this point, if you write and run according to the above code, you will find that although the Toolbar is successfully displayed, there is nothing but a line of text. That's because we have nothing set up. Toolbar provides us with many attributes, the commonly used attributes and methods are as follows:

Attributes in XML	Setting method of Toolbar class	Description
Logo	setLogo	Set toolbar icon
Title	setTitle	Set title text
titleTextColor	setTiitleTextColor	Set the text color of the title
titleTextAppearance	setTitleTextAppearance	Set the text style of the title. The style is defined in styles.xml
subtitle	setSubtitle	Set the subtitle text. The subtitle is below the title.
subtitleTextColor	setSubtitleTextColor	Set the text color of the subtitle
subtitleTextAppearance	setSubtitleTextAppearance	Set the text style of the subtitle
navigationIcon	setNavigationIcon	Set the left navigation icon
no	setNavigationOnClickListener	Set the click listener for the navigation icon

3. Toolbar usage example

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 从布局文件中获取名叫tl_head的工具栏
        Toolbar tl_head = findViewById(R.id.tl_head);
        // 设置工具栏左边的导航图标
        tl_head.setNavigationIcon(R.mipmap.ic_back);
        // 设置工具栏的标题文本
        tl_head.setTitle("工具栏页面");
        // 设置工具栏的标题文字颜色
        tl_head.setTitleTextColor(Color.RED);
        // 设置工具栏的标题文字风格
//        tl_head.setTitleTextAppearance(this, R.style.TabButton);
        // 设置工具栏的标志图片
        tl_head.setLogo(R.mipmap.ic_launcher);
        // 设置工具栏的副标题文本
        tl_head.setSubtitle("Toolbar");
        // 设置工具栏的副标题文字颜色
        tl_head.setSubtitleTextColor(Color.YELLOW);
        // 设置工具栏的背景
        tl_head.setBackgroundResource(R.color.blue_light);
        // 使用tl_head替换系统自带的ActionBar
        setSupportActionBar(tl_head);
        // 给tl_head设置导航图标的点击监听器
        // setNavigationOnClickListener必须放到setSupportActionBar之后，不然不起作用
        tl_head.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish(); // 结束当前页面
            }
        });
    }
}

4. Solve the problem with the gap between the title and the left back button

The above is a conventionally applied method. But some classmates may follow me, the request is very simple but it is obsessive-compulsive disorder. We only need a back button and title, and nothing else. But there is a gap between the back button and the title. After research, mainly add app:contentInsetStartWithNavigation="0dp" attribute and tl_head.setTitleMargin(0,0,0,0); code setting. The specific code is as follows:

    <androidx.appcompat.widget.Toolbar
        app:contentInsetStartWithNavigation="0dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tl_head"/>

        // 从布局文件中获取名叫tl_head的工具栏
        Toolbar tl_head = findViewById(R.id.tl_head);
        // 设置工具栏左边的导航图标
        tl_head.setNavigationIcon(R.mipmap.ic_back);
        // 设置工具栏的标题文本
        tl_head.setTitle("工具栏页面");
        // 设置工具栏的标题文字颜色
        tl_head.setTitleTextColor(Color.RED);
        tl_head.setTitleMargin(0,0,0,0);
        // 设置工具栏的背景
        tl_head.setBackgroundResource(R.color.blue_light);
        // 使用tl_head替换系统自带的ActionBar
        setSupportActionBar(tl_head);
        // 给tl_head设置导航图标的点击监听器
        // setNavigationOnClickListener必须放到setSupportActionBar之后，不然不起作用
        tl_head.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish(); // 结束当前页面
            }
        });

In this way, we can achieve an effect we want.