Android's ToolBar is simple to use

I. Introduction

In actual development, there is usually an application operation bar. If the entire application has a unified style of application status bar, we often encapsulate it by ourselves as a public component and introduce it in various places. However, the official provides a public status bar component for it, and has some commonly used properties. It used to be ActionBar , now it is called ToolBar . And it can also be linked with some other components. These components can be fully expanded if they are not satisfied with their use, and the expansion method is also very simple. However, because it is designed in accordance with the Design style, this style is rarely used in China, so if you want to modify it to meet specific usage scenarios, it is better to assemble a public status bar yourself. So I feel that everyone will use ToolBar when dealing with some linkages with other components .

2. The relationship between Activity, FragmentActivity and ToolsBar

Here we demonstrate from the most basic code, now if we create a project. Then this project comes with ToolsaBar by default . The effect is as follows:

The default code is as follows:

AndroidManifest.xml

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.MyApplication">
</application>

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

MainActivity.kt

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

activity_tools_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

</androidx.constraintlayout.widget.ConstraintLayout>

It can be seen that under the premise of not changing themes (the default theme can see that there is ActionBar), when inheriting AppCompatActivity, a status bar will be brought by default. This status bar is used by operating the ActionBar, so if it is some simple UI and operations, there is no need to define a new ToolsBar or ActionBar in the layout, and you can directly use this to operate, as follows

supportActionBar?.title = "test"

The following code is not used here

actionBar?.title = "test"

It is because actionBarthis variable belongs to Activitythe class, but this class needs to be called setActionBar(@Nullable Toolbar toolbar)to set it. If it is not set, the value is empty. supportActionBarInstead, Appcompatctivityit is called getSupportActionBar()through getDelegate().getSupportActionBar();the proxy settings in the middle, so it can be used (I haven't looked at it carefully here, there will be omissions in some places, and it is not completely correct).

3. Initial use of ToolsBar

We add the following code to the layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ToolsBarActivity">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black"
        android:minHeight="?attr/actionBarSize" 
        android:paddingEnd="20dp"
        app:title="少数的"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:titleTextColor="@android:color/white"/>

</androidx.constraintlayout.widget.ConstraintLayout>

You can see the following effects:

You can see that our own ToolBar overlaps with the system's. Here we need to modify the system theme to hide the ActionBar, as shown below:

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

You can also add the following code in the style:

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

For example:

 <style name="Theme.AppCompat.Light.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

And modify the theme to this theme, the effect is as follows:

Note: There is no need to set up supportActionBar = toolBarthe effect here.

The following are some common properties of ToolBar that can be configured for actual development:

attribute name	effect
toolbar:navigationIcon	Set the image of the button on the left side of the toolbar
toolbar:titleTextColor	main title color
toolbar:subtitle	subtitle
toolbar:subtitleTextColor	subtitle color
toolbar:menu	Set the right collapsible menu

Four, ToolBar menu configuration

Sometimes a menu option is needed on the right side of the ToolBar , so you can configure it by toolbar:menuconfiguring it. Here you need to create a menu. The steps are as follows:

First ../app/res/create menuthe folder below, create inside menu.xml. The content is as follows:

<?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">
    <item
        android:id="@+id/action_search"
        android:title="search"
        android:orderInCategory="1"
        android:icon="@mipmap/ic_search"
        app:showAsAction="always" />
</menu>

There are two things to note in item

1. orderInCategory: Indicates the order of arrangement, the value is int type, the smaller the value, the closer to the front, the same value, arranged in order

2. showAsAction: display rules, the rules are as follows:

showAsAction value	effect
always	always displayed on the interface
never	Not displayed on the interface, only appear in the three dots on the right
ifRoom	If there is a position, it will be displayed, otherwise it will appear in the three dots on the right

The click event monitoring of the menu is as follows:

  private val toolbar: Toolbar by lazy {
    
    
        findViewById(R.id.toolbar)
    }
   toolbar.setOnMenuItemClickListener {
    
    
            when(it.itemId){
    
    
                R.id.action_search -> {
    
    
                    Toast.makeText(this,"搜索",Toast.LENGTH_SHORT).show()
                }
            }
            true
        }

Five, return time monitoring

Generally, ToolBar has a return key in the upper left corner, and the monitoring here is as follows:

 toolbar.setNavigationOnClickListener {
    
    
            finish()
   }

Six, custom ToolBar

The requirements are always strange. For example, the default title is on the left, but we want to display it in the middle. How to deal with it? Here we need to expand. Examples are as follows:

<androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black"
        android:minHeight="?attr/actionBarSize"
        android:paddingEnd="20dp"
        app:menu="@menu/main_toolbar_menu"
        app:navigationIcon="@mipmap/icon_ic_arrow_back"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:titleTextColor="@android:color/white">
        
        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/center_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="中间标题"
            android:textColor="@color/white"
            android:layout_gravity="center"/>
        
    </androidx.appcompat.widget.Toolbar>

The controls are monitored as follows:

findViewById<View>(R.id.center_title).setOnClickListener{
    
    
            Toast.makeText(this,"标题",Toast.LENGTH_SHORT).show()
   }